Чат-бот

Организация может разместить чат-бота Keural на своём сайте. Когда посетитель нажимает кнопку в углу экрана, открывается окно чат-бота. Установка выполняется вставкой на сайт кода установки, созданного на экране администрирования.

Создание чат-ботаКопировать ссылку на раздел

1. Владелец или администратор организации нажимает ＋ Добавить чат-бот в разделе Управление организацией → Чат-боты.
2. Введите название чат-бота и домен по умолчанию (например, https://example.com) и зарегистрируйте его.
3. Откройте чат-бота и настройте три вкладки.

4. Вставьте код установки на свой сайт.

Код установкиКопировать ссылку на раздел

На вкладке Токен и установка скопируйте код для HTML или Next.js. Код состоит из двух частей.

• Загрузчик: создаёт функцию Keural, а после загрузки страницы асинхронно подгружает скрипт чат-бота (/plugin/keural-widget@1.0.1.js). Команды, вызванные до загрузки скрипта, помещаются в очередь и выполняются по порядку.
• Команда запуска: Keural('boot', { token: '…' }). Токен начинается с wgt_.

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

<script id="keural-one-script">
  /* Код, скопированный на вкладке «Токен и установка» */
</script>

В Next.js код добавляется через next/script в виде <Script id="keural-one-script" strategy="afterInteractive">. Чтобы чат-бот отображался на всех страницах, поместите его в корневой layout.

Параметры запускаКопировать ссылку на раздел

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

Keural('boot', {
  token: 'wgt_…',
  theme: 'system',
  header: { enabled: true, extended: true, draggable: true, title: 'Поддержка клиентов', color: '#495BD8' },
  button: { visible: true, iconUrl: 'https://example.com/icon.png', color: '#495BD8', position: 'right', offsetX: 30, offsetY: 30 },
});

Значения по умолчанию для нового чат-бота: отображение и развёртывание заголовка включены, цвет заголовка и кнопки #495BD8, положение справа, смещение 30px, тема system.

Управление страницейКопировать ссылку на раздел

Такие методы, как Keural.open(), работают только после загрузки скрипта. Если их нужно вызвать сразу после открытия страницы, используйте функциональную форму, например Keural('open'): вызовы выполнятся по порядку.

<button onclick="Keural('open')">Связаться с нами</button>

Также можно скрыть стандартную кнопку (button.visible: false) и открывать чат-бота собственной кнопкой на странице.

Размер экранаКопировать ссылку на раздел

Окно чат-бота имеет размер 390×800px. Если ширина экрана не превышает 480px, окно открывается на весь экран. Окно увеличивается кнопкой развёртывания в заголовке.

Домены отображенияКопировать ссылку на раздел

• Чат-бот открывается на страницах, у которых хост совпадает с доменом по умолчанию. Хосты сравниваются вместе с портом, регистр букв не учитывается. Адрес с www. и поддомены считаются другими хостами. Чтобы проверить работу на сервере разработки, создайте отдельного чат-бота, у которого доменом по умолчанию будет этот адрес.
• Домен по умолчанию нельзя изменить после создания. Чтобы его изменить, создайте чат-бота заново.
• Если разрешённые домены в разделе Дополнительно оставить пустыми, чат-бот открывается на всех страницах домена по умолчанию. Если разрешённые домены указаны, чат-бот открывается только на страницах, адреса которых начинаются с них. Если указан путь, например https://example.com/help, область сужается до страниц под этим путём. Разрешённые домены начинаются с http:// или https://, их можно указать до 5.
• Токен из кода установки виден на странице. Подключайте к чат-боту только то содержимое, которое можно сделать публичным.

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

Если на сайте применяется Content-Security-Policy, разрешите следующее. Адреса указаны для keural.ai.