Как настроить виджет ИИ-чатбота и встроить его на сайт

Откройте ассистента и перейдите в Widget Integration → Appearance. Начните с параметров Widget Width и (при необходимости) Height, затем выберите Theme, Font Family и Chat Title. В примере Tutorial Lab используется тема Modern и заголовок “Tutorial Lab”; если оставить поле высоты пустым, применится адаптивное значение по умолчанию.

Настройте цвета по их назначению: фон и текст заголовка (header), фон и текст сообщений бота (bot bubble), фон и текст сообщений посетителя (visitor bubble), фон и иконка кнопки запуска (launcher). В примере используется темно-синий заголовок с белым текстом и насыщенное синее облачко посетителя. Обязательно проверяйте сочетания фона и текста в окне предпросмотра, а не только в палитре. Контрастность обычного текста должна быть не ниже 4.5:1.

Откройте вкладку Images. Поле Avatar Image задает картинку рядом с сообщениями ассистента, Chat Button Image заменяет стандартную иконку кнопки вызова чата, а Welcome Image отображается на пустом стартовом экране. Не используйте один и тот же широкий логотип во всех полях — подготовьте оптимизированное изображение для каждого элемента.

Используйте форматы PNG или WebP с четкими контурами. Аватар и кнопка вызова должны быть квадратными; проверьте прозрачность на темных и светлых фонах сайта и избегайте мелкого нечитаемого текста на иконках. В нашем примере часть дополнительных изображений оставлена пустой: это нормально, если стандартная иконка WebChatAgent смотрится аккуратнее неудачной графики.

Откройте Content & Behavior. Определите, будет ли виджет отключен на сайте, открыт по умолчанию, скрыт на смартфонах или показывать ссылки на источники. Затем проверьте настройки микрофона, автоперевода, всплывающего облачка с сообщением и исключенные страницы (path exclusions). Меняйте параметры по одному и сразу оценивайте результат.

Напишите короткое приветствие, которое объясняет, чем бот может помочь. Кнопки быстрых подсказок настраиваются в другом месте: перейдите в Buttons & forms → Quick actions. Добавьте 2–3 кнопки с конкретным смыслом. Вариант “Which plan is right for me?” дает гораздо больше пользы, чем абстрактное “Learn more.”. Не стоит автоматически открывать большое окно чата на каждой странице; используйте Triggers только после проверки задержки, условий показа, закрытия и частоты в новой сессии браузера.

Откройте вкладку Positioning. Параметры Desktop Offsets и Mobile Offsets позволяют независимо настроить расстояние от выбранного угла экрана. В проекте Tutorial Lab установлено по 20 пикселей снизу и справа для обоих типов устройств как универсальная основа.

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

Нажмите Test Your Chatbot, чтобы открыть окно тестирования от лица посетителя. Проверьте заголовок, цвет сообщений пользователя, читаемость ответов ассистента, работу кнопок подсказок, поле ввода, кнопку закрытия и общий брендинг. Протестируйте управление мышью и с клавиатуры: фокус должен четко подсвечиваться и корректно возвращаться на страницу при закрытии диалога.

В проверенном примере задается вопрос “What are the support hours?”. Реальный виджет отвечает, что часы работы службы поддержки Northstar Services: с понедельника по пятницу, с 8:00 AM до 6:00 PM по центральноевропейскому времени. Это одновременно подтверждает сохраненное оформление и ответ на основе источников. Повторите проверку с заведомо неизвестным вопросом, чтобы убедиться, что при таком дизайне более длинный резервный текст также остается читаемым.

Прокрутите до блока с кодом в разделе Widget Integration и скопируйте весь фрагмент HTML, а не только ID чатбота. Этот код асинхронно подключает скрипт WebChatAgent и создает пользовательский элемент `web-chat-agent` с идентификатором вашего ассистента. Вставьте код один раз перед закрывающим тегом `body` или в блок глобальных скриптов вашей CMS.

Перед тестированием укажите точные домены тестового и основного сайтов в поле Allowed Websites. Если политика согласий блокирует сторонние скрипты, загружайте код виджета только после подтверждения пользователем; если виджет считается обязательным элементом поддержки, зафиксируйте это решение. Убедитесь в отсутствии дублирующихся скриптов, ошибок в консоли и ограничений Content Security Policy (CSP).

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