Настройки и установка виджета чата
Chat widget
Откройте Панель управления → ваш ассистент → Каналы → Виджет чата. Здесь вы можете установить и настроить плавающий виджет для сайта. Отдельной вкладки Интеграция или Интеграция виджета нет.
Установка виджета
Разверните Показать сведения об установке над областью настройки. Панель содержит:
- готовый к использованию HTML с уже подставленным вашим ID чат-бота,
- действия Скопировать код и Добавить на сайт,
- Проверить установку для проверки того, что виджет загружается на разрешенном домене,
- инструкции по настройке для WordPress, Shopify, Wix, Squarespace и Webflow.
Когда WebChatAgent обнаруживает виджет, панель показывает домен, на котором загружается этот ассистент. Ошибка проверки обычно означает, что код отсутствует, страница все еще отдает старую кэшированную версию или домен не указан в Настройки → Разрешённые сайты.
См. Руководство по встраиванию на сайт по размещению и Руководство для разработчиков по виджету по HTML-атрибутам и событиям во время выполнения.
Внешний вид и содержимое
Эта вкладка объединяет визуальное оформление, изображения и контент, отображаемый до начала диалога.
Основные настройки
| Настройка | Что изменяет |
|---|---|
| Тема виджета | Общий дизайн виджета. |
| Ширина / Высота | Необязательные размеры в пикселях. Оставьте достаточно места для сообщений, источников, форм и мобильной клавиатуры. |
| Заголовок чата | Текст в шапке виджета. |
| Семейство шрифтов | Шрифт внутри виджета. Выберите в Google Fonts или укажите собственное название шрифта. |
Цвета
| Настройка | К чему применяется |
|---|---|
| Основной цвет / Цвет текста темы | Фон и текст шапки |
| Цвет сообщения бота / Цвет текста | Пузыри сообщений ассистента |
| Цвет сообщения пользователя / Цвет текста | Пузыри сообщений посетителя |
| Цвет кнопки чата / Цвет иконки | Плавающая кнопка запуска |
Редактор проверяет контрастность текста и предупреждает, если пара передний план/фон ниже рекомендуемого соотношения WCAG. Устраните эти предупреждения перед публикацией.
Кнопка чата
Выберите содержимое закрытой кнопки без написания CSS:
| Настройка | Что изменяет |
|---|---|
| Иконка / Собственное изображение | Переключает встроенную иконку и загруженное изображение. При смене режима загрузка сохраняется. |
| Набор иконок | Выбирает одну из 12 иконок. Заполненный пузырь чата с тремя точками остается стандартным. |
| Эффект кнопки | Добавляет Пульсацию, Парение, Покачивание, Свечение или отключает эффект. При настройке уменьшенного движения анимация автоматически отключается. |
| Пользовательский CSS | Находится сразу под эффектом и отделяет ручные правила от управляемого блока. Доступно с тарифа Стандартный. |
Семь иконок анимированы: Печать, Искры, Приветствие, Колокольчик, Ракета, Пульс и Молния. Предпросмотр и опубликованный виджет используют одну и ту же иконку и анимацию. Если выбрано Собственное изображение, но изображение недоступно, безопасно отображается выбранная иконка. Селекторы и примеры см. в разделе Пользовательский CSS.
Изображения
Для каждого изображения поддерживается загрузка файла или URL:
| Изображение | Где отображается |
|---|---|
| Изображение аватара | Рядом с сообщениями ассистента |
| Приветственное изображение | Над приветственным сообщением, часто используется для логотипа или баннера |
Изображение кнопки настраивается в разделе Кнопка чата → Собственное изображение. Загрузка поддерживает PNG, JPG, WebP и GIF. Используйте небольшие оптимизированные изображения.
Содержимое
| Настройка | Что изменяет |
|---|---|
| Приветственное сообщение | Вводный текст с форматированием, отображаемый при открытии чата |
| Текст в речевом пузыре | Короткое приглашение рядом с закрытой кнопкой чата |
| Уведомление о конфиденциальности | Необязательное уведомление с форматированием внутри виджета, включая ссылки на информацию о конфиденциальности |
Текст приветствия и речевого пузыря можно составить с помощью Сгенерировать с помощью ИИ и затем отредактировать. Делайте текст в речевом пузыре коротким, а более подробные пояснения размещайте в приветственном сообщении.
Поведение
Видимость и взаимодействие
| Настройка | Что изменяет |
|---|---|
| Отключить виджет на сайте | Предотвращает отображение плавающего виджета без удаления его конфигурации. |
| Изначально открыт | Открывает окно чата при загрузке страницы. |
| Отключить микрофон | Убирает голосовой ввод из виджета. |
| Показывать источники под ответами | Показывает до четырех ссылок на источники, когда они доступны. |
| Пометка ИИ под ответами бота | Отмечает ответы ИИ. Эта опция всегда включена и не может быть отключена. |
| Автоматический перевод | Переводит текст интерфейса виджета на определенный язык посетителя. |
| Загрузка файлов | Позволяет посетителям прикреплять файлы или изображения для анализа, если это разрешено их тарифом. |
| Звук уведомления | Воспроизводит короткий звук при появлении проактивного сообщения. |
| Номер WhatsApp | Добавляет кнопку WhatsApp в шапку виджета. Указывайте полный номер с кодом страны. |
Скрытие на URL/путях
Вводите по одному правилу на строку. Поддерживается подстановочный знак *, поэтому виджет можно скрыть на таких страницах, как:
/checkout/*
/account/*
https://example.com/en/legal/*
Используйте это для оформления заказа, аккаунта, входа или других страниц, где плавающий виджет отвлекал бы от задачи или перекрывал важные элементы управления.
Позиционирование
Выберите Слева, По центру или Справа отдельно для компьютеров и мобильных устройств. Горизонтальный отступ отсчитывается от выбранного физического края; он сохраняется, но игнорируется при выборе центра. Вертикальный отступ остается расстоянием от нижнего края.
На компьютере настройка позиционирует весь плавающий виджет и задает появление слева, справа или снизу при размещении по центру. На мобильном устройстве открытый чат остается полноэкранным, а позиция применяется только к закрытой кнопке.
Автоматические сообщения
Включите Включить проактивные триггеры, если виджет должен обращаться к посетителям на основе времени, глубины прокрутки, намерения уйти, страницы, бездействия, повторных визитов или другого поведения.
Панель содержит редактор триггеров, глобальные настройки частоты, необязательное расписание и таргетинг, шаблоны и данные об эффективности. Там же описано опциональное подключение согласия. Базовое проактивное поведение работает анонимно; для определения повторных посетителей, постоянных лимитов, аналитики и приветствий, созданных ИИ, требуется полученный сигнал согласия.
См. Проактивные триггеры для подробной информации о типах триггеров, режимах ответа, лимитах и правилах конфиденциальности.
Кнопки и формы
Быстрые действия
Кнопки подсказок (также называемые начальными вопросами, предложенными вопросами или темами для начала диалога) представляют собой сообщения в один клик, отображаемые до того, как посетитель что-либо напечатает. Они находятся в Каналы → Виджет чата → Кнопки и формы → Быстрые действия.
| Поле | Что делает |
|---|---|
| Заголовок | Текст на кнопке. Эмодзи разрешены. |
| Действие | Сообщение, отправляемое ассистенту при нажатии кнопки. Пишите полный вопрос, так как он отображается в стенограмме. |
Используйте Добавить кнопку для нового элемента, перетащите маркер слева для изменения порядка, затем нажмите Сохранить изменения. Опция Сгенерировать с помощью ИИ создает набор на основе собственных источников данных ассистента; переключатель над ней автоматически поддерживает этот набор в актуальном состоянии.
Кнопки видны, пока диалог пуст. Как только посетитель отправляет первое сообщение, они перемещаются в меню действий рядом с полем ввода.
Два важных момента: активный Action Bar заменяет кнопки подсказок, поэтому используйте что-то одно. А встроенный чат имеет собственные кнопки в Каналы → Встроенный чат; эта настройка к нему не применяется.
Action Bar
Action Bar отображает постоянные действия в нижней части чата. В активном состоянии он заменяет кнопки подсказок. В зависимости от типа элемента он может открывать ссылку, WhatsApp, встроенную страницу Calendly или пользовательскую форму.
Формы
Создавайте формы, добавляйте и упорядочивайте поля, задавайте обязательные значения и настраивайте кнопку отправки и сообщение об успехе. Отправленные данные сохраняются на панели лидов.
См. Action Bar и формы для информации о типах элементов, типах полей, переводе и сопоставлении лидов.
Advanced
Источник определения языка
Выберите способ, с помощью которого автоматический перевод определяет язык посетителя:
- Язык браузера использует заголовок
Accept-Languageиз настроек браузера. - Атрибут HTML lang использует значение
<html lang="…">текущей страницы.
Используйте вариант с HTML, если каждая локализованная страница корректно объявляет свой язык и должна управлять языком виджета. Используйте язык браузера, если сама страница не локализована должным образом.
Страницы справа налево
Виджет считывает и отслеживает <html dir="rtl">. Текст, сообщения, шапка, поле ввода, меню, списки и речевой пузырь автоматически зеркально отображаются, даже если dir меняется после загрузки. Явные позиции Слева, По центру и Справа остаются физическими.
Брендинг
Параметр Скрыть брендинг убирает упоминание WebChatAgent, если это позволяет текущий тариф. В панели наглядно показано, скрыт брендинг в данный момент или отображается.
Test and publish
- Используйте функцию Протестируйте своего чат-бота после любых изменений контента или поведения.
- Проверьте экран приветствия, как минимум один реальный ответ, источники, кнопки подсказок, формы и загрузку файлов, если эти функции активны.
- Нажмите Сохранить изменения.
- Откройте настоящий сайт на компьютере и мобильном устройстве.
- Нажмите Проверить установку, если Widget не определен.
Предпросмотр в Панели управления удобен для работы, но поведение z-index, баннеров cookie, адаптивных отступов, шрифтов и правил видимости для конкретных страниц необходимо проверять на реальном сайте.