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

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

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

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

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

1. Создание источника типа «Живой чат»

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

В открывшемся окне выберите тип источника:

• «API источник» — bearer-токен и вебхук, для интеграции внешних систем через REST API.
• «Живой чат» — публичный ключ для JS-виджета, для встраивания на сторонний сайт.

Выберите «Живой чат» — источник будет создан, и вы автоматически попадёте на страницу его настроек.

2. Настройка источника и генерация ключа

На странице источника:

1. При желании поправьте поле «Название источника» — оно используется только для отображения в списке источников.
2. Заполните «Разрешённые домены» — по одному домену на строку (например, example.com или *.example.com для всех поддоменов). Если оставить поле пустым, ключ будет работать с любого сайта — на боевом сайте рекомендуется указать домен явно.
3. Нажмите «Сгенерировать ключ». Публичный ключ (вида pub_xxxxxxxx…) будет выпущен и показан на экране один раз — скопируйте его сразу. Если ключ был скомпрометирован или потерян, его можно перевыпустить — старый ключ при этом перестанет работать.

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

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

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

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

Атрибут	Обязательный	Назначение
src	да	адрес скрипта виджета: https://{домен тех поддержки}/widget/widget.js
data-domain	да	адрес вашей копии бота (без /widget/widget.js на конце)
data-key	да	публичный ключ, полученный на шаге 2
data-greeting	нет	приветственный текст в виджете (по умолчанию — «Напишите нам, мы онлайн!»)
data-manager	нет	имя, под которым в виджете подписаны ответы (по умолчанию — «Поддержка»)

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

Ограничения текущей версии

• История переписки хранится в браузере посетителя (localStorage) и не привязана к аккаунту — при очистке данных сайта или переходе с другого устройства/браузера история недоступна.
• Идентификатор диалога не подписан (без HMAC-подписи) — это принятый риск текущей версии.