Додавання ChatLab на ваш сайт дозволяє відвідувачам взаємодіяти з вашим AI-чатботом безпосередньо на сторінках. У цьому посібнику пояснюється, як отримати код для вбудовування та додати його на свій вебсайт.
Перш ніж почати
Створіть і навчіть свого чатбота, перш ніж відкривати до нього доступ клієнтам. Для встановлення вам також знадобляться права на редагування та публікацію сайту. Дивіться статтю Як створити свого першого чатбота.
Відкриття вкладки Deploy
Виберіть свого чатбота на головній панелі керування, а потім натисніть вкладку Deploy (Розгортання).
Вибір платформи
Панель Select Platform (Вибір платформи) праворуч містить список підтримуваних платформ, розділених на дві групи: Website (Вебсайт) - для розміщення чатбота на сторінках, якими ви керуєте, та Messaging channels (Канали обміну повідомленнями) - для підключення до наявного акаунта для листування. Натисніть пункт, який відповідає бажаному місцю розміщення чатбота, щоб переглянути спеціальні інструкції.
Підтримувані платформи:
- HTML Code - підходить для будь-якого сайту, де ви можете редагувати HTML-код
- WordPress - через офіційний плагін ChatLab або ручне вставлення коду
- Wix - через Settings > Custom Code (Налаштування > Власний код)
- Webflow - через Site settings > Custom code (Налаштування сайту > Власний код), якщо для вашого сайту або робочого простору увімкнено доступ до власного коду
- PrestaShop - через модуль ChatLab для PrestaShop або ручне вставлення коду
- Shopify - через файл theme.liquid
- WooCommerce - через плагін для WordPress або ручне вставлення коду
- Abicart - через Store design > Themes > Site header (Дизайн магазину > Теми > Заголовок сайту)
- CS-Cart - через Design > Layouts > Custom HTML code (Дизайн > Макети > Власний HTML-код)
Канали обміну повідомленнями:
- WhatsApp Business - відповідає в акаунті WhatsApp Business, дивіться WhatsApp для бізнесу
- Facebook Messenger - відповідає на повідомлення вашої сторінки у Facebook, дивіться Інтеграція з Facebook Messenger
- Instagram - відповідає в особистих повідомленнях Instagram, дивіться Інтеграція з Instagram
Канали обміну повідомленнями не використовують наведений нижче код для вбудовування. Вони підключаються до вже наявного у вас акаунта, тому вставляти код на вебсайт не потрібно.
Для кожної платформи відображаються покрокові інструкції, створені спеціально для цієї інтеграції. Для платформ, які мають окремі статті довідки, унизу з'являється посилання View full instructions (Переглянути повні інструкції).
Додавання за допомогою HTML Code
Варіант HTML Code працює з будь-яким сайтом, де ви маєте доступ до вихідного коду. Ви побачите два варіанти вбудовування: Widget (Віджет) та Iframe.
Режим віджета
Вкладка Widget показує код, який додає іконку чату на ваш сайт. Коли відвідувачі натискають на неї, відкривається спливаюче вікно чату.
- Натисніть вкладку Widget
- Натисніть Copy to clipboard (Копіювати в буфер обміну), щоб скопіювати код
- Знайдіть секцію
<head>вашого сайту - Вставте код останнім елементом у секції
<head> - Оновіть сторінку в браузері, щоб переконатися, що іконка чатбота з'явилася
Режим Iframe
Вкладка Iframe показує код, який вбудовує чатбота безпосередньо у вміст вашої сторінки. Чатбот залишається видимим постійно і може бути оточений іншими елементами сторінки.
- Натисніть вкладку Iframe
- Натисніть Copy to clipboard, щоб скопіювати код
- Вставте код у будь-яке місце в HTML вашого сайту, де повинен відображатися чатбот
- Налаштуйте атрибути
widthтаheightвідповідно до вашого макета
Не впевнені, що вибрати? Прочитайте статтю У чому різниця між віджетом та Iframe?, де наведено детальне порівняння.
Додавання через WordPress або WooCommerce
Платформи WordPress та WooCommerce пропонують два методи встановлення: Plugin Installation (Встановлення плагіна, рекомендовано) та Manual Installation (Встановлення вручну).
Встановлення плагіна (рекомендовано)
- Натисніть Get the plugin on WordPress.org (Отримати плагін на WordPress.org), після чого встановіть та активуйте плагін ChatLab.
- Відкрийте ChatLab у WordPress. Для магазину WooCommerce залиште вибраним пункт WooCommerce integration (Інтеграція з WooCommerce), щоб також підключити дані магазину.
- Натисніть Continue (Продовжити), увійдіть у ChatLab і виберіть свого чатбота.
- Завершіть підключення, відкрийте опублікований вебсайт і надішліть тестове повідомлення.
Встановлення вручну
Перейдіть на вкладку Manual Installation і скопіюйте код режиму Widget у заголовок (header) сайту за допомогою плагіна для вставлення коду. Для варіанта Iframe використовуйте блок HTML у вмісті сторінки, який дозволяє використання коду iframe. Опублікуйте сторінку та протестуйте чат. Встановлюйте віджет лише один раз: або через плагін, або за допомогою фрагмента коду вручну.
Усі подробиці дивіться у статті Як додати чатбота на сайт WordPress.
Додавання через інші платформи
Для Shopify, Wix, Webflow, PrestaShop, Abicart та CS-Cart виберіть відповідну платформу на панелі Select Platform. Для кожної платформи відображаються:
- Код для вбудовування з варіантами Widget та Iframe
- Специфічні для платформи покрокові інструкції зі вставлення
- Посилання View full instructions, що веде до повного посібника для цієї платформи
Відповідність вимогам GDPR
Якщо вам потрібно, щоб чатбот завантажувався лише після отримання згоди на використання файлів cookie, дивіться статтю Налаштування ChatLab для відповідності GDPR, яка містить посібники з інтеграції для CookieBot, Usercentrics та Google Tag Manager.
Content Security Policy (CSP)
Якщо ваш сайт використовує заголовки Content Security Policy, вам потрібно дозволити домени ChatLab, щоб чатбот міг працювати. Необхідні директиви залежать від того, який режим ви використовуєте - Widget чи Iframe.
Режим віджета
Віджет завантажує на вашій сторінці скрипт, який створює інтерфейс чату. Додайте такі джерела ChatLab до ваших наявних директив CSP; не замінюйте політику для решти вашого вебсайту:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com 'unsafe-inline';
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
За замовчуванням віджет додає деякі стилі інлайн. Ваша політика також має дозволяти вбудований скрипт конфігурації, наприклад за допомогою CSP nonce або хешу. Дозвольте джерела зображень, які використовуються вашим ботом і картками товарів, у директиві img-src; аудіо та інші активовані функції можуть вимагати додаткових джерел. Для агентського домену використовуйте домени зі згенерованого фрагмента коду.
Безпечний режим CSP (CSP Safe Mode) - як уникнути unsafe-inline
Якщо політика безпеки вашого вебсайту не дозволяє 'unsafe-inline' у style-src, ви можете ввімкнути режим CSP Safe Mode. У цьому випадку таблиця стилів контейнера віджета завантажується із зовнішнього файлу CSS. Це не надає дозволу для вашого вбудованого скрипту конфігурації та не гарантує, що кожен власний стиль чи активована функція відповідатимуть вашій політиці.
Щоб увімкнути його, додайте window.aichatbotCspSafe = true; перед тегом скрипта ChatLab:
<script>
window.aichatbotApiKey = "YOUR_API_KEY";
window.aichatbotCspSafe = true;
</script>
<script src="https://script.chatlab.com/aichatbot.js" defer></script>
Увімкнувши CSP Safe Mode, протестуйте політику таблиць стилів без 'unsafe-inline'. Початковий варіант:
script-src https://script.chatlab.com;
style-src https://script.chatlab.com https://fonts.googleapis.com;
connect-src https://api.chatlab.com wss://api.chatlab.com;
font-src https://fonts.gstatic.com;
Режим Iframe
Батьківська сторінка має дозволяти джерело із скопійованої URL-адреси iframe. Для стандартного хостингу ChatLab додайте до наявної політики таке:
frame-src https://api.chatlab.com;