Виджеты чата для сайта, которые делают его более интерактивным


Содержание материала:

25 полезных виджетов WordPress для вашего сайта

WordPress позволяет легко настраивать макет сайта с помощью виджетов. Для этой статьи мы отобрали 25 лучших виджетов для WordPress , которые могут быть полезны для вашего сайта.

1. Recent Posts Widget with Thumbnails

По умолчанию WordPress распространяется с виджетом недавних записей, который отображает простой список ваших последних записей. Виджет Recent Posts Widget With Thumbnails позволяет отображать недавние записи с миниатюрами. Он использует указанное изображение или первое изображение в записи в качестве миниатюры. Вы также можете настроить высоту и ширину рисунка в окне настроек виджета.

2. Category Posts

Виджет для сайта WordPress Category Posts показывает недавние записи из выбранной категории. Вы можете выводить записи в виде списка заголовков, отрывков или миниатюр. Его использование совместно с плагином Display Widgets позволит показать скрытые виджеты на определенных страницах.

3. Simple Social Icons

Простой виджет для добавления социальных иконок на боковые панели. Все параметры конфигурации находятся в настройках виджета. Вы можете выбрать, какие социальные сети использовать, и добавить URL-адреса ваших профилей.

Также вы можете изменить иконку, выбрав фон и цвет шрифта.

Это лучший виджет WordPress для добавления иконок социальных сетей.

4. Google Maps Widget

Легкий способ добавить карту на боковую панель вашего сайта – воспользоваться виджетом Google Maps . Этот плагин позволяет отображать карту Google в виджете. Когда пользователь нажимает на него, во всплывающем окне открывается карта большего размера. Это один из лучших виджетов для WordPress для коммерческих организаций, которые хотят показать на сайте свой адрес и местоположение.

5. Social Count Plus

Виджет позволяет легко отображать счетчик подписчиков в социальных сетях на боковой панели. Социальная проверка помогает построить доверительные отношения и найти верных последователей.

6. Image Widget

Если нужно добавить изображение на боковую панель, то вам придется редактировать код HTML . Однако многие новички не знают HTML и не могут должным образом стилизовать изображение. Виджет Image Widget решает эту проблему, позволяя добавлять изображение с помощью загрузчика мультимедийных файлов в WordPress . Он также предоставляет графический интерфейс для добавления заголовка, альтернативного текста и выбора размера изображения.

7. Custom Taxonomies Menu Widget

По умолчанию WordPress распространяется с виджетом категорий. Но в нем нет предустановленного виджета для отображения индивидуальных классификаций на боковой панели WordPress . Виджет меню для WordPress позволяет легко добавлять индивидуальные классификации на боковую панель.

8. Compact Archives

Используемый по умолчанию виджет ежемесячных архивов показывает их в длинном списке. Это занимает много места и заставляет пользователей листать вниз. Плагин Compact archives решает эту проблему с помощью группировки ежемесячных архивов по годам и их отображения в компактном виде. В комплект также входит виджет, который можно добавить на боковую панель.

9. Authors Widget

С легкостью отображайте список авторов в WordPress блоге. Этот простой виджет позволяет показывать имена авторов с аватарками и ссылаться на их посты. Также можно отобразить количество статей и ссылку на RSS-канал автора.

10. YouTube Channel Gallery

Этот виджет для сайта WordPress позволяет демонстрировать последние видео с вашего YouTube канала. Он отображает видео в виде привлекательной сетки, которая занимает меньше места и выглядит более интересно.

11. OptinMonster

OptinMonster является WordPress плагином для привлечения потенциальных клиентов. Если вы хотите создать список адресов электронной почты для вашего блога, то OptinMonster – тот плагин, который вам нужен.

Он имеет в своем комплекте два виджета: Sidebar и Afterpost . Оба позволяют добавлять высоко конвертируемые формы подписки на сайт. Вы можете даже группировать пользователей по различным категориям, показывать разные формы на разных страницах и т.д.

12. Tabbed Login Widget

Еще один способ добавить регистрационную форму в боковую панель WordPress – это использование плагина Tabbed Login Widget . Он выводит виджет с вкладками для форм входа, регистрации и восстановления пароля. Это позволяет быстро заходить на сайт даже без доступа к панели администрирования.

13. Simple Contact Info

Плагин Simple Contact Info позволяет легко добавлять свою контактную информацию, социальные иконки и информацию о местоположении просто заполнив форму. После этого вы можете легко перетащить виджеты с контактами на боковую панель, чтобы отобразить эту информацию.

14. Quick Chat

Мощная конфигурируемая система чата для WordPress сайтов. Плагин поставляется с виджетом для WordPress , который можно добавить на боковую панель, чтобы сделать чат доступным везде на вашем сайте. Также можно создать специальную страницу для чата на сайте и использовать шорткод [quick-chat] .

15. Testimonials Widget

Положительные отзывы – это отличный способ « похвастаться » своими довольными клиентами и заказчиками. Виджет Testimonials помогает легко создавать отзывы и отображать их с помощью виджета или шорткода.

16. Whistles

Плагин Whistles позволяет легко создать и отобразить контент в красивом аккордеоне, вкладке или переключаемом меню. К плагину также прилагается виджет, который можно добавить в боковую панель.

17. Neat Skype Status

Хотели бы отобразить свой контакт Skype в онлайн-статусе на WordPress сайте? Данный сервис используется тысячами профессионалов для связи с клиентами и заказчиками. Neat Skype Status позволяет легко отображать ваш статус Skype на WordPress сайте.

18. Random Posts Widget

Этот простой плагин обеспечивает более легкий способ отображения произвольных записей в боковой панели WordPress . Настройки виджета также позволяют показать случайные записи из конкретной категории. Он поддерживает несколько экземпляров, что означает, что вы можете добавить этот виджет несколько раз.

19. Soliloquy WordPress Slider Widget

Soliloquy – это отзывчивый WordPress плагин, который облегчает создание слайдеров. С его помощью вы сможете добавить слайдеры в любом месте, используя WordPress виджет галереи. Таким образом, можно показывать недавние записи, избранные посты, видео, изображения pinterest, instagram или любую другую информацию.

Soliloquy также имеет и бесплатную версию .

20. Feature a Page Widget

Этот плагин позволяет добавить страницу в виде анонса на боковую панель WordPress . С его помощью можно отобразить заголовок страницы, миниатюру записи и отрывок.

21. Envira Gallery

Envira Gallery – отзывчивый WordPress плагин галереи. Если вы профессиональный фотограф или любитель, то этот плагин отлично подойдет для демонстрации ваших фотогалерей в виджете на боковой панели.

Также доступна бесплатная версия плагина Envira Gallery .

22. Date and Time Widget

Вероятно, для новичков это самый удобный WordPress виджет календарь. Этот плагин использует время, которое вы установили на странице общих настроек WordPress . С его помощью вы можете задать формат времени и даты, шрифт и цвет фона.

23. Google Calendar Events

Этот плагин предлагает легкий способ отображения календаря событий. Вы можете создать события с помощью Google Calendar , а затем синхронизировать календарь с плагином, чтобы отобразить его на своем сайте. Этот виджет пригодится для некоммерческих организаций, которые хотят отображать свои события.

24. Display Recently Registered Users Widget

На многопользовательском WordPress сайте этот плагин предоставляет простой способ отображения недавно зарегистрированных пользователей в виджете. Вы можете выбрать, что отображать: пользовательский аватар, дату регистрации и ссылку на авторскую страницу пользователя в WordPress .

25. WordPress Popular Posts

WordPress Popular Posts позволяет отображать наиболее популярные записи вашего сайта в симпатичном виджете. Вы можете сортировать популярные записи по количеству просмотров или по количеству комментариев.

Надеемся, что эта статья помогла вам найти самые полезные виджеты для WordPress для вашего сайта.

Данная публикация представляет собой перевод статьи « 25 Most Useful WordPress Widgets for Your Site » , подготовленной дружной командой проекта Интернет-технологии.ру

Пять популярных виджетов для повышения конверсии

Термин «виджет» появился в английском языке в двадцатых годах XX века. Он обозначал любое понятие или определение, точное название которого было забыто человеком. Часть словарей объясняет происхождение термина от слов gadget (гаджет, приспособление) или which it (этот, как его). Другие источники предполагают, что слово «виджет» могло произойти от словосочетания window gadget (оконное приспособление). В сфере компьютерных технологий виджет — это название класса вспомогательных мини-программ, которые размещаются в рабочем пространстве основной программы и служат для украшения, развлечения или решения определенных задач, например получения оперативной информации посредством веб-браузера.

Наиболее распространенные виджеты

В зависимости от специфики и основной тематики сайта выбор вспомогательных программ может существенно различаться. Интернет-магазины или службы доставки, к примеру, используют онлайн-калькуляторы для расчета стоимости товара или услуги, а банки и управляющие компании — чаты для ответов на вопросы клиентов. Популярным виджетом является функция обратного звонка, которая позволяет посетителю ввести свои контактные данные в форму и получить оперативный ответ по телефону. Нельзя не отметить и такую функцию, как новостная лента для сайта, собирающая новости с популярных информационных ресурсов. Можно назвать пять основных полезных виджетов для сайта, позволяющих сделать посещение практически любого интернет-проекта удобным и полезным и получать всю необходимую информацию, не переходя по множеству ссылок.

Jivosite.ru

Этот виджет по праву можно назвать одним из лидеров среди онлайн-чатов на русском языке. Для него существует как мобильная версия, так и версия для ПК. Отличает виджет минималистичный дизайн, а также большое количество интеграций с другими сервисами и быстрая круглосуточная техподдержка. Основные преимущества программы:

  • простота установки;
  • вовлечение посетителя сайта в диалог путем грамотно выполненной настройки;
  • возможность быстрой реакции на вопрос благодаря функции предпросмотра набираемого сообщения;
  • интеграция с CRM (Customer Relationship Management);
  • возможность сбора контактных данных в случае невозможности оперативного ответа;
  • услуга обратного звонка;
  • функция передачи файлов (например, прайс-листов или фотографий товара);
  • обмен диалогами между операторами;
  • подготовка ежедневных отчетов о работе.

Все функции можно адаптировать под собственные требования. Разберем процедуру установки и настройки виджета.

Установка виджета. Перед добавлением программы на сайт необходимо пройти регистрацию на ресурсе jivosite.ru. Она проходит по стандартной схеме: пользователь указывает почту и придумывает логин и пароль для аккаунта. В профиле необходимо указать личные, а также контактные данные для возможности получения информации консультационного характера. Далее в профиле прописывается сайт, на котором будет размещен онлайн-чат. Программу Jivosite можно скачать на компьютер либо открыть в браузере. Эта процедура не носит обязательного характера — можно выполнить ее позднее. Наконец, на финальном этапе пользователю становится доступен код чата, который он может разместить непосредственно на своем сайте либо отправить на электронную почту системному администратору. Важное дополнение: расширенные возможности виджета будут доступны в тестовой версии программы только в течение первых двух недель. По прошествии этого срока расширенные возможности отключаются, а онлайн-чат продолжает работу в бесплатном режиме без сокращения количества возможных диалогов и ограничений по времени. Профессиональная версия обладает более широкими возможностями, с которыми можно ознакомиться на официальном сайте, а стоимость ее варьируется от 592 до 790 рублей в месяц в зависимости от оплаченного периода.

Настройка виджета. Программа содержит большое количество настроек: от визуального оформления до возможности дополнительного управления аналитическими системами. Так, чат способен выполнять большое количество автоматических действий: приглашение собеседника к диалогу, предложение отправки сообщения на электронную почту, отображение системного сообщения в случае отсутствия свободного оператора и другие. Возможность управления системами аналитики обеспечивает интеграция с Яндекс.Метрикой и Google Analytics, а также с популярными CRM-системами.

Venyoo.ru

Еще одним распространенным сервисом является Venyoo. Этот виджет также представляет собой онлайн-чат, имеющий функцию обратного звонка и автоматического ответа на сообщения. Главным отличием Venyoo является его самообучаемость на основе сканируемых сайтов. Боты определяют тематику запросов с точностью до 96 %, что делает виджет хорошим помощником на сайтах сферы услуг, так как он может сымитировать разговор от лица представителей многих специальностей. Основные преимущества программы:

  • повышение лояльности клиентов (около 10 % посетителей делают заказ после общения с чат-ботом);
  • сбор контактных данных пользователей и вопросов;
  • формирование детальной статистики на основе собранных данных;
  • решение текущих задач на сайте: проведение опросов, голосований и т. д.;
  • повышение эффективности работы сайта и, как следствие, продаж.

Установка виджета. В начале работы требуется пройти регистрацию. Она носит стандартный характер: ввод персональных данных, электронной почты и подбор пароля. Код виджета будет сгенерирован автоматически после регистрации и указания ресурса, на котором предполагается размещение чата. Для более удобного отображения и последующей работы приложения пользователю будет предложено пройти 7 этапов настройки.

Настройка виджета. Настраивается приложение вплоть до мелких особенностей дизайна. Это помогает максимально точно интегрировать его на личный сайт. Прежде всего необходимо настроить правила показа виджета. Его можно сделать уникальным для каждой страницы, однако это может занять большое количество времени, если сайт многостраничный. Важным моментом является настройка аналитических систем. Venyoo поддерживает интеграцию с Яндекс.Метрикой и Google Analytics. Кроме того, виджету доступна интеграция с некоторыми CRM (Битрикс24, AmoCRM и RoiStat). Наконец, полезные возможности виджета сделает доступными настройка сбора заявок, в том числе на основе профилей из соцсетей, обратного звонка с указанием удобного времени для связи, а также SMS-уведомлений о поступающих заявках для максимально быстрой реакции на них.

Venyoo удобен для мелкого и среднего бизнеса в сфере услуг за счет возможности собирать, анализировать данные и обучаться на основе собранной информации. Такой виджет может быть полезен в следующих сферах:

  • Строительство.
  • Торговля.
  • Грузоперевозки.
  • Недвижимость.
  • Юридические услуги.
  • Ремонтные работы и другие направления бизнеса.

Стоимость виджета определяется количеством заявок, которые будут сделаны на сайте. Стоимость каждой заявки от 25 до 2,5 рубля (чем больше заказов, тем меньше цена). В первые две недели программа будет работать бесплатно в тестовом режиме.

Moclients.com

Этот виджет способен облегчить работу с посетителями сайта, одновременно повышая его конверсию. Это происходит за счет возможностей приложения, позволяющих получить необходимую информацию о товарах или услугах за минимальное количество шагов. Виджет включает в себя 6 различных сервисов:

  • онлайн-калькулятор;
  • форму заказа;
  • ссылку на нужную страницу;
  • всплывающее окно акции;
  • фотографии продукции;
  • подписку на информационную рассылку.

