Встраивание веб-виджета

Один тег script — и агент работает на любом сайте: плавающая кнопка, окно и полноэкранный режим уже включены.

Простое встраивание

<script src="https://chat.agent4.io/ui/embed.js"
        data-token="YOUR_SHARE_TOKEN" async></script>

Загрузчик добавляет плавающую кнопку чата в правом нижнем углу; по нажатию она разворачивается в окно или на весь экран. Виджет открывается в iframe с домена платформы, поэтому настраивать CORS на своей стороне не требуется.

Параметры

Атрибут	Назначение
`data-token`	Обязательный. Токен публикации, выданный в консоли.
`data-color`	Акцентный цвет шапки виджета и кнопки.
`data-position="left"`	Переносит кнопку в левый нижний угол.

Горячая клавиша Ctrl/⌘ + Shift + F переключает режимы по кругу: кнопка → окно → полный экран.

Командная палитра (строка Ask)

Предпочитаете современный паттерн «Ask a question», который встречается на сайтах документации? Замените embed.js на ask.js — та же одна строка скрипта, без других изменений:

<script src="https://chat.agent4.io/ui/ask.js"
        data-token="YOUR_SHARE_TOKEN" async></script>

Это добавляет узкую строку Ask a question внизу страницы. По клику на неё — или по нажатию ⌘K / Ctrl+K в любом месте — она раскрывается в центрированную командную палитру поверх затемнённого фона; Esc или клик снаружи закрывает её. Строка — не статичная надпись: она по буквам печатает, одну за другой, вопросы, которые ваши посетители чаще всего задают на этой странице (взятые из тех же сценариев страниц, что питают предлагаемые вопросы у кнопки).

Параметр	Действие
`data-token`	Обязательно. Токен ресурса из консоли.
`data-color`	Акцентный цвет.
`data-position`	`bottom-center` (по умолчанию), `bottom-right` или `bottom-left`.

За палитрой стоит тот же самый агент, тот же поиск и та же аутентификация, что и у кнопки — включая режим host-session ниже — поэтому всё остальное на этой странице применимо без изменений. Выбирайте кнопку или строку Ask для каждого ресурса в консоли (Встраивание на сайт → Чат-кнопка / Строка Ask).

Список разрешенных доменов

У каждой публикации есть список allowed_domains. Платформа применяет его через CSP-директиву frame-ancestors, так что виджет отрисуется только на перечисленных вами сайтах. Список задается в настройках публикации в консоли.

Режимы аутентификации

Публикация работает в одном из трех режимов:

Анонимный — посетитель начинает диалог без учетной записи, каждому браузеру выделяется отдельное пространство.
Вход в учетную запись — посетитель входит под учетной записью конечного пользователя платформы, и переписка вместе с памятью сохраняется на всех его устройствах.
Сессия на стороне сайта (HMAC) — ваш бэкенд сам сообщает виджету, кто именно пришел, поэтому уже авторизованные пользователи не проходят вход повторно:

<script src="https://chat.agent4.io/ui/embed.js"
        data-token="YOUR_SHARE_TOKEN"
        data-uid="user-42"
        data-ts="1767139200"
        data-sig="HMAC_SHA256(secret, uid + ts)"
        async></script>

Значение data-sig вычисляет ваш сервер, используя секрет подписи публикации. Платформа проверяет подпись и связывает user-42 с постоянной личностью конечного пользователя.

Отдельная страница

Любая публикация доступна и как полноценная страница по адресу https://chat.agent4.io/s/YOUR_SHARE_TOKEN. Это удобно для QR-кодов, ссылок в письмах и рекламных посадочных страниц — то есть там, где сайт вам не подконтролен.

Проверки самого ответа

Сценарии для страниц