Skip to content

Виджет живого чата

В этой инструкции описано, как подключить виджет живого чата от TG Support Bot к вашему сайту.

Как работает живой чат

  • На сайте отображается виджет живого чата.
  • При отправке первого сообщения для пользователя генерируется уникальный ключ, который сохраняется в сессии.
  • Сообщения из виджета поступают в Telegram и в админку, где под каждого пользователя создаётся отдельная чат-тема.
  • Менеджеры отвечают в этой теме — ответ мгновенно появляется в виджете на сайте.

История сообщений хранится в течение времени жизни сессии на стороне клиента.

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

1. Подключение к контейнеру

Переходим в раздел "API и вебхуки" и нажимаем на кнопку "Добавить источник".

После нажатия на кнопку сгенерируется API ключ. Здесь необходимо сделать следующее:

  • поправить название в поле "Название источника".
  • сгенерировать "Публичный ключ виджета". Для работы живого чата используется публичный ключ.

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

2. Добавление виджета на сайт

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

js
<script
  src="https://{домен тех поддержки}/widget/widget.js"
  data-domain="https://{домен тех поддержки}"
  data-key="pub_xxxxxxxx"
  data-greeting="Напишите нам, мы онлайн!"
  data-manager="Поддержка"
  defer
></script>

После подключения виджет живого чата появится на странице.

Выпущено под лицензией MIT. Сайт разработал Илья Лящук.