Онлайн-калькулятор. Основной сервис, предоставляемый Moclients. Отличие от обычных программ для расчета, размещаемых на сайтах, состоит в возможности получения интересующей информации о стоимости услуги или предложения за небольшое количество последовательных шагов, избегая прямого расчета. Пользователь постепенно выбирает ту или иную категорию товара или услуги, сужая область поиска. Последним шагом является ввод электронной почты или номера телефона для обратной связи и объявления итоговой стоимости. Встроенный конструктор позволяет создавать большое количество новых категорий.

Форма заказа. Как правило, размещается в карточках товаров, позволяя, например, оформить заявку в один клик, указав контактные данные и оставив комментарий. После этого с клиентом связывается представитель компании и уточняет условия оформления заказа.

Ссылка на нужную страницу. Из названия виджета понятно, что он предназначен для быстрого перехода на важную страницу по прямой ссылке.

Всплывающее окно. Оно появляется при попытке ухода пользователя со страницы или сайта, а также может появляться через определенное время. Смысл этого виджета в предоставлении скидки путем ввода адреса электронной почты в появляющуюся форму.

Фотографии продукции. Представляет собой фотогалерею или портфолио с возможностью сделать заказ.

Подписка на рассылку. Служит для сбора данных пользователей в единую базу для последующих информационных рассылок.

Установка Moclients осуществляется путем ввода кода, появляющегося после регистрации, в HTML-код каждой страницы сайта. Стоимость виджета — 490 рублей в месяц для каждого сайта. Первые две недели работы предоставляются бесплатно в режиме теста. Бесплатная версия программы позволяет принимать 10 заявок в месяц.

Meedget.ru

Еще один инструмент для повышения конверсии на сайте. Одновременно этот виджет позволяет повысить доверие к сайту со стороны клиентов и увеличить продажи. Сервис дает возможность работы с различными интерактивными формами. В их число входят:

  • онлайн-калькулятор;
  • обратный звонок;
  • отзывы клиентов;
  • портфолио;
  • информация о скидках.

Онлайн-калькулятор. Работа этого виджета заключается в сборе информации от пользователя путем ввода определенных параметров. Например, это может быть расчет стоимости доставки товара. Посетитель сайта указывает количество того или иного товара (строительные и отделочные материалы, мебель и т. д.), адрес доставки, необходимость разгрузки и подъема, после чего вводит номер телефона или адрес электронной почты. Менеджер перезванивает клиенту и обсуждает с ним условия заказа.

Обратный звонок. Упрощенная процедура, позволяющая начать диалог с потенциальным покупателем.

Отзывы клиентов. Предоставляют возможность узнать больше информации о предлагаемом товаре или услуге.

Портфолио. Как правило, отображает выполненные проекты и предлагаемые товары в виде фотогалереи.

Информация о скидках. Специальный баннер, который также позволяет установить диалог с клиентом. Заказчику предлагаются специальные условия получения скидок. Для этого необходимо оставить номер телефона или электронную почту для обратной связи.

Настройка модулей происходит в личном кабинете на сайте сервиса. Для установки виджета на сайт необходимо получить код, который предоставляется пользователю после регистрации. Meedget предлагает обслуживание по двум тарифным планам.

  • Коммерсант. Стандартный пакет опций, предоставляемый бесплатно. Присутствует возможность настройки виджетов. Информация о заказе поступает через 4 часа после того, как заявка будет оставлена на сайте.
  • Профессионал. Стоимость этого тарифа — 790 рублей в месяц за один сайт. Дает возможность добавлять фотографии в портфолио и получать мгновенные уведомления о поступивших заказах.

Envybox.io

Сервис Envybox первоначально имел только функцию обратного звонка и назывался CallbackKiller. Этот виджет представлял собой небольшую кнопку с иконкой в виде телефонной трубки в углу страницы, нажав на которую можно было оставить свои контактные данные и довольно оперативно получить обратную связь от оператора. Виджет работал сразу на обе стороны. Оператору не нужно было постоянно отслеживать заявки на почте, так как сервис обеспечивал автоматическое соединение. Клиенту связь предлагалась как в постоянном режиме (в виде кнопки), так и в нужный момент, когда он собирался покинуть сайт или проводил на нем долгое время. В новой версии стали доступны еще 9 виджетов:

  • заказ звонка;
  • онлайн-чат;
  • захватчик внимания;
  • генератор клиентов;
  • покупка в кредит;
  • мультикнопка;
  • стадный инстинкт;
  • квизы;
  • коллтрекинг.

В разработке находятся еще два сервиса:

  • облачная АТС;
  • сквозная аналитика.

Обратный звонок. Сервис, с которого начинал свою жизнь Envybox. Принцип работы заключается в следующем: клиент заказывает обратную связь, виджет звонит оператору. Оператор снимает трубку, система одновременно совершает звонок клиенту. Envybox предлагает несколько тарифных планов с возможностями отправки записи разговора на электронную почту, звонка в удобное время, занесения номера в черный список и другими.

Онлайн-чат. Чат позволяет как прямое общение по инициативе клиента, так и приглашение посетителя к диалогу. Возможности виджета: отправка файлов, смайлики, сбор аналитических данных, поддержка мобильных устройств и другие.

Генератор клиентов. Под этим названием скрывается всплывающее окно, предлагающее скидку или акционное предложение.

Захватчик клиентов. Благодаря личным настройкам этот виджет может предложить клиенту сервис обратной связи, окно «Генератор клиентов» или переписку в чате. Это происходит автоматически при появлении посетителя на сайте.

Покупка в кредит. Один из новых виджетов, предлагаемых сервисом. Позволяет совершить покупку после ввода на сайте паспортных данных и прохождения процедуры идентификации. На счет клиента поступит сумма, необходимая для покупки.

Стадный инстинкт. Подталкивает посетителя к заказу появлением сообщения формата «только что купили». Всплывающее окно с подобной фразой может появляться с определенной частотой.

Мультикнопка. Позволяет собрать несколько виджетов в одном месте, облегчив навигацию на сайте.

Квизы. Посетителю сайта предлагается на выбор несколько вариантов ответа на вопрос или предложение. Это позволяет быстрее найти необходимый товар или получить информацию о потребностях клиента.

Коллтрекинг. Виджет позволяет определить, откуда клиент попал на сайт. Каждому источнику перехода присваивается собственный телефонный номер. При обратном звонке можно установить как рекламную кампанию, по которой посетитель попал на сайт, так и город его проживания, время нахождения на сайте и другую информацию.

Стоимость виджетов Envybox различается в зависимости от их типа. Настройка и установка приложений на сайт происходит в личном кабинете.

Выводы из статьи

Виджеты — один из эффективных инструментов повышения конверсии на сайте. Их грамотные настройка и использование помогут не только привлечь новых клиентов, но и повысить общее количество продаж и, как следствие, прибыль. Перед тем как выбрать наиболее удобный и подходящий по своим функциям виджет, можно протестировать его работу. Каждый сервис предоставляет одну или две недели бесплатного использования, за которые можно оценить все возможности инструментов и на практике понять, что такое виджеты.

Стоит ли размещать на сайте виджеты?

Рассматриваем онлайн-чаты, callback-виджеты и социальные кнопки.

Виджеты стали настолько популярны, что без них сложно представить современный сайт. К ним относятся:

  • чаты для связи с онлайн-консультантом;
  • сервисы обратного звонка;
  • всплывающие окна с акциями и для сбора контактов;
  • кнопки социальных сетей для расшаривания;
  • блоки с отсчетом времени до события, курсом валют и другие вспомогательные элементы.

Если когда-то подобные «фишки» приходилось делать самим разработчикам при создании сайта, то теперь есть масса готовых решений (конкретные упомяну ниже), которые можно внедрить на любой ресурс за несколько часов и при минимальных затратах.

По сути, размещение виджетов должно помочь владельцу сайта решить две задачи — улучшить юзабилити и повысить конверсию. Но, как показывает практика, некоторые из них способны как положительно сказаться на работе сайта, так и навредить.

Онлайн-консультант

Онлайн-консультант — это чат в режиме реального времени с гибкими настройками и аналитикой (например, Jivosite, Redhelper, Livetex и др.).

Он помогает установить контакт с пользователями, которые может и нуждаются в помощи консультанта, но не хотят звонить в компанию. Такие люди есть: одни опасаются давать телефон из-за возможного «спама» звонками, другим неудобно разговаривать в рабочее время, а третьим попросту лень оторваться от компьютера.

В этом смысле чат — комфортная для посетителя среда, где он может быстро проконсультироваться со специалистом. А для бизнеса — это возможность подтолкнуть пользователя к покупке и собрать базу контактов.

Разработчики подобных сервисов уверяют — конверсия в продажи при использовании онлайн-консультанта увеличится на 20-50%. Но на практике этого происходит далеко не всегда.

Во-первых, далеко не каждому сайту нужен онлайн-консультант

Ещё год назад клич «Я тут! Давайте помогу!» раздавался чуть ли не с каждого сайта, едва пользователь успел зайти на него.

Сегодня повальное увлечение онлайн-консультантами, которое началось с интернет-магазинов, не так бросается в глаза. Чтобы убедиться в этом, зайдите на Ozon.ru, «Ситилинк», Lamoda.ru или любой другой успешный интернет-магазин.

Эти ресурсы сделали ставку на улучшение юзабилити и наполнение сайта полезным контентом, чтобы каждый пользователь мог без труда найти необходимый товар и информацию о нем без дополнительной помощи. Конечно, некоторые из них используют онлайн-консультанты в формате службы поддержки. Но потребность в таком функционале на сайтах, где товары для покупателя просты и понятны, постепенно отпадает.

К примеру, «Юлмарт» использует неактивный онлайн-консультант, который только обозначает возможность задать вопрос, но не приглашает в чат

Другое дело — сайты со сложной спецификой товаров или услугами — медклиники, консалтинговые агентства, промышленное оборудование и другие сферы, в которых обычному пользователю сложно сориентироваться. В этих случаях наличие онлайн-консультанта полезно, и своевременно оказанная помощь способна повысить лояльность и подтолкнуть покупателя к сделке.

Во-вторых, важна реализация виджета на сайте

Установить виджет технически несложно. Куда сложнее встроить его таким образом, чтобы он помогал продавать, а не отпугивал пользователей. Вот несколько рекомендаций из практики.

  • Протестируйте размещение блока. Сплит-тестирования, которые мы проводили на сайтах клиентов в рамках оптимизации юзабилити, показали: наиболее удачное расположение виджета на сайте — скрываемый блок в нижнем правом углу — с ним пользователи взаимодействовали на 15% чаще, чем в случаях размещения в левом нижнем и по бокам. Но, разумеется, в каждом случае нужно тестировать и отталкиваться от верстки сайта. В открытом виде онлайн-консультант не должен загораживать другие функциональные элементы — навигационные кнопки, меню, номера телефонов и т. п.
  • Настройте показы. Чтобы сделать всплывающее окно менее раздражающим, задайте сценарии показа онлайн-консультанта. Настройки сценариев напрямую влияют на конверсию виджета, и тут без тестирований и корректировок никуда. Чтобы избежать навязчивости, первый показ рекомендую делать не ранее, чем через 20 секунд после захода пользователя, и отключить повторные появления при переходе на другие страницы.
  • Не забывайте про мобильный трафик. Онлайн-консультант должен корректно отображаться и функционировать в адаптивной версии сайта. Для мобильной версии можно и вовсе отказаться от чата, предусмотрев прямой набор номера из футера и раздела контактов.

В-третьих, даже идеально встроенный и настроенный онлайн-консультант не будет приносить пользы, если оператор некомпетентен или отсутствует на рабочем месте

При использовании таких виджетов решающий фактор — это работа оператора. Вот, с какими проблемами приходится сталкиваться чаще всего.

  • Оператор «спит». Нередки случаи, когда клиент, получив автоприветствие, вступает в диалог и не получает ответа, или получает, но спустя несколько минут. Такие чаты — настоящие убийцы конверсии, с ними вы не только теряете клиентов, но и портите репутацию. Если по какой-то причине оператор отсутствует или не может быстро ответить на вопрос, онлайн-консультант должен быть переведен в режим офлайн. Предложите пользователю оставить свой вопрос, почтовый адрес или телефон для обратной связи. Обращений будет меньше, зато и негатива не последует.
  • Оператор не продает. Цель онлайн-консультанта — не только быстро ответить на вопросы пользователей, но также продать товар или собрать контакты. Для этого нужно, как минимум, разработать инструкцию (скрипт), по которой оператор будет общаться с потенциальными покупателями.
  • График оператора не совпадает с пиками активности пользователей. Случается, что оператор на связи с 9 утра до 6 вечера, а основная часть трафика на сайт приходит в период с 5 до 10 вечера. В этом случае нужно подстроить график консультанта под особенности поведения целевой аудитории.
Топ-пост этого месяца:  API Google-диаграмм (Google Charts). Получение данных (урок 2)

Callback-виджеты

Реализация виджета обратного звонка (callback-виджета) может быть различной:

    простые кнопки, открывающие блок для введения контактов;

интеллектуальные сервисы, которые отслеживают поведение пользователей на сайте и в нужное время выдают диалоговое окно (к примеру, Rocketcallback и Callbackhunter).

Такой функционал помогает обратиться к потенциальному покупателю практически моментально. Пользователю всего лишь нужно ввести номер телефона в предложенную системой форму, и через 25-50 секунд оператор перезвонит.

Для владельца сайта конверсия в звонок имеет большую ценность, чем обращение в чате, хотя бы потому, что позволяет сразу получить контакты пользователя. А дальше уже дело за оператором и его навыками продаж.

«Умные» сервисы можно использовать как инструмент удержания посетителей на сайте. В момент, когда человек хочет закрыть вкладку, система выдаст вплывающее окно и попытается выпросить номер телефона.

Что касается конверсии, то она, в зависимости от тематики бизнеса, типа виджета и его настроек, будет сильно отличаться. Разработчики популярного в России сервиса обратного звонка CallBackHunter обещают до 125% увеличения звонков с сайта.

Из нашей практики, владельцы сайтов отмечают — заявок на звонки не так много; они есть, однако поведенческие показатели (ПФ) на сайте начинают проседать. Причина чаще всего кроется в неумелой реализации виджета на ресурсе.

Основная ошибки при использовании сервисов обратного звонка — агрессивные настройки показа всплывающего окна, которые мешают пользователю самостоятельно изучить предложение и нередко становится причиной ухода с сайта.

Несколько рекомендаций, как уменьшить раздражающий эффект callback-виджетов

  • Устанавливайте время показа, ориентируясь на данные статистики. Прежде чем предложить связаться с консультантом, дайте пользователю время самостоятельно изучить сайт. Ориентируйтесь на среднее время пребывания на ресурсе и устанавливаете показ на 10-20 секунд раньше момента ухода.
  • Используйте показ не более 2-х раз за сессию. К примеру, первый показ обозначит возможность заказать звонок, а второй сможет удержать пользователя при попытке закрыть вкладку с сайтом.
  • Откажитесь от нецелевых диалогов. Опросы типа «Вы впервые у нас на сайте? Вы нашли, что искали? Хотите обсудить персональное предложение?» хоть и помогают собирать статистику, но отвлекают посетителей от изучения контента сайта, а, возможно, и от покупки.
  • Исключайте повторный показ, если пользователь заполнил форму заявки. Одного звонка клиенту вполне достаточно, чтобы удовлетворить свои потребности.
  • Протестируйте неактивный виджет. Если пользователи не оставляют контакты в нерабочие для операторов часы, лучше в это время вовсе не показывать вплывающее окно.

