Встроенный чат

Отображайте виджет чата встроенным на странице вместо всплывающей кнопки

Все тарифы

Обзор

По умолчанию виджет чата Asyntai отображается как плавающий пузырёк в углу сайта. С помощью встроенного чата можно также разместить чат прямо на странице — например, в разделе «Напишите нам» на главной странице.

Плавающий пузырёк по-прежнему работает вместе со встроенным чатом. Посетители, которые не долистали до встроенного раздела, всё равно могут воспользоваться пузырьком. Оба варианта используют одну и ту же переписку.

Как это работает

Добавьте один тег скрипта Разместите это там, где хотите, чтобы чат отображался в вашем HTML

Чат отображается встроенно Виджет отображается на этой позиции, всегда виден, того же размера, что и обычный чат

Пузырь остаётся активным Плавающий пузырёк остаётся в углу для посетителей, которые не видят встроенный чат

Общий разговор Сообщения синхронизируются между встроенным чатом и плавающим виджетом в реальном времени

Настройка

Добавьте эту единственную строку HTML туда, где хотите разместить чат на странице:

<script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Замените YOUR_WIDGET_ID на ваш идентификатор виджета. Код для встраивания с заполненным идентификатором можно найти на странице настройки встроенного чата.

Примечание: Основной скрипт chat-widget.js также должен быть на странице. Если вы уже установили виджет Asyntai на свой сайт, это уже сделано.

Пример

Вот как можно использовать это на главной странице:

<section style="max-width: 500px; margin: 0 auto;">
    <h2>Chat with us</h2>
    <p>Ask us anything — our AI assistant is here to help.</p>

    <!-- The chat will appear right here -->
    <script src="https://asyntai.com/static/js/chat-embed.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</section>

Подробности

Размеры

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

Поведение плавающего пузыря

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

Синхронизация сообщений

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

Несколько страниц

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

Живой предпросмотр

Вот встроенный чат в реальном времени, чтобы вы могли увидеть, как он выглядит:

Требования

Основной виджет чата Asyntai (chat-widget.js) должен быть установлен на странице

Работает на всех тарифах — обновление не требуется

Совместимо со всеми браузерами с поддержкой Shadow DOM (все современные браузеры)

Совет: Сначала протестируйте встроенный чат на тестовой странице. Убедитесь, что он корректно отображается в макете страницы перед выводом в продакшен.

Документация