Встроенный чат: встраивание и Настройки
Встроенный чат
Встроенный чат (<web-chat-agent-inline>) отображается внутри макета страницы, а не поверх нее. Используйте его для справочного центра, консультанта по продуктам, внутреннего портала или полностраничного ассистента.
Откройте Панель управления → ваш ассистент → Каналы → Встроенный чат. У канала есть собственный код установки, настройки и предпросмотр. Он может работать на том же сайте, что и плавающий виджет чата, с другим заголовком, приветственным контентом, высотой, подсказками и оформлением.
Установите встроенный чат
Разверните Показать сведения об установке и скопируйте готовый код. Формат для ручной установки:
<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
Разместите элемент точно в том месте, где должен появиться чат, и подключите скрипт один раз на странице. Элемент заполняет родительский контейнер, поэтому ширина определяется вашим макетом:
<div style="max-width: 720px; margin: 0 auto;">
<web-chat-agent-inline chatbot-id="YOUR_CHATBOT_ID"></web-chat-agent-inline>
</div>
Используйте код, скопированный из панели управления, чтобы избежать опечаток в ID чат-бота. Панель установки также позволяет проверить, загружается ли этот ассистент на разрешенном домене.
Внешний вид
| Настройка | Что изменяет |
|---|---|
| Title | Заголовок на начальном экране. Оставьте пустым, чтобы скрыть заголовок. |
| Основной цвет | Акцентный цвет для кнопок и сообщений посетителя. |
| Семейство шрифтов | Шрифт виджета. Выберите в поиске Google Fonts или укажите название своего шрифта. |
| Высота | Высота контейнера чата в виде CSS единицы измерения, например 600px, 80vh или 100%. |
| Приветственное сообщение | Контент, который отображается до первого сообщения посетителя. |
Предпросмотр обновляется с учетом этих настроек. Отправка сообщения в предпросмотре обращается к реальному ассистенту и расходует стандартную квоту сообщений.
Изображения
Добавьте необязательное Приветственное изображение с помощью загрузки или по URL. Оно отображается на начальном экране над приветственным сообщением. Используйте оптимизированный логотип или баннер и проверьте результат при минимальной ширине контейнера на вашем сайте.
Контент и поведение
| Настройка | Что изменяет |
|---|---|
| Приветственное сообщение | Вводный текст с форматированием над полем ввода до первого сообщения. |
| Показывать источники | Добавляет ссылки на доступные источники к ответам. |
| Пометка ИИ под ответами бота | Отмечает каждый ответ ассистента как созданный искусственным интеллектом. Всегда включено. |
| Автоматический перевод | Переводит элементы интерфейса на определенный язык посетителя. |
| Загрузка файлов | Позволяет посетителям прикреплять файлы, если это предусмотрено тарифом. |
| Кнопки подсказок | Стартовые вопросы на начальном экране, также называемые предложенными вопросами или подсказками для начала диалога. Каждый элемент содержит отображаемый заголовок и отправляемое сообщение ассистенту. До 10 элементов. |
Кнопки подсказок можно сгенерировать с помощью ИИ или добавить вручную. Не делайте список слишком длинным и используйте вопросы, демонстрирующие реальные знания ассистента.
Дополнительно
| Настройка | Что изменяет |
|---|---|
| Источник определения языка | Использует язык браузера или атрибут <html lang> страницы для автоматического перевода. |
| Скрыть брендинг | Удаляет ссылку «Powered by», если это разрешено тарифом. |
| Пользовательский CSS | Внедряет CSS во встроенный виджет с использованием документированных стабильных селекторов. |
Редактор CSS содержит готовые шаблоны, справочник стабильных селекторов, счетчик символов и предпросмотр. См. Пользовательский CSS.
Необязательные атрибуты контекста
Встроенный элемент принимает атрибуты tracking-consent и context-data в дополнение к chatbot-id. Данные контекста позволяют передавать неконфиденциальную информацию о сессии со страницы встраивания:
<web-chat-agent-inline
chatbot-id="YOUR_CHATBOT_ID"
context-data="Customer=Jane Doe;OrderID=A-1023"
></web-chat-agent-inline>
ИИ может использовать эти значения в ответах и разрешенных вызовах инструментов. Не помещайте в HTML атрибуты секреты, учетные данные или информацию, к которой у текущего посетителя нет доступа. См. Данные контекста сессии для ознакомления с форматами, ограничениями и событием среды выполнения.
Плавающий или встроенный
| Виджет чата | Встроенный чат | |
|---|---|---|
| Размещение | Фиксированная плавающая кнопка и оверлей | Внутри макета страницы |
| Элемент | <web-chat-agent> | <web-chat-agent-inline> |
| Скрипт | /widget/web-chat-agent.js | /widget/chat-widget-inline.js |
| Облачко сообщения и проактивные триггеры | Да | Нет |
| Action Bar и формы | Да | Нет |
| Переключение на живой чат | Да | Нет |
| Настройки | Каналы → Виджет чата | Каналы → Встроенный чат |
Проверка перед публикацией
- Сохраните настройки встроенного чата.
- Отправьте один вопрос по базе знаний в окне предпросмотра.
- Откройте реальную страницу и проверьте высоту, прокрутку, загрузку шрифтов, источники и кнопки подсказок.
- Проверьте отображение в самом узком мобильном контейнере.
- Если установлены оба типа виджетов, убедитесь, что они используют независимые настройки.