Социальные кнопки

Такой виджет представляет собой блок с кнопками различных социальных сетей (код для вставки можно сгенерировать с помощью AddThis, Share42, конструктора блока «Поделиться» от «Яндекса» и др.). С его помощью пользователи могут расшаривать информацию о товарах или услугах в «ВКонтакте», Facebook, Twitter, Google+ и других сервисах.

59 репостов на этой карточке товара как бы говорят пользователю, что такой диван пользуется популярностью

Из плюсов такого функционала — возможность без дополнительных вложений рекламировать свои товары/услуги в социальных сетях и привлекать дополнительную аудиторию. Но и здесь есть свои тонкости.

Исследование, проведенное Visual Website Optimizer, показало, что пестрые кнопки для расшаривания на продуктовых страницах способны отвлечь пользователя от основной цели — выбрать товар и положить его в корзину.

Эксперимент на сайте Taloon.com показал, что отказ от кнопок со счетчиком расшаривания увеличил конверсию кнопки «Купить» на 11,9%

Если высокие показатели лайков и репостов могут позитивно сказаться на конверсии и показывают, что на вашем сайте есть жизнь, то низкие заставляют пользователей сомневаться в качестве товаров и авторитетности магазина. В последнем случае можно оставить только функционал расшаривания, а счетчики скрыть.

Когда социальные кнопки нужны?

Такие виджеты иногда размещают, чтобы приобрести социальные ссылки, которые в некоторых тематиках могут влиять на результаты ранжирования. Но разумеется, если пользователи не будут расшаривать страницы вашего сайта, то и никаких социальных сигналов добыть не получится.

Решая, устанавливать социальные виджеты или нет, учитывайте особенности своей целевой аудитории. Например, ювелирные украшения, брендовую одежду, гаджеты и другие статусные товары пользователи с удовольствием лайкают, репостят и комментируют, чего не скажешь про стройматериалы, промышленное оборудование т. п. Если вирусный маркетинг для продвижения продукции не применим, мы рекомендуем не использовать на товарных карточках социальные кнопки.

Вывод

Если вы хотите действительно улучшить свой сайт, к подбору виджетов и их реализации на сайте нужно подходить с умом, а не слепо следовать моде и примерам конкурентов. Для начала подумайте, а нужен ли функционал вашей целевой аудитории? Если да — тестируйте, оптимизируйте и снова тестируйте, ищите новые форматы общения с пользователями, не ограничиваясь базовыми настройками.

Только так можно выжать из виджетов максимум пользы.

Мнение редакции может не совпадать с мнением автора. Если у вас есть, что дополнить — будем рады вашим комментариям. Если вы хотите написать статью с вашей точкой зрения — прочитайте правила публикации на Cossa.

ТОП-8 Онлайн-чатов для сайта

Мы подготовили список онлайн-чатов для сайта. Выбрав один из них, вы повысите отдачу от своего проекта в виде дополнительных заявок от клиентов.

Содержание

  1. Яндекс-чат с компаниями
  2. JivoSite
  3. LiveTex
  4. CleverSite
  5. Venyoo
  6. Chatra
  7. Carrot Quest
  8. RedHelper
  9. VerBox
  10. Наш рейтинг

Яндекс-чат с компаниями

Поисковая система добавила на свою выдачу функционал чат с компаниями, таким образом потенциальный клиент может получить ответ на интересующий вопрос, даже не заходя на сайт. С одной стороны это повлияет на снижение трафика на продвигаемых сайтах, с другой стороны компания получит возможность быстрее общаться с клиентами.

Кнопка «Чат с компанией»

Виджет «Яндекс Чаты»

Подробная инструкция о подключении чата в разделе Яндекса “Чаты для Бизнеса”

На данный момент информацию по интеграции подготовили 3 чата:

Функционал Яндекс-чатов реализован совсем недавно, поэтому в ближайшее время все представленные сервисы разместят подробное описание по интеграции на своих сайтах. Выбирайте один из них, чтобы повысить отдачу от своего проекта в виде дополнительных заявок от клиентов.

Список онлайн-чатов, консультантов.

JivoSite – самый популярный чат, который имеет простую функциональность и понятный интерфейс.

  • Бесплатная версия: Есть
  • Платная версия: 592 руб. в месяц за оператора

Функционал:

  • Онлайн-чат
  • Интеграция с Яндекс Диалогами
  • Обратный звонок
  • Виртуальная АТС
  • Прием писем из почты
  • Сообщения FaceBook
  • Сообщения Вконтакте
  • Прием платежей
  • Интеграция с CRM-системами
  • Интеграция с Аналитикой

LiveTex – онлайн-консультант с максимальным числом каналов коммуникаций. Клиент может связаться с помощью виджетов, социальных сетей и месседжеров.

  • Бесплатная версия: Нет
  • Платная версия: от 1 870 руб. в месяц за оператора

Функционал:

  • Онлайн-чат
  • Форма обратной связи
  • Обратный звонок
  • Чат в приложении
  • Сообщения FaceBook
  • Сообщения Вконтакте
  • Сообщения Одноклассники
  • Месседжер Telegram
  • Месседжер Viber
  • FaceBook Massenger
  • Модуль для лидогенерации
  • Модуль с Базой знаний
  • Интеграция с CRM-системами
  • Отраслевые решения

CleverSite – Простой и красивый онлайн-консультант с самыми нужными функциями.

  • Бесплатная версия: Есть
  • Платная версия: 456 руб. в месяц за оператора

Функционал:

  • Онлайн-чат
  • Обратный звонок
  • Сообщения Facebook
  • Сообщения Вконтакте
  • Месседжер Telegram
  • Месседжер Viber
  • Интеграция с Аналитикой
  • Интеграция с CRM-системами
  • Наблюдения за печатью
  • Автоприглашения в чат
  • Оценка оператора клиентом

Venyoo – онлайн-чат для которого не нужен оператор.

Он работает автоматически, высылая клиенту подготовленный список вопросов. Оплата за полученные заявки. Этот чат хорош для тех, кто не хочет тратить время менеджеров на общение. Мы использовали этот чат для улучшения поведенческих метрик сайтов.

  • Бесплатная версия: Нет
  • Платная версия: 2,5-25 рублей за заявку

Функционал:

  • Онлайн-чат
  • CRM-система
  • Звонки от клиентов
  • Захват холодных клиентов
  • Активные приглашения
  • Интеграция с CRM-системами

Chatra.io – онлайн-чат с красивым оформлением диалогового окна.

  • Бесплатная версия: Есть
  • Платная версия: 700 руб. в месяц за оператора

Функционал:

  • Онлайн-чат
  • Браузерное приложение
  • Приложения для Windows и MAC OS
  • Мобильные приложения iOS и Android
  • Наблюдение за печатью
  • Передача файлов
  • Быстрые ответы
  • Оценка оператора клиентом
  • Интеграции с Аналитикой
  • Интеграция с CRM-системами

Carrot Quest – платформа для коммуникации с пользоватем на основе его данных и предпочтений.

Ориентирована на онлайн-сервисы и крупные интернет-магазины с большим количеством трафика.

  • Бесплатная версия: Нет
  • Платная версия: от 1 000 рублей в месяц

Функционал:

  • Онлайн-чат
  • Всплывающие окна
  • eCRM-система
  • Автоматизация маркетинга
  • WebPush-уведомления
  • Email-рассылки
  • Веб-аналитика с AB-тестами
  • Интеграция с CRM-системами

RedHelper – онлайн-консультант с функцией обратного звонка. Простой и понятный сервис.

  • Бесплатная версия: Нет (Бесплатно для некоммерческих организаций)
  • Платная версия: 1 600 рублей в месяц

Функционал:

  • Онлайн-чат
  • Обратный звонок
  • Совместный браузер
  • Активное приглашение
  • Быстрые ответы
  • Расширенная статистика
  • Детализированные отчеты
  • Наблюдение за посетителем
  • Передача файлов
  • Интеграция с Аналитикой

VerBox – простой онлайн-чат с интеграцией в Яндекс Диалоги.

  • Бесплатная версия: Есть
  • Платная версия: 500 руб. в месяц за оператора

Функционал:

  • Онлайн-чат
  • Яндекс Диалоги
  • Вкладки с акциями
  • Вкладки с отзывами
  • Интеграция с Email-письмами
  • Уведомления по СМС
  • Интеграция с CRM-системами
  • Интеграция с Аналитикой
  • Целевой посетитель
  • Детализированные отчеты
  • Прием платежей
  • Наблюдение за посетителем
  • Наблюдения за печатью
  • Сообщения Вконтакте
  • Сообщения FaceBook
  • Месседжер Telegram
  • Месседжер Facebook
  • Месседжер Viber
  • Мобильные приложения

Наш рейтинг онлайн-консультантов:

Проанализировав все сайты по дизайну, функциональности, интерфейсу, тарифами, возможностям и личным предпочтениям, мы составили свой рейтинг онлайн-чатов.

Золото – JivoSite

Базовая функциональность с интеграцией в Яндекс Диалогах.

Серебро– CleverSite

Простой интерфейс кабинета и низкая цена за сервис

Как подключить скрипт на сторонний сайт

Привет, Хабр! Это первый пост в нашем блоге. Многие знают нас как чат для сайта, именно с него мы начинали, а сейчас занимаем лидирующие позиции в сфере бизнес-мессенджеров. Мы постепенно эволюционировали в комплексное бизнес-решение, которое предоставляет множество возможностей для клиентов: callback, общение с клиентами через мессенджеры, соцсети, мобильные приложения, виртуальная АТС, CRM-функции и многое другое.

За несколько лет мы успешно решили множество технических проблем, накопили много интересного, а местами и уникального опыта, конечно же, писали свои костыли и велосипеды. Этим постом мы начинаем серию статей, в которых будем делиться своим опытом разработки, выстраивания процессов в полностью удаленной команде, расскажем про нашу архитектуру, технические решения, которые позволяют нам эффективно обслуживать сотни тысяч клиентов по всему миру.

Jivosite сегодня это:

  • 250К клиентов по всему миру;
  • 150М показов виджета в сутки;
  • 3.5М сообщений в сутки;
  • 10М чатов в месяц;
  • 1М одновременных коннектов;
  • 250+ серверов в production.

Поскольку большинство знают нас как чат для сайта, пожалуй, с него и начнем. В этой статье мы на примере нашего многолетнего опыта работы чата расскажем, как лучше подключать свой код на сторонний сайт и на что следует обратить внимание. Эта статья будет полезна тем, кто планирует или уже разрабатывает подключаемый сервис, и просто всем, кому интересна эта тема.

Входная точка

Театр начинается с вешалки, а подключаемый сервис с кода-вставки. Он является входной точкой для любого сервиса или модуля на сайт. Как правило, его можно найти в инструкции установки, после чего необходимо добавить его в HTML-код сайта, а дальше происходит «магия», которая определенным образом загружает и инициализирует скрипт.

Казалось бы, что может быть проще подключения скрипта на сайт? По стандарту, необходимо просто добавить тег script в HTML-код страницы. Но на самом деле это важный этап, скрывающий много подводных камней. Например, идентификация пользователя, реализация резервного канала загрузки скрипта, настройка внешнего вида или логики, скорость загрузки страницы и так далее. Но давайте обо всем по порядку.

Идентификация

Просто так подключать скрипт мало кому интересно, наверняка скрипт выполняет какую-либо логику, а эта логика привязана к пользователю. Например, ID счетчика, APP_ID от соцсети, в нашем случае это ID созданного канала связи. То есть скрипт должен идентифицировать пользователя в запросах на сервер. Для идентификации клиента через код-вставки есть три варианта реализации.

Передавать ID прямо в ссылке на файл и на стороне сервера каким-либо способом прокидывать его в скрипт. В этом случае серверу на лету придется прописывать ID в файл или формировать JS-строку c ID, которая будет загружать file.js. Эта логика похожа на реализацию JSONP-запросов.

Долгое время мы работали по такому принципу, но минусы этого подхода в том, что добавляется «холостая» нагрузка на сервер и необходимость реализации серверного кэширования.

Атрибут async — говорит браузеру о том, что не нужно дожидаться загрузки скрипта для построения DOM, скрипт надо выполнить сразу после загрузки. Это уменьшает время загрузки страницы, но есть и обратная сторона медали: скрипт может выполняться до того, как DOM будет готов к работе.

Одна из самых популярных реализаций, так делают в том числе и крупные сервисы, отличается только синтаксис, но суть у всех одна.

У такого подхода есть два основных минуса, первый — усложняется код-вставки, а второй — очень важен порядок выполнения данного кода, в противном случае ничего работать не будет. К тому же необходимо делать выбор между скоростью (async) и стабильностью (без async), большинство выбирают 2-й вариант.

Аналогично первому варианту передавать ID в ссылке на файл, но извлекать его в браузере, а не на сервере. Это не так просто, как кажется, но возможно. В API браузера есть свойство document.currentScript, оно возвращает ссылку на скрипт, который загружен и в данный момент выполняется в браузере. Зная это, можно вычислить ID, для этого надо получить свойство document.currentScript.src и регуляркой вытащить из него ID.

Есть одно но: document.currentScript поддерживается не всеми браузерами. Для браузеров, не поддерживающих это свойство, мы придумали интересный хак. В коде file.js можно выбросить специальное «фейковое» исключение, обернутое в try/catch, после чего в стеке ошибки будет URL скрипта, в котором произошла ошибка. URL будет содержать ID, который мы получаем той же регуляркой.

Вот такая магия получается, но это работает. Нет заморочек с порядком выполнения, код-вставки выглядит просто и нет оверхеда на сервере. Последние два года мы используем именно такой подход, хотя сам код-вставки у нас отличается, но принцип тот же.

Настройки

В большинстве случаев у подключаемых скриптов есть какие-либо настройки, отвечающие за внешний вид или логику работы. Эти настройки необходимо «прокидывать» в подключаемый скрипт, для этого существуют два принципиально разных подхода.

К этому подходу также относится передача настроек в GET параметрах url скрипта, аналогично варианту #1 из раздела «Идентификация». Подход заключается в том, что если клиент хочет поменять настройки, то ему необходимо отредактировать код-вставки и обновить его на сайте.

Это хорошо тем, что все настройки хранятся на клиенте и их не надо хранить на сервере, разрабатывать и обслуживать всю связанную с этим бизнес-логику. Главным минусом такого подхода является неудобство для клиента, ему приходится все делать вручную, а если настроек много, то код-вставки превращается в сложно поддерживаемую простыню, в которой легко допустить ошибку. А чтобы обновления вступили в силу, надо обновлять сайт, это лишние телодвижения разработчиков и админов.

