Веб-чат

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

Что выдаёт раздел

  1. Токен виджета — длинная строка, привязанная к конкретному боту. Через неё сайт «понимает», к какому боту он подключён.
  2. Сниппет — кусок HTML, который нужно вставить на сайт.
  3. Превью — справа на странице сразу же открывается живой виджет, чтобы вы могли с ним поговорить и проверить поведение бота.

Как вставить виджет на сайт

  1. Нажмите Скопировать — сниппет уйдёт в буфер обмена.
  2. На вашем сайте откройте HTML-шаблон и вставьте сниппет перед закрывающим тегом </body>.
  3. Опубликуйте сайт.
  4. Зайдите на страницу — справа внизу должна появиться кнопка чата.

Сниппет выглядит примерно так:

<script src="https://example.com/widget.js"
        data-token="abcd1234…"
        data-api-url="https://example.com"
        async></script>

Опциональные параметры

Эти атрибуты можно добавить в тег <script>, чтобы кастомизировать вид виджета:

Атрибут Что делает
data-title Заголовок панели чата (по умолчанию — имя бота).
data-placeholder Плейсхолдер в поле ввода (по умолчанию — «Введите сообщение…»).
data-welcome Приветственное сообщение для нового посетителя.

Пример:

<script src="https://example.com/widget.js"
        data-token="abcd1234…"
        data-api-url="https://example.com"
        data-title="Чат с Velvet"
        data-welcome="Здравствуйте! Чем можем помочь?"
        async></script>

Перегенерация токена

Кнопка Перегенерировать токен создаёт новый токен и аннулирует старый. Это нужно, например, если:

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

Внимание: после перегенерации старый сниппет перестанет работать. Нужно заменить сниппет на сайте на новый.

Как сообщения попадают в дашборд

Каждый посетитель сайта получает анонимный идентификатор (по cookie). Все его сообщения — это один диалог. В разделе Диалоги такие переписки помечены каналом Веб-чат.

Если бот в режиме Продажи — он квалифицирует клиента так же, как в Telegram, и создаёт лида. Если в режиме Поддержка — создаёт тикет.

CSP и блокировщики

Если на сайте включена жёсткая Content Security Policy, потребуется разрешить:

  • загрузку <script> с домена платформы;
  • подключение по https:// к API платформы.

Если виджет не появляется — откройте DevTools → Console: там будет видна причина.