Обзор
Виджет для сайта позволяет клиентам общаться с вашим агентом напрямую на вашем сайте. Это бесшовно интегрирует AI-помощь в ваше существующее веб-присутствие, не заставляя посетителей пользоваться внешними мессенджерами.
Пошаговый процесс подключения
- Перейдите на вкладку Channels в кабинете
- Выберите агента для подключения к сайту
- Найдите и нажмите вкладку Website Widget
- Настройте параметры виджета (ниже)
Параметры настройки виджета
Базовые настройки: Widget Name (уникальный идентификатор, только буквы и дефисы), Widget Element Popup (всплывающее сообщение возле кнопки), Welcome Text (первое сообщение при открытии), Logo URL (опционально), Brand Color (hex), Disable contact form (не требовать телефон/email для старта), Hide default button (скрыть плавающую кнопку, полезно с кастомными кнопками ниже).
Позиция и размер: Margin Desktop/Mobile (отступ от краёв в px), Scale Desktop (0.8 рекомендуется для HD/Full HD), Button Scale Desktop (1.2 рекомендуется), Scale Mobile, Button Scale Mobile.
Язык и вид: Language (язык интерфейса по умолчанию), Avatar (мужской/женский), Button Position (слева/справа), Button Text Show (видимость всплывающего сообщения).
Дополнительные опции: Social Links (Telegram, WhatsApp, Instagram и т.д.), Whitelist (страницы, где виджет НЕ должен появляться), Audio URL (свой звук нового сообщения).
Установка виджета на сайт
После настройки: нажмите Generate HTML, скопируйте сгенерированный код, затем на сайте добавьте первую часть в конец секции <head>, а вторую, в конец секции <body>.
<!-- To the BOTTOM head tag -->
<link rel="stylesheet" href="https://api.mychatbot.app/sw-assets/v1/assets/style.css" />
<script src="https://api.mychatbot.app/sw-assets/v1/widget.js"></script>
<!-- To the BOTTOM of the body tag -->
<div id="my-chat-widget-container"></div>
<script>
const metadata={/*YOUR METADATA GOES HERE*/};
const config = {/*YOUR CONFIG GOES HERE*/};
MyChatBot.mount('#my-chat-widget-container', config);
</script>Открытие виджета через query-параметр
Чтобы привязать открытие виджета к своей ссылке или кнопке, используйте специальный query-параметр: добавьте ?open-mcb-widget=1 к любому URL на сайте. Когда пользователь переходит на URL с этим параметром, виджет открывается автоматически, эквивалент нажатия кнопки виджета.
Примеры использования: ссылки в email-кампаниях (https://yoursite.com/contact?open-mcb-widget=1), кастомные кнопки «Напишите нам», ведущие на ту же страницу с параметром, открытие виджета из других частей интерфейса. Полезно для нескольких точек входа в разговор.
Кастомное управление виджетом
Чтобы создать свои кнопки открытия чата, скройте стандартную кнопку виджета в настройках и добавьте CSS-класс mcb_widget_activator_button к любой кнопке или элементу на сайте. При клике на элементы с этим классом виджет открывается автоматически.
Важно: элемент с классом mcb_widget_activator_button должен существовать на странице во время её загрузки, чтобы виджет корректно привязал событие клика.
Изменение вида виджета
Чтобы обновить конфигурацию: вернитесь на вкладку Website Widget, внесите изменения, нажмите Update (не нужно повторно скачивать скрипт или переустанавливать на сайте), затем перезагрузите страницу с виджетом, чтобы увидеть изменения.
Видеодемонстрация
Посмотрите видео выше, чтобы увидеть процесс в действии.