Второй подход заключается в том, что в случае необходимости изменения настроек клиенту не надо модифицировать код-вставки, все настройки хранятся на сервере. Для того чтобы поменять настройки, надо зайти в графическую панель, изменить нужные параметры и нажать кнопку «Сохранить». После этого настройки автоматически применятся для его сайта!

Не надо разбираться в коде и делать ради этого деплой, этим может заниматься человек, далекий от JavaScript, например менеджер. Конечно для пользователей такой вариант гораздо удобнее и проще, поэтому именно его мы используем. Но за удобство надо платить, такой подход требует разработки и поддержки логики на сервере и подразумевает дополнительную нагрузку на него. В следующих статьях мы обязательно расскажем, как мы ежедневно обрабатываем 150М таких запросов.

Обратная совместимость

Очень важно максимально быстро прийти к зрелой версии кода-вставки. Потому что обновлять уже установленные коды-вставки будет крайне сложно. Пример из нашей практики: в первых версиях мы использовали числовые ID, но по соображениям безопасности заменили их на число-буквенные. Оказалось, что очень сложно добиться изменения уже установленного кода-вставки. Многие даже не знают, что такое HTML и как устроены сайты. Например, сайт делали фрилансеры, студия или сайт создавался через CMS/конструктор и т. д. В большинстве случаев наши клиенты работают только с панелью настроек виджета. С тех времен у нас до сих пор в nginx работает мапа реврайта старых ID на новые, в которой около 40К записей.

Из-за этой особенности мы вынуждены сохранять обратную совместимость кода-вставки при всех рефакторингах, которых на нашей памяти было около 5.

Изоляция кода

Так как скрипт подключается на сторонний сайт, на котором уже есть JavaScript и CSS код сайта и других сервисов, первостепенной целью является не навредить сайту, чтобы наш код не изменил логику, а тем более не сломал ее. Это может быть JavaScript-ошибка, которая останавливает поток выполнения, или стили, которые переопределяют стили сайта. Но и код сайта может саффектить подключаемый скрипт, например используется библиотека которая модифицирует браузерное API, после чего код перестает работать или работает не так, как мы ожидаем.

Есть разные варианты изоляции кода. Например можно использовать префиксы в JS переменных, замыкания, чтобы не засорять глобальный контекст, использовать что-то наподобие БЭМ для стилей. Но самый простой способ — это выполнения кода в iframe, он решает большинство проблем изоляции, но накладывает определенные ограничения. Мы используем гибридный вариант, про изоляцию кода расскажем подробнее в следующих статьях.

Блокировка загрузки сайта

Событие onload — наступает после того, как веб-страница полностью загружена, включая изображения, стили и внешние скрипты. Важная особенность в том, что на большинстве сайтов JS-логика, сторонние скрипты и реклама начинают работать по наступлению этого события. Очень важным пунктом для всех подключаемых скриптов является не допустить негативного влияния на это событие.

Это происходит в тех случаях, когда сервер, с которого грузится скрипт, отвечает долго или вовсе не отвечает: тогда событие onload откладывается и дальнейшая загрузка страницы по сути блокируется. В случае, когда сервер недоступен, событие onload наступит только по истечении таймаута запроса, который больше 60 с. Таким образом, проблемы на сервере отдачи скрипта по сути «ломают» сайты, что является недопустимым.

Личный опыт
В прошлом я работал в компании, у которой был сайт с одновременным онлайном 100К, онлайн-знакомства. В те времена были попопулярны кнопки «Поделится в соцсетях». Чтобы они появились на сайте, надо было подключить скрипт (sdk) от нужных соцсетей. В один прекрасный день к нам прибежали коллеги и сказали, что наш сайт не работает! Мы посмотрели в мониторинги, в которых все было нормально, и сначала не поняли, в чем проблема. Когда начали разбираться глубже, поняли, что cdn-сервера Twitter прилегли, и их SDK не мог загрузиться, это блокировало нам загрузку сайта на

1.5 минуты. То есть после открытия сайта загружался небольшой HTML(остальное SPA) и только через 1.5 минуты все прогружалось, срабатывал тот самый таймаут запроса. Нам пришлось экстренно организовывать хотфикс и убирать их скрипт с сайта. После повтора этой ситуации мы решили убрать блок «Поделиться» совсем.

В первых версиях кода-вставки у нас не было это учтено, и в случае технических проблем на нашей стороне мы, мягко говоря, доставляли неудобства нашим клиентам, но со временем мы это исправили.

Решение простое, надо подписаться на событие полной загрузки сайта и только потом загружать скрипт, для этого надо использовать код-вставки, а не тег script.

Google Pagespeed

Результаты анализа мобильной версии habr.com

Большинство уделяют внимание скорости загрузки сайта, по многим исследованиям это напрямую влияет на прибыль, к тому же поисковые алгоритмы при ранжирование стали учитывать время загрузки страницы. В связи с этим владельцы сайтов часто используют подобные инструменты для оценки производительности сайта. Поэтому очень важно оптимально подключать код на сайт, так он напрямую влияет на его время загрузки.

Это означает, что надо использовать современные техники оптимизации загрузки страниц. Например использовать Gzip, кешировать статические файлы и запросы, использовать асинхронную загрузки скриптов, сжатие статики современными алгоритмами такими как WebP/Brotli/etc и использовать другие оптимизации. Мы регулярно проводим аудит и реагируем на предупреждения и рекомендации, чтобы соответствовать современным требованиям.

В первых версиях мы загружали статику с серверов приложения. Но у такого подхода есть минусы: дорогой трафик, удаленность от посетителей сайтов и излишняя нагрузка на канал серверов. Можно легко забить канал серверов приложения при хабр-эффекте сайтов, так как трафик статики очень «тяжелый».

С целью экономии бюджета, стабильности и уменьшения сетевой задержки оптимально загружать статику со специально предназначенных для этого серверов. Можно использовать готовые CDN-провайдеры, но на больших масштабах это недешево и приходится ограничиваться возможностями, которое предоставляет тот или иной провайдер.

Мы реализовали это просто, заказали недорогие сервера в России, Европе и Америке с безлимитным трафиком и широким каналом. Это дешево, не накладывает на нас никаких ограничений, мы можем настроить все под себя, а отказоустойчивость обеспечивается за счет механизма, работающего в браузере. В данный момент с наших CDN-серверов загружается 1ТБ статики ежедневно.

Отказоустойчивость

К сожалению, мир не идеален, случаются пожары, аплинки падают, ДЦ целиком уходят под воду, РКН блочит подсети, а люди совершают ошибки. Тем не менее, необходимо уметь обрабатывать такие ситуации и продолжать работать.

Мониторинг
Сначала надо понять, что что-то пошло не так. Можно, конечно, подождать, пока пользователи придут и пожалуются, но лучше настроить мониторинг и алерты, а после релизов, проверять все ли в порядке. Мы мониторим много различных параметров, как серверных, так и клиентских, и если что-то пошло не так, мы сразу это видим. Например, уменьшилось количество загрузок виджета или аномальный всплеск трафика на CDN-серверах.

Суммарное кол-во загрузок виджета по каждой версии

Сбор ошибок
JavaScript очень специфичный язык, и допустить в нем ошибку несложно. К тому же зоопарк браузеров в современном вебе очень большой; то, что работает в последнем Chrome, не факт, что будет работать в Safari или Firefox. Поэтому очень важно настроить сбор ошибок из браузера и вовремя реагировать на всплески. Если ваш код работает в iframe, то сделать это можно отслеживая глобальный обработчик window.onerror и в случае ошибки отправлять данные на сервер. Если код работает вне iframe, то реализовать сбор ошибок очень сложно.

Суммарное кол-ва ошибок со всех сайтов и браузеров

Информация по конкретной ошибке

CDN Failover
Выше я уже писал, что все имеет свойство падать, поэтому важно обрабатывать эти ситуации и лучше — автоматически. Мы прошли несколько этапов фаллбека CDN-серверов, начинали с ручного, а в итоге нашли способ делать это автоматически и оптимально для браузера.

В ручном режиме это работало просто: админам приходило СМС о том что CDN прилег, они совершали определенные манипуляции, после чего виджет начинал загружаться с серверов приложения. Это могло занять от 5 минут до 2 часов времени.

Для реализации автоматического фаллбека необходимо как-то детектить, что загрузка скрипта началась, но сделать это не так просто, как кажется. Браузер не дает возможности отслеживать промежуточные состояния загрузки тега script, как например событие onprogress в XMLHttpRequest, а сообщает только событие по окончанию загрузки и выполнения скрипта. Также нельзя за приемлемое время узнать, что сервер в данный момент недоступен, единственное событие onerror срабатывает по истечении таймаута запроса, больше 1 минуты. За минуту посетитель может уже покинуть страницу, а скрипт так и не загрузится.

Мы пробовали разные варианты, простые и сложные, но в итоге пришли к решению с ping-запросом CDN-сервера. Работает это так: мы сначала пингуем CDN-сервер, если ответил, то тогда мы загружаем виджет с него. Чтобы реализовать эту схему оптимально для браузера и наших серверов, мы используем легкий HEAD-запрос (без тела), а при последующих загрузках мы его не делаем, пока не обновится версия виджета, т. к. виджет уже в кеше браузера.

Таким образом мы получили очень быстрый и автоматически детект доступности сервера статики и в случае падения практически без задержек переходим на резервный сервер.

Loader

Чтобы загрузить свой скрипт на сторонний сайт, надо учесть множество моментов, но реализовать эту логику в коде-вставки сложно, так как он просто превратится в «мясо». Но делать это все равно надо, для этого мы создали небольшой модуль, который управляет всей этой логикой «под капотом» и загружает основной код виджета. Он загружается в первую очередь и реализует CDN Failover, кеширование, обратную совместимость со старыми кодами-вставки, А/Б тестирование, постепенную выкладку новой версии виджета и множество других функций.

Таким образом поэтапно мы пришли к схеме, которая покрывает основные кейсы загрузки и инициализации виджета. Она доказала свою эффективность за годы использования на большом количестве различных сайтов. При этом код-вставки остается простым и универсальным, так как в нем нет никакой логики и мы в любой момент можем ее поменять, при этом не заставляя пользователей менять код-вставки.

Сторонние сервисы

Ну и напоследок стоит упомянуть про сторонние сервисы, которые подключаются на сайт или каким-либо образом взаимодействуют с сайтами: поисковые боты, аналитика, различные парсеры и так далее. Эти сервисы оставляют отпечаток на работе, про это тоже не стоить забывать. Расскажу несколько случаев из нашей практики.

GoogleBot
В нашем приложении оператора есть функция «Посетители», в которой можно посмотреть посетителей, в данный момент просматривающих сайт, и различную информацию по ним: время на сайте, страницу, число просмотренных страниц и так далее. В определенный момент клиенты начали жаловаться, что у них «висят» посетители с других сайтов, то есть на сайте по продаже айфонов, клиент, у которого якобы открыта страница «Купить крем для лица». Когда начали разбираться, выяснили, что это GoogleBot, который при переходе от сайта к сайту кешировал LocalStorage первого и впоследствии передавал неправильные данные на сервер.

Решение простое, на сервере начали игнорировать данные от GoogleBot.

Яндекс.Метрика
В метрике есть замечательная функция — вебвизор, которая позволяет посмотреть, что видел и делал пользователь, в виде скринкаста. Для этого метрика записывает все действия пользователя, а после специальный бот метрики ходит по сайтам, совершает те же действия и записывает это. Проблема была в том, что для эмуляции мобильного браузера пользователя, по нашим данным, включался Firefox в режиме мобильной эмуляции, но при этом userAgent у бота был десктопный.

Это приводило к тому, что при просмотре мобильных пользовательских сессий в вебвизоре на записи открывалась десктопная версия виджета, хотя на самом деле у пользователей открывалась мобильная. Наши клиенты думали, что так и есть, и заваливали нас жалобами. В итоге нам пришлось детектить, что виджет загружен в вебвизоре, понимать, что в нем открыта мобильная версия, и в этом случае подсовывать туда мобильный виджет.

Примеров намного больше, но, думаю, этого будет достаточно для понимания сути.

Заключение

Надо очень внимательно относиться к коду, который вы отдаете клиентам для вставки на сайт. Мы кратко рассказали, с какими проблемами мы столкнулись и как их решали. В следующих статьях мы более подробно расскажем про некоторые упомянутые темы и другие участки нашей системы, например, как мы используем NodeJS в качестве бэкенда, как держим нагрузку всех 270К сайтов за счет продуманного кеширования и не боимся хабра-эффекта подключенных к нам сайтов, как работаем в полностью распределенной команде и многое другое.

Спасибо за внимание, будем рады ответить на ваши вопросы и комментарии!

Чат для сайта JivoSite

Чат – привычный способ общения в интернете, с мгновенным откликом и неформальный. Живое общение с посетителем сайта поможет ему сделать выбор, а вашему бизнесу увеличить продажи

Легкий дизайн виджета

подходит для любого сайта

Работает на всех устройствах

Чат для сайта прекрасно работает на iPhone и Andro >

Приложение локализовано более чем на 20 языков

JivoSite готов к работе в любой стране

Посетители не задают вопросов и уходят с сайта? Начните разговор первыми!

Примерно 70% всех чатов на сайтах начинаются с активных приглашений. Настройте активные приглашения для важных страниц и предлагайте помощь посетителям в нужном месте и в нужное время

Если клиент посетил 3 страницы сайта про зонты и сейчас находится на странице «Лучшие зонты», то самое время оставить ему сообщение:

Топ-пост этого месяца:  Урок 4. Git и Github. Добавление файлов

Мощное и эффективное приложение JivoSite сделает из оператора самурая продаж

JivoSite исправляет ошибки в сообщениях, знает, откуда посетители пришли на ваш сайт, кто они и что ищут. Приложение удобно использовать в фоновом режиме, а когда начинается диалог – появляется уведомление, которое невозможно пропустить

В приложении есть всё необходимое для общения с клиентами

Наблюдение за печатью

JivoSite покажет, кто по ту сторону экрана

Информация из вашей CRM

Местоположение посетителей и источник перехода

Переводчик на 90 языков

Приложение оператора работает на всех современных устройствах

Трафик с мобильных растет с каждым днем

Это значит, что сайт нужно адаптировать под мобильные устройства и чат на сайте в том числе

мобильных интернет-покупателей делают покупки каждый день

онлайн-покупок в выходные дни делается с мобильного

С Jivo покупок c мобильного будет больше!

Благодаря мобильному виджету Jivo, конверсия в обращения увеличится. В нем собраны все способы связаться с вами – номер телефона, соцсети и мессенджеры.

Теперь клиент может написать или позвонить вам в пару касаний, а значит покупок с мобильного на вашем сайте будет больше.

Мы сделали самый лучший мобильный чат

Мы серьёзно. Не моргает, не исчезает, не уезжает

Быстро открывается

Чат открывается в том же окне без перезагрузки

Работает на всех мобильных браузерах

