webdonsk.ruКак сделать чат виджет
Добавил пользователь Алексей Ф. Обновлено: 04.09.2024
Хотите более близкого общения с будущими клиентами и нынешними заказчиками?
Знаете ли вы, что с помощью мессенджера Facebook на ваш сайт можно встроить виджет живого чата с клиентами?
Плагин чата даёт возможность переписываться с посетителями сайта.
Из этой статьи вы узнаете, как добавить виджет чата мессенджера Facebook на сайт.
Для чего вашему веб-сайту нужен чат с клиентами?
Живой чат с клиентами – это небольшая всплывающая иконка, которая обычно появляется в нижнем правом углу сайта. Вы можете установить плагин чата с клиентами на ваш веб-сайт, как обычное программное обеспечение для живого чата.
Facebook не берёт денег за установку виджета чата. Вам даже не нужно иметь бота в мессенджере. Единственное требование – иметь страницу в Facebook.
Прежде чем мы начнём разговор об установке живого чата с помощью сервисов ManyChat и Chatfuel, давайте взглянем на причины, зачем вам нужен живой чат на сайте.
Улучшайте обслуживание клиентов
Согласно данным Facebook, 53% людей скорее купят что-то у компании, к которой они смогут обратиться напрямую. Если рассматривать обычный живой чат, то вы сможете общаться только на конкретном сайте. А с чатом мессенджера вы можете начать диалог на ПК, а затем позже продолжить его на мобильном устройстве с установленным мессенджером.
Давайте мгновенные автоматизированные ответы
Виджет чата в мессенджере позволяет посетителям задавать вопросы прямо на вашем сайте. И вы можете общаться с потенциальным клиентами в режиме реального времени.
Если у вас нет службы поддержки клиентов, работающей круглосуточно и отвечающей на вопросы, создайте бота в мессенджере, чтобы усилить действие чата и отвечать на типичные часто возникающие вопросы.
Чтобы лучше конвертировать посетителей в лиды, вы можете дать людям выбор – подписаться на рассылку через мессенджер или по email, дать ссылку на скачивание руководства или дать ссылки на дополнительный полезный контент, пока они ждут ответа от человека.
Теперь давайте посмотрим, как установить чат с помощью сервисов Chatfuel и ManyChat.
1. Установите чат на ваш сайт с помощью сервиса Chatfuel
Даже если это необязательно, будет лучше, если бот пошлёт приветствие пользователю, когда тот начинает переписку в чате мессенджера.
Во всплывающем окне кликните Live Chat (Живой чат), чтобы добавить плагин чата в реальном времени.
Этот плагин временно отключит функцию искусственного интеллекта вашего бота, когда вы сами будете беседовать с человеком. Если в чате откроется новый диалог, вы получите всплывающее уведомление от бота.
Теперь кликните по иконке Link (Ссылка) наверху страницы, рядом с заголовком блока.
Кликните по вкладке Grow (Развитие) в левом сайдбаре. На панели инструментов Growth Tools (Инструменты развития) найдите надпись Customer Chat Plugin for Your Website (Плагин чата с клиентами для веб-сайта) и кликните Enable (Включить) внизу.
Во всплывающем окне введите URL сайта, на котором вы планируете установить плагин чата. Затем введите параметр ref, который вы задали ранее.
Когда пользователь начинает живой диалог с помощью плагина чата, ваш бот отправит пользователям блок текста.
Код для плагина чата автоматически генерируется, так что кликните Copy (Копировать), чтобы скопировать код в буфер обмена. Затем вы вставите этот код в раздел Header (заголовок) вашего сайта на WordPress. Читайте раздел 3 ниже, чтобы узнать, как это сделать.
Продвинутый приём: персонализируйте виджет чата
Знаете ли вы, что можно добавить несколько строк к этому коду, чтобы усовершенствовать виджет чата? Вот как будет выглядеть чат, который вы только что создали:
Добавив несколько строк кода, вы сможете персонализировать плагин чата, а именно:
- Изменить цвет темы, чтобы он сочетался с цветами вашего бренда.
- Показывать различные приветствия людям, зашедшим вFacebook, и тем, кто не залогинен в аккаунте.
Чтобы сделать это, вставьте код, сгенерированный Chatfuel, в Блокнот или текстовый редактор. Поищите фрагмент кода, выделенный жёлтым цветом ниже.
В пределах этого фрагмента добавьте три строки, выделенные жирным шрифтом ниже:
Виджет чата тогда выглядел бы так:
2. Установите чат на ваш веб-сайт, используя сервис ManyChat
Для того чтобы установить чат при помощи ManyChat, зайдите в сервис и кликните на вкладку Growth Tools (Инструменты развития) в левом сайдбаре. Если вы никогда не пользовались этим инструментом, посмотрите видео, чтобы подробнее узнать, как зарегистрироваться и создать простого бота в ManyChat (на англ. яз.).
Затем кликните на кнопку New Growth Tool (Новый инструмент развития) наверху страницы.
В открывшемся окне кликните Customer Chat (Чат с клиентами).
Чтобы всё хорошо смотрелось, переименуйте этот инструмент в Live Chat (Живой чат) и нажмите на голубую кнопку Save (Сохранить).
Кликните Publish (Опубликовать) наверху страницы, а затем кликните Live Chat (Живой чат), чтобы вернуться назад в инструменты развития.
Теперь кликните голубую кнопку Next (Следующий) и решите, в какой области экрана вы хотите отображать окно с чатом. Оставьте эти поля пустыми, если хотите, чтобы виджет чата появлялся на каждой странице вашего сайта.
Далее выберите, должен ли отображаться виджет чата на мобильном устройстве и/или ПК. Также выберите как виджет чата должен отображаться, когда пользователь видит его впервые на вашем веб-сайте.
Теперь, когда вы задали настройки, переключите виджет из режима Draft (Черновик) в режим Active (Активный) в правом верхнем углу страницы.
Чтобы установить виджет чата на сайт, кликните по кнопке Install JavaScript Snippet (Установить сниппет JavaScript).
Введите URL веб-сайта, где вы будете устанавливать плагин чата и кликните Add (Добавить), затем кликните Next (Следующий).
3. Разместите код на вашем сайте WordPress
После того как вы настроили всё в чате с помощью Chatfuel или ManyChat, остался последний шаг. Разместите код на вашем сайте. Если вы используете WordPress, зайдите в Консоль и кликните по вкладке Плагины слева в меню.
Затем кликните по кнопке Add New (Добавить новый) наверху страницы.
В окне поиска найдите бесплатный плагин Insert Headers and Footers.
Кликните по кнопке установки плагина, затем кликните ещё раз, чтобы активировать плагин.
Из левого сайдбара кликните Settings (Настройки) и выберите Insert Headers and Footers (Вставить заголовки и подвалы).
И наконец, вставьте код чата в раздел заголовка и нажмите Save (Сохранить).
Если вы обновите страницу, то увидите, что на вашем сайте появился чат мессенджера.
Совет: если вы используете сервис для создания лендингов Leadpages, следуйте вот этим шагам, чтобы встроить виджет:
- Добавьте URL страницы, свёрстанной в Leadpages, в список разрешённых сайтов (ManyChat) или доменов веб-сайта (Chatfuel).
- Затем вставьте код HTML в окно кода отслеживания в разделе заголовка в Leadpages.
Другие полезные ресурсы
Чат с клиентами в приложении Chatfuel
Если вы создаёте чат-бота при помощи Chatfuel, вы также можете быстро установить виджет чата на ваш сайт в WordPress с помощью плагина Chatfuel Customer Chat plugin.
Chatfuel и Master of Code (разработчик чат-ботов для компаний, подобных World Surfing League, Online News Association, и других международных брендов) разработали этот плагин. Вы можете скачать его бесплатно и посмотреть инструкцию по установке на сайте WordPress (на англ. яз.).
Если вы пользуетесь сервисом ManyChat, вы также можете отвечать пользователям из вкладки Live Chat. У ManyChat нет приложения, но страница сервиса с живым чатом прекрасно отображается на мобильных устройствах.
Документация плагина Customer Chat Plugin
Чтобы узнать больше подробностей о настройках в плагине чата (если вы продвинуты в технических вопросах), почитайте официальную документацию Facebook .
Заключение
Предлагая посетителям веб-сайта удобный способ диалога с вашей компанией через живой чат в мессенджере, вы сможете:
- Быстро реагировать на любые проблемы с вашим продуктом или сервисом.
- Отвечать на вопросы от потенциальных покупателей и клиентов.
- Давать посетителям полезную и нужную информацию.
Что вы думаете об этой теме? У вас уже есть чат-бот? Вы собираетесь установить себе на сайт плагин чата? Поделитесь вашими мыслями в комментариях ниже.
ОБ АВТОРЕ
Дана Тран – это коуч в сфере цифровых технологий. Она специализируется на обучении предпринимателей тому, как создавать чат-ботов без знания программирования.
Здравствуйте. Меня зовут Андрей.
Летом прошлого года я опубликовал проект и статью "Чат-помощник на сайт с помощью Telegram за 15 минут". Идея проекта заключалась в том, чтобы реализовать на сайте всплывающий Чат-помощник, бэкэндом для которого (для чата) был бы набирающий популярность мессенджер Telegram.
На удивление проект довольно быстро стал набирать звезды на GitHub, а я — получать письма благодарности и просьбы о помощи в настройке от людей со всего света. Люди не могли запустить скрипт на своих хостингах: то set_time_limit(0) не поддерживается, то 503 ошибка, то пути не правильно указаны.
Вторая версия скрипта устанавливается намного проще и работает на основе WebHooks.
>>>> Ссылка на репозиторий GitHub.
В двух словах, что это такое
Что нового
Теперь чат работает на основе WebHooks
Для тех, кто не хочет искать, команды для терминала:
Для установки используется всего один файл.
В репозитории лежит всего один файл: telegram-site-helper-install.php — это инсталлятор. Он создаст нужные директории, распакует JS, CSS и два PHP файла.
Здесь же вы сможете сгенерировать JS код чата, который нужно будет вставить на странцу сайта.
Поскольку для многих владельцев сайтов на Wordpress/Joomla, base64 ассоциируется с вирусными инъекциям — заранее приглашаю всех параноиков опасающихся изучить содержимое скриптов, закодированных в base64 (например с помощью этой утилиты).
Всплывающий и встроенный чаты, стилизация
Передача файлов
Теперь клиент и менеджер могут обмениваться файлами (фото и документами). Файлы хранятся на сервере Telegram и не занимают место на Вашем хостинге.
JQuery больше не обязательна
В прошлый раз меня ругали, мол надо тянуть JQuery для работы небольшого скрипта. Я все осознал и в этот раз написал все на чистом JavaScript.
Работает через Server Side Events либо LongPoll
Чат на сайте теперь может получать обновления от вашего сервера не только с помощью Long Poll запросов, но и с помощью Server Side Event трансляции (она будет работать только на хостингах, где поддерживается set_time_limit(0) и нет проблем с функцией flush())
Как установить
Планы на будущее
В конце статьи выражаю благодарность команде Telegram за платформу для Ботов. Крайне полезная вещь.
Спасибо.
UPD! Забыл добавить, что после установки, стоит удалить инсталлятор с сервера и настроить права доступа к папке.
Большое спасибо за оперативные Pull Request`ы и критику кода. Ищу силы и время на доработки.
В этой статье мы пошагово создадим виджет обратного звонка с красивой минималистичной анимацией и отправкой уведомлений на почту, на свой номер телефона и в мессенджер Telegram через бота. Виджет подойдет абсолютно для любого сайта на HTML или на любой CMS.
Демонстрацию можно посмотреть по ссылке.
Зачем нужен callback-виджет?
Есть масса сервисов, которые предоставляют различные настраиваемые виджеты обратного звонка — с возможностью подключить АТС, интегрировать с CRM (amoCRM, Битрикс24), с оповещением в Telegram, по СМС и так далее. За такой богатый функционал нужно платить ежемесячно, покупать минуты или выбирать тариф по карману. Стоимость подобных виджетов стартует примерно от 200 рублей в месяц.
Используя виджет, о котором мы поговорим в этой статье, вы получите навечно бесплатное, независимое и настраиваемое под любые нужды решение — с возможностью отправки заявки на почту, в Telegram и по СМС. Также с помощью вебхуков можно подключить отправку данных в CRM (если есть такая возможность на стороне самой CRM).
Итак, приступим к созданию виджета.
Разметка HTML + CSS
Если у вас одностраничный сайт или несколько страниц на HTML, измените расширение файла с .html на .php. Если устанавливаете на CMS , то все в порядке.
Теперь добавим небольшой скрипт открытия формы по клику на кнопку. Для этого нам понадобится подключить библиотеку jQuery и написать небольшой скрипт отправки. Если у вас уже подключена библиотека, то этого делать не стоит.
Далее оформим все с помощью CSS. Вы можете добавить этот код в свой файл стилей или создать новый.
В конце статьи прилагается файл на javascript реализующий простой чат, его достаточно вставить в html код страницы, и чат готов. Вся серверная сторона уже реализована.
Готовый движок чата на JavaScript для любого сайта.
Встраиваем чат в html вашего сайта.
В данной статье рассмотрели публичный чат без регистрации.
Если вам нужен чат для личного общения пользователей между собой (общение в диалогах один на один) то вам больше подойдёт чат плагин личной переписки между пользователями
Если вы не собираетесь сами разрабатывать уникальный чат с каким-то необычным функционалом, а хотите просто вставить на свой сайт готовый виджет чата то рекомендуем вам ознакомится с сервисом чатов, позволяющим всё сделать без программирования.
Чтоб в ваш чат писали люди только с вашего сайта вам надо зарегистрироваться и в настройки чата передать полученый после регистрации dev_id
Читайте также: