Настройки и установка виджета чата

Chat widget

Откройте Панель управления → ваш ассистент → Каналы → Виджет чата. Здесь вы можете установить и настроить плавающий виджет для сайта. Отдельной вкладки Интеграция или Интеграция виджета нет.

Установка виджета

Разверните Показать сведения об установке над областью настройки. Панель содержит:

• готовый к использованию HTML с уже подставленным вашим ID чат-бота,
• действия Скопировать код и Добавить на сайт,
• Проверить установку для проверки того, что виджет загружается на разрешенном домене,
• инструкции по настройке для WordPress, Shopify, Wix, Squarespace и Webflow.

Когда WebChatAgent обнаруживает виджет, панель показывает домен, на котором загружается этот ассистент. Ошибка проверки обычно означает, что код отсутствует, страница все еще отдает старую кэшированную версию или домен не указан в Настройки → Разрешённые сайты.

См. Руководство по встраиванию на сайт по размещению и Руководство для разработчиков по виджету по HTML-атрибутам и событиям во время выполнения.

Внешний вид и содержимое

Эта вкладка объединяет визуальное оформление, изображения и контент, отображаемый до начала диалога.

Основные настройки

Цвета

Редактор проверяет контрастность текста и предупреждает, если пара передний план/фон ниже рекомендуемого соотношения WCAG. Устраните эти предупреждения перед публикацией.

Изображения

Для каждого изображения поддерживается загрузка файла или URL:

Загрузка поддерживает форматы PNG, JPG, WebP и GIF. Используйте небольшие, оптимизированные изображения; редактор показывает текущие ограничения размера рядом с каждой загрузкой.

Содержимое

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

Поведение

Видимость и взаимодействие

Скрытие на URL/путях

Вводите по одному правилу на строку. Поддерживается подстановочный знак *, поэтому виджет можно скрыть на таких страницах, как:

/checkout/*
/account/*
https://example.com/en/legal/*

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

Позиционирование

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

Автоматические сообщения

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

Панель содержит редактор триггеров, глобальные настройки частоты, необязательное расписание и таргетинг, шаблоны и данные об эффективности. Там же описано опциональное подключение согласия. Базовое проактивное поведение работает анонимно; для определения повторных посетителей, постоянных лимитов, аналитики и приветствий, созданных ИИ, требуется полученный сигнал согласия.

См. Проактивные триггеры для подробной информации о типах триггеров, режимах ответа, лимитах и правилах конфиденциальности.

Кнопки и формы

Быстрые действия

Кнопки подсказок (также называемые начальными вопросами, предложенными вопросами или темами для начала диалога) представляют собой сообщения в один клик, отображаемые до того, как посетитель что-либо напечатает. Они находятся в Каналы → Виджет чата → Кнопки и формы → Быстрые действия.

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

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

Два важных момента: активный Action Bar заменяет кнопки подсказок, поэтому используйте что-то одно. А встроенный чат имеет собственные кнопки в Каналы → Встроенный чат; эта настройка к нему не применяется.

Action Bar

Action Bar отображает постоянные действия в нижней части чата. В активном состоянии он заменяет кнопки подсказок. В зависимости от типа элемента он может открывать ссылку, WhatsApp, встроенную страницу Calendly или пользовательскую форму.

Формы

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

См. Action Bar и формы для информации о типах элементов, типах полей, переводе и сопоставлении лидов.

Advanced

Источник определения языка

Выберите способ, с помощью которого автоматический перевод определяет язык посетителя:

• Язык браузера использует заголовок Accept-Language из настроек браузера.
• Атрибут HTML lang использует значение <html lang="…"> текущей страницы.

Используйте вариант с HTML, если каждая локализованная страница корректно объявляет свой язык и должна управлять языком виджета. Используйте язык браузера, если сама страница не локализована должным образом.

Брендинг

Параметр Скрыть брендинг убирает упоминание WebChatAgent, если это позволяет текущий тариф. В панели наглядно показано, скрыт брендинг в данный момент или отображается.

Пользовательский CSS

Пользовательский CSS внедряется в Widget и имеет приоритет над встроенными стилями без необходимости использовать !important. Редактор содержит готовые шаблоны и список стабильных селекторов .wca-*. Он также отображает лимит символов и сразу применяет изменения в окне предпросмотра.

Стабильной частью интерфейса считаются только документированные селекторы. Таблицу селекторов и примеры можно найти в разделе Пользовательский CSS.

Test and publish

1. Используйте функцию Протестируйте своего чат-бота после любых изменений контента или поведения.
2. Проверьте экран приветствия, как минимум один реальный ответ, источники, кнопки подсказок, формы и загрузку файлов, если эти функции активны.
3. Нажмите Сохранить изменения.
4. Откройте настоящий сайт на компьютере и мобильном устройстве.
5. Нажмите Проверить установку, если Widget не определен.

Предпросмотр в Панели управления удобен для работы, но поведение z-index, баннеров cookie, адаптивных отступов, шрифтов и правил видимости для конкретных страниц необходимо проверять на реальном сайте.