Протестировано на всех мобильных браузерах (ни один браузер не пострадал)

Нативное мобильное меню

Создано с учетом особенностей iOS и Android-устройств

Попробуйте все возможности Jivo бесплатно!

Введите адрес и получите две недели профессиональной версии

Добро пожаловать в JivoSite!
Проверьте почту, мы отправили вам ссылку на регистрацию. Для установки Jivo вам понадобится компьютер.

Хотите знать, насколько хорошо ваши операторы общаются с посетителями?

С отчетами JivoSite вы можете следить за качеством и количеством чатов на сайте. Те, кто любит вникать в детали, останутся довольны: в отличие от телефонных разговоров, в JivoSite легко читать все диалоги между операторами и клиентами

Интересно, что происходит на вашем сайте прямо сейчас?

Наблюдайте за посетителями в реальном времени: кто они, откуда пришли и что ищут

Самые важные данные о качестве сервиса в удобном виде

Среднее время ответа, рейтинг операторов, количество успешных обратных и входящих звонков, активные приглашения и многое другое — каждый день мы обращаем ваше внимание на те факторы, которые необходимо улучшать.

Нет предела
совершенству

У всех факторов должна
быть зеленая иконка,
в противном случае вам
есть над чем работать.

Контроль качества общения

Не забывайте просматривать негативные отзывы. Клиенты могут уйти, если вы не обратите внимание на их просьбы.


Оценивайте работу
каждого оператора!

Хвалите лучших
и увольняйте лентяев.

Ставьте напоминания
для повторных продаж

В нужный момент приложение напомнит
вам написать или перезвонить клиенту.

Расширенное API

Принимайте обращения клиентов через любые собственные мобильные приложения или сервисы с помощью механизма webhook. Приложение JivoSite будет работать с вашими собственными сервисами точно так же, как с другими каналами связи.

JavaScript API & Webhooks

Выбирайте сами, какую информацию о пользователях и о работе чата вы хотели бы получать. Интегрируйте JivoSite с любой CRM-системой, даже с той, которую написали вы сами. Перейдите на страницу с API, чтобы получить больше информации

Попробуйте все возможности Jivo бесплатно!

Введите адрес и получите две недели профессиональной версии

Добро пожаловать в JivoSite!
Проверьте почту, мы отправили вам ссылку на регистрацию. Для установки Jivo вам понадобится компьютер.

Сервисы и виджеты для сайта — прокачай Тильду!

Как установить на Тильду сторонний сервис

Виджеты продаж и paywall

Для чего пригодятся?

Для продажи цифровых товаров (электронных книг, статей, руководств, уроков), интернет-магазинов; промостраниц продуктов и курсов, платного контента (статей).

Команда Тильды разработала собственные карточки товаров, а также интегрировала конструктор интернет-магазина Ecwid — блоки T301 и T380 в разделе «Другое». Если этих возможностей мало, подключите сторонние сервисы через блок «HTML-код».

Стоимость: от $ 9 в месяц; есть пробный период

Возможности: продажа цифровых товаров (например, электронных книг), скидки, корзина покупок, персонализация форм заказа и автоматических писем, аналитика. Можно поставить кнопку через вставку кода или получить просто ссылку, которую можно поставить на любую кнопку в Тильде. При нажатии пользователь будет отправляться в PayPal и после оплаты он получит ссылку для скачивания.

Стоимость: по запросу; есть пробный период

Возможности: продажа подписок на публикации или единовременного доступа к контенту, например, к определенной странице, продажа скачиваний файла или доступа к видео, ограничение видимости контента для определенных территорий.

Язык: английский / русский

Стоимость: от $ 29 в месяц + комиссия за транзакции 2.0%, у сервиса есть бесплатный пробный период

Возможности: продажа цифровых (музыка, книги, учебники, курсы) и материальных товаров, позволяет принимать единовременную оплату, генерировать лицензионные ключи, оплачивать подписку или оформлять предзаказ.

Стоимость: от $ 29 в месяц + комиссия за транзакции 2.0%, есть бесплатный пробный период

Возможности: популярная п латформа электронной коммерции легко интегрируется в Тильду. Неограниченное количество товаров, коды на скидку и подарочные карты.

Нет смысла тратить время, чтобы заново что-то придумать. В открытом доступе можно найти массу готовых решений, и интегрировать их в проект сразу или после доработки. Это что касается кода. С виджетами ситуация аналогичная.

Зачем разрабатывать с нуля онлайн-чат для сайта, если можно использовать JivoSite или Intercom? Взять готовое — значит, сэкономить время и деньги на разработку.

Ребята, которые делают сайты, редко что-то разрабатывают с нуля. Они используют готовые решения — плагины и модули, интегрированные в CMS. Иногда — пишут новый модуль для управления десятком готовых модулей. Так было всегда.

Самописные сайты, лендинги и конструкторы сайтов создали спрос на эти плагины вне CMS. Теперь их можно интегрировать на любую страницу, вставив небольшой кусок HTML-кода — скрипт, который подтягивает все стили и основной код с сервера виджета.

Формы приема данных и опросы

Для чего пригодятся?

Чем лучше вы знаете вашего клиента, тем эффективнее вы решаете его проблемы, а значит развиваете ваш бизнес.

В библиотеке блоков Тильды есть целая категория «Формы», которые интегрируются с 11-ю сервисами для сбора данных (email, Mailchimp, GetResponse, Google Forms, Telegram и т. д.) Инструкция http://help-ru.tilda.ws/forms

Мы отобрали еще несколько сервисов для сайта, которые дополнят функционал Тильды.

Язык: английский

Стоимость: есть бесплатный план

Возможности: приятный конструктор форм сбора данных, миссия которого «спасти мир от скучных форм». Также можно создать опросы, викторины, формы заказа, формы для предложений и для запросов о приеме на работу (да, в них можно прикрепить файл). Сервис интегрирован в Тильду, поэтому подключить его совсем просто.

Язык: русский

Стоимость: бесплатно

Возможности: Google Forms подключаются к формам, которые есть на Тильде. Но если вам нужны выпадающие списки, чекбоксы с выбором параметров и другие функции, можно создать форму на Google Forms и добавить ее на сайт через вставку html.

Язык: русский

Стоимость: есть бесплатный план

Возможности: специализированный сервис для проведения исследований с помощью опросов. Можно составлять свои или использовать готовые шаблоны.

Аналитика поведения пользователей, повышение вовлечености и конверсии

Для чего пригодятся?

Аналитика помогает принимать решения, основываясь на объективных данных. Базовые показатели (количество визитов, просмотры страниц, количество заявок из форм) можно посмотреть прямо внутри Тильды, подключив счетчики Яндекс. Метрики или Google Analytics. Более подробные данные нужно будет смотреть на сайтах аналитики. Разобраться с ними поможет наша статья «Как повысить конверсию сайта, используя веб-аналитику». Для тех, кому нужны совсем тонкие настройки, наш выбор инструментов из списка ниже.

Язык: русский

Стоимость: от 1300 руб. (один сайт) в месяц.

Возможности: сервис для создания мультилендингов — подменяет содержимое страницы сайта в зависимости от источника, из которого пришел посетитель. Работает довольно просто: ставите ссылку на страницу, на которой нужно менять контент, выделяете фразу и указываете источники и варианты замены. Полезно, если вы предлагаете разные условия покупки, когда у товара или услуги разные характеристики или способы применения.

Язык: русский

Стоимость: бесплатно, содержит стороннюю рекламу.

Возможности: рекомендательный сервис — анализирует поведение пользователя и подбирает статьи, которые будут ему интересны. Выглядит это как блок «Читать также» или «Вам будет интересно». Нужно поставить код на каждую страницу и выбрать тип виджета, который будет показывать подходящие материалы.

Язык: английский

Стоимость: есть бесплатный план

Возможности: система приложений, цель каждого — проанализировать что делают пользователи на сайте и предложить решение, которое увеличит трафик на сайте. Всего приложений 12. Некоторые из них: List Builder — позволяет создать всплывающее окно подписки, которое появляется в нужном месте и в нужное время и собирает базу контактов.

Heat Maps — «тепловая карта», анализирует поведение пользователя на сайте и показывают куда на самом деле кликают посетители. Share — кнопки расшаривания, которые оптимизируют свой внешний вид в зависимости от контента на странице: что-то удобнее затвитить, а что-то отправить по email. Content Analytics — анализирует и показывает насколько глубоко проскролливают вашу страницу.

Календарь

Для чего пригодятся?

Для промостраниц курсов, мастер-классов, выставок, сайтов мини-отелей, хостелов; страниц-визиток психоаналитиков и адвокатов.

Добавьте на страницу календарь и вносите в него информацию о предстоящих тренингах или забронированных датах и времени. Потенциальные клиенты увидят, когда пройдет мероприятие и можно ли записаться на прием в удобное время.

Календарь придется вести самостоятельно. Старайтесь оперативно вносить в него изменения, иначе клиенты остануться недовольными, потому что на сайте время значится свободным, а по факту — уже занято другим человеком.

Если вы принимаете клиентов по записи, вам в любом случае нужно вести учет. Если вы ведете его в облаке, то можете быстро и отовсюду редактировать его, а также показать клиентам. Они увидят, насколько вы заняты, и не будут звонить, чтобы уточнить свободные часы.

Язык: русский

Стоимость: бесплатно

Возможности: трансляция на сайте всех изменений в календаре, отображение за день, неделю или месяц.

Язык: русский

Стоимость: бесплатно

Возможности: трансляция на сайте всех изменений в календаре, отображение за день, неделю или месяц.

Язык: английский

Стоимость: от $ 15 в год — за один календарь

Возможности: календарь на месяц или год, несколько объектов в одном календаре, простое администрирование.

Подарочные карты

Для чего пригодятся?

Для интернет-магазинов; промостраниц продуктов, ресторанов, салонов красоты, спортклубов, курсов, мастер-классов и конференций.

Электронный подарочный сертификат работает так же, как ламинированный или пластиковый. Покупатель сможет использовать его в обычном или интернет-магазине. Он продиктует вам уникальный код, по которому вы поймете на какую сумму или услугу выписали сертификат.

Будьте внимательны, и не позволяйте клиентам заказывать сертификаты на сумму 1000 рублей, если минимальная стоимость товаров и услуг более 2000 рублей.

Сертификаты можно выписывать и на конкретные услуги, обычно, самые популярные — на мастер-класс, курс, абонемент в бассейн или на занятия йогой.

Люди привыкли к подарочным сертификатам, которые можно положить в конверт, поэтому постарайтесь максимально доходчиво объяснить им механизм работы электронного аналога. Не поленитесь, и сделайте для этого отдельную страницу.

Язык: русский

Стоимость: по запросу

Возможности: подарочные сертификаты с отложенной отправкой на имейл, в Фейсбук или по смс; оплата банковскими картами, Вебмани, Киви, Яндекс.Деньгами.

Онлайн-запись и продажа билетов

Для чего пригодятся?

Для промостраниц курсов, мастер-классов, салонов красоты, гостевых домиков и бань; страниц-визиток психоаналитиков, адвокатов и персональных тренеров.

Предложите клиентам самостоятельно записываться на занятия к инструктору или на сеансы к массажисту. Они смогут прямо на сайте проверить свободны ли вы в удобное время и сразу записаться на прием. Вы увидите всю информацию по записям в сводной таблице сервиса.

Сервисы бронирования — полноценные CRM-системы, которые хранят данные каждого клиента и позволяют вам отслеживать их активность. Некоторые даже позволяют делать имейл и смс-рассылки. А если нет, то можно экспортировать базу контактов и провести рассылку в сторонних сервисах.

Не все клиенты будут записываться через сайт. Многие предпочтут делать это по телефону или лично — после очередного занятия. Поэтому вам по-прежнему придется участвовать в процессе.

Кроме того, вам придется подтверждать по телефону бронь всех новых клиентов: вдруг, они просто решили проверить, как это работает.

Язык: русский

Стоимость: 3% при объеме продаж менее 300 тыс. руб. в месяц

Возможности: настраиваемые анкеты для регистрации участников, статистика продаж и регистраций, возможность сделать промокоды и скидки, почтовая рассылка по аудитории. Сервис интегрирован в Тильду, инструкция http://help-ru.tilda.ws/timepad

Язык: русский

Стоимость: от 600 рублей в месяц

Возможности: запись, учет, администрирование, имейл и смс-уведомления, бронирование конкретных мест

Язык: русский

Стоимость: от 1200 рублей в месяц

Возможности: запись, учет, администрирование, база данных, смс-рассылки

Язык: английский

Стоимость: комиссия от продажи билетов — от 2,5%, не менее € 0.49 за билет

Возможности: продажа билетов на конкретные места, продажа билетов на мероприятия; оплата банковскими картами, PayPal.

Язык: русский

Стоимость: комиссия от продажи билетов — 3% от стоимости билета, без абонентской платы за год. Бесплатные билеты — бесплатно (до 300 штук).

Возможности: продажа билетов на мероприятия; 90 способов оплаты.

Используя готовый виджет, пусть и платный, вы экономите деньги не только на программистах. Ведь нужны еще дизайн и верстка. А тот же сервис бронирования вставил и забыл.

Если смотреть на виджеты с точки зрения дизайна, можно сказать, что они универсальные. Обычно, разработчики не дают возможности сильно изменить внешний вид, максимум — цвета поменять. Некоторые открывают доступ к CSS, но лезть туда без конкретной задачи не нужно: сделаете хуже.

Если на сайте используют готовые виджеты, которые нельзя кастомизировать, задача дизайнера — разместить его в правильном месте и сделать так, чтобы он не выделялся на общем фоне.

Калькуляторы

Для чего пригодятся?

Для промостраниц консультаций, курсов, ремонтных работ и сервисов.

Если вы предлагаете сложные продукты, стоимость которых зависит от опций или параметров, покажите потенциальным клиентам, как формируется стоимость — разместите на странице калькулятор. Они увидят, сколько стоит конкретная опция или интересующий их набор опций, двигая ползунки и вводя числовые значения.

Нельзя найти в интернете калькулятор, который похож на тот, который нужен вам, и добавить его на сайт. Во первых, в нем прописаны другие опции и их стоимость. И даже если вы сможете разобраться с этим, остаются еще две беды: его внешний вид и безопасность кода.

Если не хотите, чтобы ваш сайт взломали, используйте код из проверенного источника. В идеале — закажите разработку калькулятора с нуля, с нужными параметрами и приемлемым внешним видом.

К сожалению, сервисов, которые позволяют создать уникальный калькулятор без вмешательства в код, мало. Мы нашли всего один.

Язык: английский

Стоимость: бесплатно при использовании готовых калькуляторов из библиотеки; платный тариф — от $ 9 в месяц

Возможности: гибкая настройка, редактор формул, настройка внешнего вида, прием платежей через PayPal.

Обратная связь и поддержка

Для чего пригодятся?

Для возможности быстро задать вопрос консультанту, сделать заказ или оставить отзыв — без дополнительных действий и переходов.

