Огляд
Віджет для сайту дозволяє клієнтам спілкуватися з вашим агентом напряму на вашому сайті. Це безшовно інтегрує 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 (не потрібно повторно завантажувати скрипт чи перевстановлювати на сайті), потім перезавантажте сторінку з віджетом, щоб побачити зміни.
Відеодемонстрація
Перегляньте відео вище, щоб побачити процес у дії.