Website Chat Widget
Встройте AI-виджет чата прямо на ваш сайт. Посетители получают мгновенные ответы от вашего AI-агента, не покидая сайт.
Обзор
Website Widget предоставляет:
- Плавающую кнопку чата на вашем сайте
- Потоковые AI-ответы в реальном времени
- Настраиваемый внешний вид (цвета, положение, сообщения)
- Менее 11 КБ в сжатом виде — практически нулевое влияние на производительность
- Ограничение по доменам для безопасности
Предварительные требования
- Активный AI-агент в панели администратора
- Доступ к HTML-коду вашего сайта (для вставки тега script)
Шаги настройки
1. Создание виджета
- Перейдите в Integrations в боковой панели
- Прокрутите до раздела Website Widget
- Нажмите Create Widget
- Введите имя и выберите AI-агента
- Нажмите Create
2. Настройка внешнего вида
Нажмите на карточку виджета, чтобы открыть панель редактирования:
- Primary Color — Цвет кнопки чата и заголовка
- Text Color — Цвет текста на кнопке и в заголовке
- Position — Внизу справа или внизу слева
- Welcome Message — Первое сообщение, которое видят посетители
- Suggested Questions — До 4 кликабельных вопросов для начала разговора
- Avatar URL — Пользовательское изображение в заголовке чата
- Border Radius — Скругление углов
Предварительный просмотр обновляется в реальном времени при внесении изменений.
3. Настройка разрешённых доменов (рекомендуется)
Ограничьте, какие сайты могут встраивать ваш виджет:
- Оставьте пустым, чтобы разрешить все домены (по умолчанию)
- Добавьте конкретные домены:
example.com,*.example.com - Используйте записи с портами для разработки:
localhost:3000
4. Встраивание на ваш сайт
Нажмите иконку встраивания на карточке виджета и скопируйте код:
<script src="https://core-api.cuneiform.chat/api/widget/widget.js"
data-widget-id="your-widget-id" async></script>Вставьте перед закрывающим тегом </body> на вашем сайте.
Как это работает
Посетитель открывает ваш сайт
→ Кнопка чата появляется в углу
→ Посетитель нажимает → Панель чата открывается
→ Отображаются приветственное сообщение + предложенные вопросы
→ Посетитель вводит вопрос
→ AI-агент ищет по вашему контенту
→ Ответ передаётся в реальном времениСообщения обрабатываются в реальном времени. Агент ищет по вашему контенту и генерирует ответы, используя тот же AI-конвейер, что и все остальные каналы.
Возможности
Потоковые ответы
Ответы передаются в реальном времени с помощью Server-Sent Events (SSE). Посетители видят, как ответ появляется постепенно, аналогично ChatGPT.
Сохранение сессии
Вернувшиеся посетители в том же браузере продолжают предыдущий разговор в течение 24 часов. Сессии хранятся в localStorage браузера.
Предложенные вопросы
Настройте до 4 кликабельных вопросов, которые отображаются при открытии чата. Отличный способ направить посетителей к популярным темам.
Виджет работает внутри Shadow DOM, поэтому он не будет конфликтовать со стилями и JavaScript вашего сайта.
Рендеринг Markdown
Ответы агента поддерживают форматирование Markdown, включая жирный шрифт, курсив, списки, блоки кода и ссылки.
Управление виджетами
На странице Integrations каждая карточка виджета отображает:
- Имя виджета и статус
- Назначенный агент
- Действия: редактирование, код встраивания и удаление
| Действие | Как выполнить |
|---|---|
| Изменить настройки | Нажмите на карточку виджета |
| Получить код встраивания | Нажмите иконку встраивания |
| Удалить | Меню с тремя точками → Delete |
Безопасность
- Изоляция Shadow DOM — Виджет изолирован от вашей страницы
- HMAC session tokens — Подписанные токены с 24-часовым сроком действия
- Ограничение по доменам — Ограничьте, какие сайты могут встраивать ваш виджет
- Ограничение частоты запросов — 30 сообщений в минуту на сессию
- Нет доступа к данным — Виджет не может читать или изменять содержимое вашей страницы
Устранение неполадок
Виджет не отображается
- Убедитесь, что тег script находится перед
</body>, а не в<head> - Проверьте, что
data-widget-idсовпадает с вашей панелью администратора - Если настроено ограничение по доменам, убедитесь, что ваш домен указан в списке
- Проверьте консоль браузера на наличие ошибок
Виджет не отвечает
- Убедитесь, что назначенный агент имеет статус Active
- Убедитесь, что у агента есть документы в его контенте
- Проверьте вкладку Network в браузере на наличие неудачных API-запросов
Проблемы с внешним видом
Виджет использует изоляцию Shadow DOM. CSS вашей страницы не влияет на виджет. Используйте предварительный просмотр в панели редактирования для настройки внешнего вида.
FAQ
Можно ли встроить виджет на несколько страниц?
Да. Используйте один и тот же код встраивания на каждой странице. Виджет разделяет состояние сессии между страницами одного домена.
Работает ли он на мобильных устройствах?
Да. Виджет полностью адаптивен и оптимизирован для мобильных браузеров.
Можно ли убрать значок “Powered by”?
Значок обязателен на планах Trial и Starter. Перейдите на план Plus или выше, чтобы его убрать.
Работает ли он с React/Next.js/Vue?
Да. Виджет загружается как отдельный скрипт и работает с любым фреймворком, включая одностраничные приложения.
Какой лимит длины сообщения?
4 000 символов на сообщение.