Виджеты обратной связи отлично повышают конверсию, несмотря не всенародную нелюбовь к мигающим иконкам онлайн-чатов. Впрочем, иконки могут выглядеть и вести себя интеллигентно, не раздражать посетителя, но помогать ему.

В Тильду интегрированы самые распространенные сервисы обратной связи: Callback Hunter, Jivosite, Chatra . Инструкция по подключению http://help-ru.tilda.ws/callback Если они вам не подошли, можно добавить свои.

Язык: русский

Стоимость: оплата за соединения, начальный тариф: 50 рублей за каждое (до 170 соединений).

Возможности: сервис обратного звонка, который, в отличии от многих, может работать без всплывающего окна — телефон можно ввести в форму на странице. Дизайн формы настраивается. Впрочем, всплывающее окно тоже есть. После того, как посетитель ввел телефон и нажал кнопку, система одновременно звонит вам и клиенту и соединяет звонки.

Язык: английский

Стоимость: от $ 49 / месяц

Возможности: любимая платформа прогрессивных западных стартапов предлагает три вида сервиса: чат с посетителями на сайте, поддержка в онлайн-чате пользователей вашего сервиса и «побудительный» маркетинг.

Язык: русский

Стоимость: бесплатно

Возможности: Самая популярная российская социальная сеть сделала несколько виджетов, чтобы пользователи общались с сообществами, используя авторизацию vk.com. В общем, логично. Даже если вы не пользуетесь вконтакте активно, аккаунт-то у вас там есть 😉

Язык: английский

Стоимость: тарифы для чата и звонков начинаются с бесплатного, для поддержки — от $ 5 в месяц.

Возможности: целая система, призванная наладить отношения с пользователями: сервис поддержки (отслеживание и хранение запросов), справочный центр, онлайн-чат и колл-центр.

Язык: английский

Стоимость: минимальный тариф (который, к слову, не ограничивает количество пользователей и агентов) — $ 0.

Возможности: сервис, который поможет организовать поддержку пользователей через email. Другими словами, это такой почтовый ящик, адаптированный под потребности работы с большим количеством обращений, на которые отвечают разные люди. Можно отследить статус письма, кто начал отвечать на запрос, передать задачу другому сотруднику, добавить автоответ.

Плюс сервис позволяет создать базу знаний, к которой могут обращаться пользователи самостоятельно — на страницу ставится форма поиска, через которую посетители могут быстро найти ответ. Отправлять вопросы на email также можно через форму на сайте.

Комментарии

Для чего пригодятся?

Для блогов и интернет-магазинов; промостраниц продуктов, курсов и мастер-классов.

Позвольте своим клиентам задавать вопросы и оставлять отзывы на странице продукта в реальном времени. Они смогут общаться с вами и между собой — обмениваться опытом и впечатлениями. А вы — удалить или скрыть неадекватные или нежелательные комментарии.

Если на вопрос одного клиента отвечает другой, это вызывает больше доверия. Цель таких ответов — помочь, а не залезть в кошелек.

Клиент, помимо каких-то общих фраз, цитирования инструкции и характеристик, может поделиться опытом реального использования. Сформулировать мнение о тренере и поделиться эмоциями от занятия. Или испытать смартфон в боевом режиме и рассказать, насколько реальное время работы от аккумулятора отличается от заявленного.

Разработчики Тильды интегрировали виджеты Disqus и HyperСomments — блоки T158 и T163 в разделе «Другое». Они отлично выполняют свои функции: комментировать может каждый, кто авторизуется через социальные сети.

Если по каким-то причинам они вас не устраивают, добавьте любой другой виджет комментариев для сайта через блок «HTML-код».

Язык: русский

Стоимость: бесплатно

Возможности: авторизация через «Вконтакте», трансляция комментариев в ленту со ссылкой на сайт.

Язык: английский

Стоимость: бесплатно

Возможности: авторизация через Фейсбук, трансляция комментариев в хронику, модерация комментариев.

Язык: русский

Стоимость: от 200 рублей в месяц

Возможности: авторизация через социальные сети, расшаривание комментариев в соцсетях, модерация и рейтинг комментариев, аналитика.

Посты из соцсетей

Для чего пригодятся?

Для СМИ, блогов и интернет-магазинов; промостраниц продуктов, курсов и мастер-классов.

Используйте в статьях, чтобы показать хронологию, реакцию на какое-то событие или сослаться на чье-то мнение. Используйте сервис в продажах — чтобы транслировать реальные отзывы о продукте. К таким отзывам больше доверия, потому что видно, кто и когда их публикует.

Посты в соцсетях — отличный инструмент социального подтверждения. Попросите клиентов написать на своей странице мнение о купленном торте или посещенном мастер-классе.

Но помните, что распознать фальшивые отзывы легко. Их авторы всегда хвалят продукт, и не указывают на минусы; говорят о качествах продукта, а не его пользе; стараются сделать вид, что никак не связаны с продавцом.

Язык: английский, можно загуглить инструкцию на русском

Стоимость: бесплатно

Возможности: трансляция на сайте одного твита или ленты

Язык: русский

Стоимость: бесплатно

Возможности: трансляция на сайте одного поста

Язык: русский

Стоимость: бесплатно

Возможности: трансляция на сайте одного поста

Язык: английский, можно загуглить инструкцию на русском

Стоимость: бесплатно

Возможности: трансляция на сайте одного поста, доски или профиля

Язык: русский, английский, китайский, испанский

Стоимость: есть бесплатная версия с основным функциналом. Чтобы отключить рекламу и получить дополнительные опции (больше виджетов, возможность поставить ссылку на фотографию на свой аккаунт в инстаграме, выбирать разрешение фото), нужно перейти на платную версию за 5 или 10 долларов в месяц в зависимости от количества выбранных виджетов.

Возможности: трансляция постов из своего аккаунта — всех подряд или по хэштегу, анимация изображений при наведении, адаптивность, выбор разрешения фотографий, настройка сетки.

Кнопки «Поделиться»

Для чего пригодятся?

Для блогов, интернет-магазинов, портфолио студий и фрилансеров; для промостраниц продуктов, курсов и мастер-классов

Работают, как сарафанное радио: посетитель пришел, ознакомился, поделился ссылкой с друзьями. Иногда люди постят ссылки в ленту, чтобы не потерять ее, и вернуться на страницу, когда накопят денег. С каждой такой публикацией растет узнаваемость продукта, а вы получаете бесплатный трафик на сайт.

Наполняйте страницы качественным контентом. Посетитель должен либо купить продукт, либо поделиться ссылкой на него в Фейсбуке.

Позаботьтесь о том, как выглядит ссылка на страницу в социальных сетях. Даже если вы не используете кнопки «Поделиться», посетители могут скопировать и запостить адрес страницы из строки браузера.

Чтобы настроить внешний вид ссылки, зайдите в раздел «Настройки», вкладка «Facebook and SEO». По умолчанию Тильда использует заголовок и описание страницы со вкладки «Главное», а картинку — со вкладки «Бейджик».

Язык: русский

Стоимость: бесплатно

Возможности: кнопки всех социальных сетей, Evernote, Pocket, Viber, WhatsApp, Skype и Telegram.

Язык: русский

Стоимость: бесплатно

Возможности: кнопки всех социальных сетей, Evernote, закладки Google и Яндекс

Язык: русский

Стоимость: бесплатно

Возможности: кнопки всех социальных сетей, Evernote и Pocket, гибкая настройка внешнего вида кнопок.

Язык: русский

Стоимость: бесплатно

Возможности: кнопки всех социальных сетей, Google Translate, Evernote, Pocket и WhatsApp.

Интерактивные элементы

Для чего пригодятся?

Для интернет-магазинов; промостраниц продуктов, жилых комплексов, курортов, ресторанов, мастер-классов и конференций.

Просто изображения и текст вызывают скуку, поэтому используйте интерактивные картинки, чтобы рассказать больше о своем продукте. Дайте посетителям возможность поклацать кнопочки, поуправлять ситуацией. Это увлекает.

Вы можете указать краткие тезисы, по нажатию на которые откроются целые истории.

Интерактивные элементы — сильный инструмент. С его помощью вы погружаете читателя в свой мир, подогреваете интерес, рассказываете о пользе и ведете его к покупке.

Подготовьте развернутое описание продукта, а потом сократите его, оставив только главное. Это как будто написать статью, а потом оставить только подзаголовки. Трюк в том, чтобы с помощью подзаголовков рассказать всю ключевую информацию. Если читатель захочет узнать больше, он кликнет на подзаголовок — и увидит скрытый текст.

Язык: русский

Стоимость: бесплатно, с ограниченной функциональностью; платный тариф — от $ 20 в месяц

Возможности: интерактивные изображения, виртуальные 360˚ туры, карты и инфографика.

Язык: английский

Стоимость: бесплатно

Возможности: популярный сервис интерактивных карт и таймлайнов, который не стесняются использовать такие гиганты, как Time, Mashable и CNN.

Музыкальные плееры

Для чего пригодятся?

Для СМИ и блогов; промостраниц продуктов, мастер-классов, конференций, выступлений и студий звукозаписи; портфолио битмейкеров и ди-джеев.

Встройте музыкальный плеер в начало статьи, и попросите читателя воспроизвести музыку, чтобы сильнее погрузиться в материал; добавьте в плейлист фрагмент интервью, подкаста или аудиокниги.

В продажах — если вы музыкант, покажите потенциальным клиентам свои работы. Это могут быть биты, сэмплы, звуковые эффекты, дикторская озвучка и т. д.

Предварительно нужно загрузить аудио в выбранный сервис.

Абсолютно все композиции, размещенные в музыкальных сервисах, можно воспроизводить на своем сайте через вставку HTML-кода. Выбранный трек, альбом или плейлист отображается в фирменном плеере выбранного сервиса.

Так вы не нарушаете авторские права. А если вы скачаете трек бесплатно или даже купите его, а затем разместите на сайте — вы их нарушите.

Язык: английский

Стоимость: бесплатно

Возможности: записи радиоэфиров — выступлений ди-джеев, развлекательных и образовательных передач и новостей

Язык: русский

Стоимость: бесплатно

Возможности: треки исполнителей со всего мира, большая библиотека российских артистов

В Тильде идеально подобраны сервисы. Во-первых, с установкой виджетов справится даже ребенок. Во-вторых — это тот набор, который нужен для продающей страницы.

Пренебрегать ими не нужно. Есть часть людей, которые не любят говорить по телефону. Им комфортнее общаться в чате. Все они — потенциальные клиенты, которые приведет других потенциальных клиентов. Хорошо, что относительно чата у Тильды есть несколько вариантов.

Форма обратного звонка экономит средства и время тем, кто не хочет дозваниваться сам.

Формы сбора данных или, например, подписки — пригодятся для настройки рекламы по тем, кто уже заинтересован в вашем продукте.

Еще хорошо, что можно легко поставить кнопки оплаты и не дожидаться нудной регистрации в платежных системах. Для мелких задач подходит вполне. И если нужно быстро протестировать какой-то продукт/услугу — все эти виджеты отлично подойдут.

Как выбрать и настроить приветственный виджет

Несмотря на то что виджеты Вконтакте существуют уже давно, ими до сих пор пользуются далеко не все SMM-специалисты. Со временем интересных вариантов работы с виджетами становится все больше.

Давайте разберемся с тем, как правильно работать с приветственными виджетами и попробуем настроить их в сообществе.

Зачем нужны приветственные виджеты

Приветственные виджеты заставляют пользователя обратить внимание на сообщение и вчитаться — они установлены далеко не в каждом сообществе, поэтому все еще срабатывает эффект новизны. Плюс к этому человек закономерно будет обращать внимание на сообщение, ведь в нем отображаются его имя и фотография.

Это персонализированное обращение к потенциальному покупателю можно настроить так, как захочется.

Для начала представим себя на месте своего клиента и поймем, зачем он заходит в вашу группу и чего от нее ждет. После этого решим, на какое целевое действие его вести. К виджету можно (и нужно) подключить кнопку, которая будет вести на целевое действие. Например, можно переправлять клиента на сайт, в фотоальбом или на тему с отзывами — туда, куда, как вам кажется, будет уместнее всего.

Какие бывают приветственные виджеты

Для того чтобы выбрать приветственный виджет, который подойдет именно вам, давайте посмотрим, какими они бывают:

Текстовые приветственные виджеты

Текстовый приветственный виджет — самый простой и понятный

Это самый простой тип виджетов. Он не показывает аватарку человека, зашедшего на страницу, но демонстрирует ему информацию и призыв к действию. Имя человека может упоминаться, а может и не упоминаться — по вашему усмотрению.

Персонализированные приветственные виджеты

Персонализированные виджеты показывают имя и фото человека, который зашел на страницу

Наверняка вы встречали виджеты, которые показывают вашу аватарку и приветствую вас, называя ваши имя и фамилию. Именно такие виджеты я отношу к персонализированным.

Уже появились расширенные версии подобных виджетов: например, виджеты, которые могут различать людей по полу, или по-разному приветствовать подписчиков и тех, кто не подписан на страницу.

Иные приветственные виджеты

Приветственные виджеты бывают очень разными

Фантазия разработчиков приложений не стоит на месте, и виджеты могут отображать абсолютно разные вещи: например, показывать баннеры, скидки и спецпредложения, погоду, результаты матчей и многое другое. Правда, приветственными их можно назвать с натяжкой — все приветствие заключается в том, что такие виджеты называют человека по имени.

Встречаются и другие интересные варианты — например, когда человеку предлагают позвать в группу его друзей, при этом указывается их количество и в случайном порядке выбирается один из них.

Как добавить виджет на страницу

Зайдите в настройки вашей группы или страницы, выберите пункт «Приложения», и перейдите в каталог приложений. На данный момент приветственные виджеты можно сделать в приложениях: «Spycat: конструктор лид-виджетов», «Виджет в сообществе», «Конструктор виджетов».

После выбора приложения, нужно будет настроить внешний вид вашего приветственного виджета. Не забудьте сохранить ваши настройки, а затем поменять видимость виджета так, чтобы он был виден всем (либо всем участникам группы). При этом само приложение должно быть видно только администраторам сообщества.

На некоторых версиях Android в официальном мобильном приложении ВКонтакте виджет заменяет собой блок с товарами — если вы пользуетесь товарами, придется выбрать, что для вас важнее: виджет или товары. В мобильной версии часто обрезается текст виджета: проверяйте, как смотрится ваше новое приветствие. Иногда лучше и вовсе отключить его прочтение с мобильной версии.

Кроме того, важно соблюдать правила Вконтакте. Например, ваше сообщество может быть наказано администрацией ВКонтакте за рекламу в виджете сторонних проектов (пункт 5.13.4 правил ВКонтакте) (коммерческих и политических). Для этого приветственные виджеты использовать нельзя.

Как выбрать конструктор виджетов

На данный момент таких приложений Вконтакте три, и у всех есть свои плюсы и минусы. Рассмотрим их подробнее:

Spycat: конструктор лид-виджетов

Spycat: конструктор лид-виджетов

Топ-пост этого месяца:  Кошелек для криптовалюты — как его создать и какой лучше холодный, мультивалютный, аппаратный или

Бесплатные функции: на данный момент конструктор стал платным.

Платные функции: текстовые виджеты, приветственные виджеты с персонализацией (возможность не показывать на мобильных устройствах), обложки (1—3 спецпредложения), акции и скидки, наши клиенты, отзывы, мероприятия.

Личные впечатления: действительно хороший шаблон виджета. Прежде всего, удобен тем, что быстро настраивается, интерфейс интуитивно понятен. В своих проектах я чаще всего пользуюсь именно им.

Виджет в сообществе

Приложение «Виджет в сообществе»

Бесплатные функции: Текстовые виджеты, приветственные виджеты (может показывать разные приветственные сообщения парням и девушкам), акция и кнопка на подложке из фото, виджет с товарами и кнопками.

Платные функции: все бесплатно.

Личные впечатления: Интересная фишка с сегментацией по полу, действительно может применяться во многих проектах. Приложение очень простое, без изысков.

Конструктор виджетов

Приложение «Конструктор виджетов»

Бесплатные функции: Текстовые виджеты, виджет-список, виджет с плитками товаров или афишами (3 штуки), виджет«Матч» (для прогнозов и ставок на спорт).

Платные функции: Виджет «Пригласи друга в группу», персонализированные виджеты со временем суток и обратным отсчетом, разный текст для тех, кто подписан на группу и для тех, кто не подписан, виджет с погодой, виджет активности (участников сообщества).

Впечатления: Бесплатных персонализированных виджетов нет, а вот среди платных есть очень интересные решения. Особенно мне импонирует идея показывать разные приветственные сообщения тем, кто подписан на группу и тем, кто еще не подписан.

Подытожим

Приветственные виджеты — вещь полезная. Настраиваются они легко и быстро, дополнительных вложений не требуют (большинство приложений бесплатно).

Не пожалейте полчаса своего времени и сделайте отличный приветственный виджет, на который обратят внимание многие ваши подписчики!

Все call-центры: цены, услуги, отзывы, адреса

Софт и сервисы \ Статьи и новости

10 онлайн-чатов для вашего сайта: сравнение и обзор на практике

Несколько лет назад eCommerce сегмент захлестнула волна увлечения онлайн-чатами – трудно было встретить сайт, который что-то продает и при этом не имеет виджет с онлайн-консультантом. В большинстве случаев онлайн-чат был не слишком полезным – на заданный вопрос никто не стремился отвечать, несмотря на радушное автоматическое приветствие и обещание ответить как можно быстрее.

Эффективно работать с новым инструментом получалось не у всех. Несмотря на действительно хороший потенциал онлайн-чатов как маркетинговой технологии для увеличения конверсии, многие не стремились прилагать усилия и извлекать из них пользу, считая виджет либо данью моде, либо «волшебной кнопкой», сам факт наличия которой на сайте увеличит продажи.

Сегодня ситуация представляется более адекватной – на каждом более-менее серьезном сайте онлайн-консультант оперативно реагирует на вопросы, используя все возможности виджета по привлечению клиента. Успешность внедрения онлайн-чата на конкретный сайт во многом зависит от специфики деятельности компании и наклонностей целевой аудитории. Зачастую для того чтобы убедиться в эффективности или бесполезности онлайн-чата на определенном сайте, нужно его установить и протестировать.

В сегодняшней статье мы поможем сориентироваться в огромном разнообразии онлайн-чатов и рассмотрим 10 самых примечательных и достойных внимания сервисов.

JivoSite

Пожалуй, самый популярный онлайн-чат в рунете. Отличается простотой и низкой ценой за месяц использования. Функционал платной версии стандартный, с минимальным набором возможностей – можно общаться с клиентом, переключать его на других консультантов, банить, совершать звонок, передавать файлы и использовать сценарии. А вот быстрые ответы, которые сами по себе в наличии, менять нельзя – возможно пользоваться лишь готовыми фразами. Непонятно, что помешало сделать фразы редактируемыми. Вполне возможно, что таким образом разработчики лишний раз подчеркивают простоту решения и отсутствие всего лишнего.

Виджет обладает лаконичным дизайном, у которого есть все шансы вписаться в интерфейс страниц сайта, тем более что его внешний вид гибко настраивается. Единственный минус – виджет намертво прикрепляется к нижней части экрана и свободно переместить его, если он что-то собой закрывает, не получится.

Слабые места JivoSite – это сопровождение клиентов на страницах сайта (можно указывать на определенные места на странице, но нельзя видеть то, что при этом делает пользователь), отсутствие возможности формировать готовый email по результатам общения и статистика, не позволяющая в подробностях видеть результат работы консультантов.

У JivoSite есть приложения для всех платформ, кроме Linux. Разобраться в приложениях не составляет труда – интерфейс прост и интуитивен, как и дизайн самого виджета. Выделяется мобильная версия JivoSite, причем не лучшим образом – и без того базовый функционал сводится к переписке с посетителем и переключению на других консультантов.

Что касается бесплатной ознакомительной версии, то практического применения у нее в целом нет – все ограничивается возможностью 5-ти операторам общаться с клиентами без каких-либо дополнительных функций.

Резюме: JivoSite – симпатичный, простой и дешевый онлайн-чат с ограниченными возможностями. Он подойдет небольшим компаниям, которым не требуется серьезная многоканальная работа консультантов в чатах с многочисленными клиентами. Расходы на одного оператора составят 474 руб/мес.

RedHelper

Серьезный продукт, который неплохо работает в связке с RedConnect – сервисом обратного звонка. Без RedConnect чат RedHelper также отлично справляется со своими задачами.

Кроме стандартного для любого онлайн-чата набора возможностей, RedHelper позволяет высылать переписку на электронный ящик и настраивать сценарии, согласно которым виджет будет появляться на странице не произвольно, а в зависимости от конкретных действий пользователя. Это может здорово повысить конверсию, не раздражая пользователя окном чата, всплывающим в неподходящий момент.

Интересное разграничение полномочий реализовано в виде так называемой «2-ой линии», консультанту которой не поступают сообщения от клиентов автоматически, но которому другой оператор может адресовать чат с клиентом при крайней необходимости. 2-ую линию удобно выделять руководителю, который может решать сложные вопросы.

В RedHelper отлично реализован совместный браузер – консультант может просматриваться страницы вместе с пользователем, направлять его, выделять нужные области. При этом консультант видит все действия, которые совершает пользователь. В сочетании со сценариями, это позволяет приглашать клиента к совместному просмотру сайта именно в тот момент, когда он действительно в этом нуждается.

Дизайн виджета и приложений для операторов выглядят аккуратно и «экологично». Внешний вид виджета гибко настраивается – его довольно просто вписать почти в любой дизайн сайта.

Со статистикой у сервиса все замечательно – есть развернутые, подробные отчеты и сравнения производительности разных консультантов между собой. Неплохо работает индивидуальный рейтинг оператора, который мотивирует консультанта работать еще лучше.

Недостаток RedHelper – это отсутствие WEB-приложения для консультантов и приложения под iOS. Мобильная версия под Android обладает полным функционалом за исключением возможности отправлять файлы.

В бесплатной версии чата функциональность значительно урезана и позволяет посадить за чат только одного оператора.

Резюме: RedHelper – полноценный, в чем-то даже флагманский онлайн-чат, который удовлетворит потребности малого и среднего бизнеса. Стоит он дороже более простых вариантов (таких как JivoSite), но цена вполне приемлемая – 960 руб в месяц за 1 оператора.

Livetex

Большой и весьма функциональный продукт, ориентированный, в первую очередь, на использование в корпоративной среде.

Говорить о стандартных функциях онлайн-чата Livetex смысла нет, внимания заслуживают дополнительные функции и особенности продукта. Виджет Livetex не просто настраивается, но и может быть использован в двух формах – как обычный всплывающий виджет, и как отдельное окно. При этом его появление регламентируется подробными и тщательно составленными сценариями, делающими все, чтобы не упустить клиента.

В Livetex неплохо реализована телефония – можно быстро созвониться с клиентом прямо из браузера или приложения. Кроме возможности передавать клиента от консультанта к консультанту, предусмотрен отдельный внутренний чат для общения сотрудников, что очень кстати в сложных ситуациях, когда «отфутболивание» пользователя от оператора к оператору не решает проблему.

Один из самых заметных недостатков Livetex – отсутствие возможности отслеживать активность пользователя до того, как он вступил в диалог с консультантом. Также не раз отмечалась не всегда корректная работа совместного браузера.

Модуль статистики выдает информацию в максимально развернутом виде. Можно оценить результативность работы каждого консультанта индивидуально или всей группы в целом.

Разработчики Livetex позаботились о наличии клиентов и приложений под все реально использующиеся платформы – от Windows до Linux. Мобильные версии также функциональны, как и десктопные клиенты, хотя с передачей файлов время от времени случаются проблемы.

Резюме: рассмотреть все возможности Livetex в рамках данного обзора не получится, и это лишний раз говорит о том, что сервис рассчитан на крупный бизнес, который будет пользоваться если не всеми, то очень многими «фишками», которые станут лишними для бизнеса малого. Учитывая целевую аудиторию Livetex, цена за услуги сервиса вполне адекватна – от 765 руб в месяц за оператора.

Onicon

По некоторым статистическим данным, Onicon – второй по популярности онлайн-чат в рунете после JivoSite. По всей видимости, распространенность Onicon связана со стоимостью, сопоставимой с тарифами JivoSite. Однако во всем остальном эти два сервиса, находящиеся в одном ценовом сегменте, существенно отличаются друг от друга.

Первое, что бросается в глаза – это обильный интерфейс клиента для оператора. Кнопок очень много и понять, с чего вообще начинать работу – довольно сложно. «Богатство» интерфейса можно списать на многофункциональность, но на деле Onicon не может похвастаться ничем особенным – есть возможность переписываться с клиентом, использовать сценарии и быстрые ответы (которые никак не сортируются и доступны в виде произвольного списка). Отправки файлов в Onicon нет.

Из достоинств Onicon можно выделить наличие нескольких вариантов оффлайн-форм и неплохой дизайн самого чата.

С доступными приложениями все очень скромно – есть WEB-приложение и приложение для Android.

Резюме: очень простой и местами неудобный онлайн-чат, не лишенный некоторых достоинств. Обещанная стоимость использования сервиса – от 385 руб/мес за двух (а не одного, как обычно) операторов. Но не все так просто – сайт Onicon недвусмысленно намекает на то, что вам стоит воспользоваться индивидуальным калькулятором. Итоговая стоимость может превысить тариф того же JivoSite, что сбивает с толку.

WebConsult

Простой чат для небольших интернет-магазинов с полным набором всех необходимых функций.

Время, спустя которое на стороне пользователя появляется окно чата, а также текст сообщения, настраивается отдельно для каждой страницы. Операторы, работающие с клиентом, распределяются в сервисе на несколько уровней. Это позволяет не только регулировать загруженность каждого из операторов, но и переключать пользователей на оператора следующего уровня в том случае, если остальные не могут ответить. Возможно создание нескольких групп операторов, каждая из которых будет заниматься вопросами определенной категории. Пользователь может сам выбрать тип обращения и ускорить тем самым решение вопроса. Опция подходит для больших интернет-магазинов с несколькими отделами.

Оператор получает много информации о пользователе: видит, что пишет клиент еще до отправки сообщения, историю просмотра сайта, IP-адрес, местоположение итд. Есть возможность выслать переписку на email, перевести общение на мобильную платформу.

Интересная «фишка» WebConsult – удобное отображение хронологии действий всех операторов, по которой можно делать выводы об эффективности работы сотрудников.

Интерфейс чата аккуратный и лаконичный, а сам виджет можно свободно расположить в любом месте страницы.

Админка и клиент для консультантов существует только в виде WEB-приложения, хотя с помощью Jabber, который WebConsult поддерживает, можно настроить работу со смартфона.

Резюме: стандартный онлайн-чат с приятными дополнительными возможностями. Удовлетворит потребности малого и среднего бизнеса. Цена за месяц использования – 550 руб, что позволяет WebConsult конкурировать с более раскрученными и популярными в рунете онлайн-консультантами.

P3chat

Интернациональный продукт с поддержкой 21 языка. Выглядит крайне несовременным и не поддерживает многие функции, которые по умолчанию предоставляются другими онлайн-чатами, но с самым главным – соединением клиента с оператором – справляется хорошо.

Несмотря на «ретро» дизайн P3chat, его минималистичность положительно сказывается на скорости загрузки и работы сайта. P3chat использует очень мало ресурсов. Кроме переписки с клиентом сервис предлагает возможность распределения клиентов по консультантам с учетом квалификации и компетентности каждого из операторов. История общения консультантов с пользователями сохраняется и позволяет быстро определять постоянных клиентов, видя их предыдущие обращения.

Появление виджета на стороне пользователя настраивается по двум параметрам: время, проведенное на сайте и количество просмотренных страниц. Также можно определить конкретные страницы, на которых будет открываться виджет.

У P3chat есть WEB-приложение, а также возможность интеграции с практически любым мессенджером, что изначально являлось предметом особой гордости разработчиков.

Резюме: очень простой онлайн-чат с базовым набором функций и очень скромной ценой – от 260 руб/мес. Кроме цены главным преимуществом P3chat остается поддержка 21 языка и свободная интеграция с большинством мессенджеров.

Zopim

Удобный, гибко настраиваемый онлайн-чат с широкими возможностями. Удовлетворит большинство представителей малого и среднего бизнеса, и, пожалуй, сможет посоревноваться с продуктами-флагманами, такими как Livetex.

Zopim дает возможность настроить распределение нагрузки между пользователями и операторами. Если компания не может позволить себе содержать достаточное количество операторов, а количество пользователей, желающих получить консультацию, зашкаливает, то можно поставить фильтр в виде обязательного указания имени, email`а или авторизации через Facebook. Естественно, чем более свободный доступ к консультациям предоставляется пользователям, тем выше шансы на повышение конверсии, однако подобная система с «фильтрами» позволяет отсеивать мусорные или несущественные обращения, что в некоторых случаях бывает необходимо. Также для ускорения обслуживания пользователю предлагается выбрать тему обращения/отдел.

Сервис собирает полную информацию по всем обратившимся пользователям, причем доступ к ней у любого из консультантов свободный. Операторы могут свободно передавать беседы друг другу и высылать диалоги на email (такая же возможность есть и у пользователя). Пользователи, с которыми велась переписка, заносятся в своего рода базу данных, где консультанты могут оставлять свои заметки и комментарии.

Дизайн виджета (как и WEB-приложения для операторов) – эстетичный и приятный. Настраивается не только внешний вид виджета, но и его наличие/отсутствие на каждой странице ресурса.

Работа операторов контролируется не только обширной и детальной статистикой, но и системой оценок, которые выставляют пользователи по результатам общения с консультантом.

Резюме: крепкий продукт, способный удовлетворить потребности достаточно больших компаний. Как и P3chat является мультиязычным – переводчик интегрирован в чат, что может быть очень важно для компаний, работающих с клиентами из разных стран. Стоимость тарифов Zopim указывается в долларах, самый простой из них стоит $11.20/мес.

Siteheart

Siteheart – продукт, разработанный ПриватБанком. Siteheart включает в себя не только стандартный онлайн-чат для консультаций, но и возможность получать от клиента оплату в процессе разговора. Аккаунт Siteheart связан с банковской картой и благодаря этому пользователя можно не переводить на страницу оплаты, существенно ускоряя процесс покупки.

Функционал Siteheart как онлайн-чата также неплох – есть готовые ответы, настройка автоматических сообщений, а также бот, который пытается анализировать заданный вопрос и подбирать ответ из набора. Работает бот далеко не всегда корректно, но разработчики продолжают совершенствовать алгоритм.

Siteheart доступен в формате плагина для 1С Битрикс, WordPress, Joomla и Dupal. Также есть мобильные версии приложения и расширение для Chrome.

Резюме: любопытный, не похожий на другие онлайн-чаты продукт, от которого, тем не менее, остается ощущение недоработанности. Идеи, заложенные в Siteheart интересны, но не всегда хорошо реализованы, хотя это не мешает многим компаниям использовать этот продукт. Стоимость базового тарифного плана – $6/мес.

GoTalk

Полноценный онлайн-чат с кучей возможностей и оригинальной «фишкой» – настройки внешнего вида виджета не ограничиваются сменой цвета, и при желании логотип GoTalk, иконку и прочие опознавательные знаки сервиса можно заменить на собственные. Благодаря этому GoTalk визуально полностью становится частью сайта.

В сервисе хорошо реализовано хранение истории переписки и информации о пользователях – при повторном обращении оператор видит не только текущую активность клиента, но и то, что он делал и чем интересовался ранее. Есть возможность прямого общения между операторами, передача файлов, разделение консультантов на отделы.

Кроме приложений для Windows, Linux и установки GoTalk в различные CMS, предусмотрена возможность работы с мобильных платформ через Jabber.

Резюме: в GoTalk есть все необходимое для удобного консультирования пользователей. Рабочая лошадка, которая устроит многих владельцев малого и среднего бизнеса. Стоимость GoTalk начинается от 500 руб/мес.

Krible

Последний сервис в нашем обзоре. Krible примечателен в первую очередь удобным совместным браузером. Пользователь может видеть то, что делает консультант, и, наоборот, консультант может видеть все действия пользователя. Такая двусторонняя связь позволяет быстро решать все затруднения, связанные с поиском нужных позиций и работой с сайтом.

Krible снабжен ботом, который собирает информацию о посетителе в то время, когда ни один из операторов не может ответить. Автоматические ответы и готовые сообщения настраиваются.

Консультанты могут пользоваться WEB-приложением и десктопным приложением для Windows. На мобильных платформах Krible работает с помощью Jabber.

Резюме: полнофункциональный сервис с удачным совместным браузером и попытками разработчиков придать Krible «человеческое лицо» с помощью милых мелочей вроде стикеров. Базовый тариф Krible стоит 470 руб.

Выводы

По заявленному функционалу многие онлайн-чаты похожи друг на друга. В этом случае отличия стоит искать в деталях – от банальной скорости и стабильности работы конкретного продукта до наличия своих оригинальных «фишек», которые могут быть полезны. Практически все сервисы онлайн-консультантов предоставляют 14 дней бесплатного использования чата – время более чем достаточное для того, чтобы принять решение об оплате или переходе на другой продукт.

Наибольшую отдачу от онлайн-чата на сайте получает тот, кто сумел выбрать сервис, полностью покрывающий все потребности компании в консультировании клиентов, но при этом не обладающий излишним функционалом, за который приходится переплачивать.

Интересуетесь выбором подходящей CRM? Узнайте, в чем разница между Mango CRM и Amo CRM. Мы провели детальное сравнение двух систем и выявили все плюсы и минусы.

Пишем встраиваемый виджет на нативном javascript и php

Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода — и у тебя уже развернулся блок с комментариями. Еще 2 строчки — и доступна аналитика от гугла или яндекса. Конечно, никакого волшебства при этом не происходит, те самые 3 строчки кода подтягивают с удаленного сервера весь нужный код, и по сути разворачивают небольшое веб-приложение на страницах Вашего сайта. Но как это устроено внутри и как это сделать самому? Разобраться с этим было достаточно интересно, и в итоге у меня получился небольшой виджет, который работает именно по такой простой схеме встраивания и при этом еще выполняют некоторые полезные вещи. Далее подробности.

Зачем нужны виджеты?

Здесь все просто: допустим, у нас есть какой-то неимоверно крутой сервис. Он настолько крут, что мы хотим поделиться нашими возможностями со всем миром (а может, и продать их). Но здесь всплывают несколько моментов. Во-первых, мы не готовы предоставлять открыто наши исходники. Во-вторых, нужна максимально простая схема встраивания нашего функционала в сторонние сайты. В-третьих, мы хотим, чтобы наши пользователи были уверены, что использование нашего сервиса ничем не навредит их сайту.

Для этой цели хорошо подходят iframe-ы. Это фактически отдельные html-страницы, которые встраиваются в другие страницы, при этом не имея доступа к своему «родителю». То есть в iframe можно встроить наше веб-приложение, которое будет спокойно выполнять свою работу, не вмешиваясь в основной сайт. А что именно будет делать Ваш виджет, строить систему комментариев на странице, показывать прикольную игрушку или рисовать интерактивный рекламный баннер — дело исключительно Вашего вкуса и фантазии.

В этой статье на игрушку мы замахиваться не будем, а рассмотрим, как создать встраиваемый виджет для определения погоды. Конечно, для этого есть много различных погодных сервисов, но нам неинтересно воспользоваться готовым решением. Хочется создать простенький виджет своими руками, чтобы понять, как это вообще работает и в дальнейшем применить знания уже для каких-то полезных вещей. Заодно попутно освежим знания в нативном javascript и php.

Что будем делать?

Мы создадим виджет, который рисует форму с прогнозом погоды на завтра. В качестве примера возьмем только температуру, но как увидите дальше, легко можно будет добавить и другие данные. В виджете будет располагаться информация о температуре на завтра, раскрывающийся список с возможностью выбрать город. Кнопка Обновить будет отправлять запрос на сервер, который в свою очередь обращается на сторонний сервис для определения погоды и возвращает нам нужную инфу. Эти данные мы обрабатываем и возвращаем в браузер клиенту. Где уже клиентская часть виджета перехватывает информацию и выводит ее пользователю.

Выглядит это проще, чем звучит — можете сразу посмотреть, что в итоге получится — Демо страницы с виджетом

Здесь мы видим какую-то страницу, где рассказывается, что якобы мы умеем определять погоду. И демонстрируем нашим посетителям формочку, дабы они могли убедиться, что погоду действительно можно узнать прямо здесь.

Я не развлекался с версткой формы, цель статьи не в этом. В реальном мире мы, конечно же, создали бы симпатичную формочку, которая привлекала бы внимание.

Итак, вернемся. Люди узнают погоду, возможно, даже не задумываясь о том, что фактически пользуются другим сервисом. Но все довольны и счастливы, Вы получаете посетителей на свой сайт, клиенты — нужную информацию.

Здесь нужно небольшое уточнение: смысл виджетов в том, чтобы предоставлять уникальный, удобный, интересный функционал. Мы не даем в нашем примере какую-то особенную информацию. Погоду можно узнать где угодно. Но в познавательных целях, так как мы сами пока ничего не умеем делать, возьмем данные по погоде с сервиса Прогноз погоды в России и СНГ. Они любезно предоставляют бесплатный api, коим мы и воспользуемся.

По технологиям

Тоже ничего сложного. Про iframe я уже проговорился. javascript-код будем писать на vanillaJS, без единой дополнительной библиотеки. Даже без jQuery для манипуляции DOM. Наша цель еще состоит и в том, чтобы полученный виджет был максимально легковесным, и ни к чему тащить в браузер пользователя мешок дополнительных библиотек для облегчения своей работы. Поэтому вспомним, как работать с DOM и отправлять ajax-запросы на нативном javascript, и наши клиенты скажут нам спасибо. Серверная часть — пара десятков строк кода на php.

Пишем код. Создаем базовую страницу

Страницу, на которой будет располагаться наш будущий виджет. Напишем там пару строчек текста о том, какие мы классные в плане умения прогнозировать погоду на завтра. Это будет файл index.html — обычная html-страничка. В секции head напишем так:

В секции body вот так:

Что здесь из интересного? В файле css/style.css будем хранить стили для страницы (не для виджета!). И в нужном месте создаем iframe. В атрибуте src iframe-a ставим ссылку на виджет, в нашем случае — https://webdevkin.ru/examples/weather/widget/widget.html. Мы убираем у него границу и возможность скроллинга и задаем руками размеры виджета. Конечно, интереснее создать адаптивный, но до этого доберемся позже.

Стили для страницы, без особых изысков:

Заготовка для виджета

Виджет представляет из себя обычный html-документ. В чем отличие? Первое — мы не будем заморачиваться с лишними мета-тегами, потому как поисковикам наш виджет не нужен. И второе — и стили, и js-код мы напишем прямо в коде html-страницы. Нам это нужно, чтобы сделать загрузку виджета максимально быстрой, а уменьшение числа запросов к веб-серверу в этом нам поможет. Все, что нужно, мы загрузим одним файлом.

В секции head у нас будет такой код:

Рассмотрим эти блоки подробнее.

Разметка для виджета

Здесь обычная форма. Сверху небольшая панель, где мы будем выводить температуру. Дальше select с выбором города. Значения value у городов взяты с сервиса meteoservice.ru, где именно, расскажу позже, в разделе, где будем непосредственно получать данные о погоде. И в конце кнопка Обновить. Верстка у нас будет на классах, айдишники проставлены тем элементам, доступ к которым нужен из кода javascript. Префикс wbd- (от webdevkin) используется для удобства, чтобы не путать разметки виджета и основной страницы.

Стили для виджета

Стили для виджета максимально просты — Вы можете написать их под себя, как угодно. Не забываем, что стили ставим прямо в html-файл виджета в раздел head — style.

javascript-код виджета.

Напишем класс, в котором будут методы инициализации, привязки событий и получения данных с сервера. Не забываем, что код будем писать на нативном js, так как не хотим обременять пользователей лишним грузом библиотек.

Что здесь происходит? Мы создаем модуль на основе замыкания WeatherWidget, внутри оного пишем класс Widget, в прототип которого закидываем нужные методы и возвращаем его из замыкания. Последней строкой мы создаем экземпляр виджета — new WeatherWidget();

Переменная XHR нужна для выполнения ajax-запросов. В конструкторе инициализируем свойство url, по которому будем получать данные о погоде. Также есть объект ui, в котором хранятся 3 поля — те самые элементы DOM, к которым нам нужен доступ из js-кода. Инициализируются они позже, в методе _initUI(). Метод init() вызывает инициализацию ui, привязку событий и обновление данных с сервера (мы же хотим, чтобы при отрисовке виджета пользователь сразу видел погоду без нажатия на Обновить). В _bindHandlers привязывается метод _updateData к клику на кнопку Обновить. Это единственная «интерактивная» часть нашего виджета.

Обратите внимание на конструкцию Widget.prototype._updateData.bind(this). Здесь явным образом привязываем контекст — нам нужно, чтобы в методе _updateData this всегда указывал на экземпляр класса Widget. Сейчас будет видно, зачем — рассмотрим код метода _updateData

Получение данных с сервера, метод _updateData

Обращаю внимание, что в параметры метода передаем свойство e (event). Оно нужно, чтобы сделать preventDefault в самом начале, дабы не перезагрузить наш виджет (иначе сработает submit формы).
Но делаем мы это такой строчкой
e && e.preventDefault();
Эта дополнительная проверка на наличие параметра e нужна, потому что когда мы вызываем this._updateData(), параметр e будет равен undefined, и соответственно e.preventDefault() выкинет исключение.

После этого мы создаем нужные переменные, объект для ajax-запроса, выбранный город и DOM-элемент, в который выводим значение температуры, полученной с сервера. data будет отправляться в ajax-запросе, resp — это ответ от сервера. Дальше мы открываем соединение и отправляем данные на сервер. Дожидаемся ответа 200 от сервера и выводим полученную температуру в span. Условимся, что от сервера приходит json-строка в формате <"code": "success", "temperature": "диапазон температур">. Традиционно обработку ошибок оставлю на Вашу совесть, все делают по-разному. И наконец, нам осталось узнать, как получить данные о погоде с нашего сервера.

Как узнавать погоду?

Как я уже упоминал, мы воспользуемся сайтом meteoservice.ru. Он предоставляет возможность получить xml-файл с данными о погоде по любому гододу СНГ. Например, по этой ссылке доступна погода по Москве. С нашего сервера мы будем запрашивать этот файлик curl-ом, парсить его на нашей стороне, извлекать данные о температуре и возвращать ее обратно в браузер. Каждому городу нужно заранее поставить в соответствие нужный код (37 — Москва), узнать их можно здесь. Как работать с curl, можно узнать в этой статье на webdevkin-е

Рекомендую пользоваться этим сервисом с осторожностью. Когда статья уже почти была готова, неожиданно поменялся формат ответа по запросу о погоде. Отрубился вывод прогноза по времени суток, который я изначально хотел продемонстрировать в виджете. Пришлось частично переписывать код и уменьшать функциональность виджета, что меня не порадовало. Не знаю, как часто происходят у них такие вещи, но пользоваться сервисом в реальном приложении не советую.

Пишем php-код для получения информации о погоде

Как брать данные, уже понятно, алгоритм прост: вытаскиваем из $_POST параметр city — выбранный город, формируем строку вида http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml. Это путь к файлу с погодой. Отправляем на него get-запрос curl-ом. Полученный ответ парсим и вытаскиваем из него нужные параметры: минимальная и максимальная температуры. Полученные числа отдаем в json-объекте обратно в браузер.

Поясню про simplexml_load_string — эта функция создает xml-объект, который мы уже можем парсить. А создается объект из строки xml, которую мы получаем от сервиса погоды.
REPORT->TOWN->FORECAST[0]->TEMPERATURE — это путь по узлам xml, чтобы добраться до нужных значений температуры. Пройдите по ссылке выше (московская погода) и наглядно увидите эти пути.
Если что-то непонятно, спрашивайте в комментариях.

Итого

И на этом все! Мы создали несложный виджет для получения информации о погоде. Главная его особенность в том, что его очень легко встроить на любой сайт, достаточно всего лишь вставить в html-код такие строки

Полагаю, что есть масса вариантов применения таких виджетов, от сбора различной информации до рекламных баннеров. А у Вас есть идеи, где это можно применить? Поделитесь в комментариях!

Добавить комментарий