Додавання ChatLab на ваш сайт дозволяє відвідувачам взаємодіяти з вашим AI-чатботом безпосередньо на сторінках ресурсу. У цій інструкції пояснюється, як отримати код для вбудовування та додати його на свій сайт.
Відкриття вкладки Deploy
Виберіть свого чатбота на головній панелі керування, після чого натисніть вкладку Deploy (Розгортання).
Вибір вашої платформи
Панель Select Platform (Виберіть платформу) праворуч показує всі підтримувані платформи. Натисніть на платформу, яка відповідає вашому сайту, щоб переглянути адаптовані інструкції зі встановлення.
Підтримувані платформи:
- HTML Code - працює з будь-яким сайтом, де ви можете редагувати HTML-код
- WordPress - через офіційний плагін ChatLab або за допомогою ручного додавання коду
- Wix - через Settings > Advanced > Custom Code
- Webflow - через Site Settings > Custom Code (потрібен платний план Webflow)
- PrestaShop - через модуль ChatLab для PrestaShop або за допомогою ручного додавання коду
- Shopify - через файл theme.liquid
- WooCommerce - через плагін для WordPress або ручне додавання коду
- Abicart - через Store design > Themes > Site header
- CS-Cart - через Design > Layouts > Custom HTML code
Для кожної платформи відображаються покрокові інструкції саме для цієї інтеграції. Для платформ з окремими статтями в базі знань унизу з'являється посилання View full instructions (Переглянути повні інструкції).
Додавання через HTML Code
Варіант HTML Code підходить для будь-якого вебсайту, до вихідного коду якого у вас є доступ. Ви побачите два варіанти вбудовування: Widget та Iframe.
Режим Widget
На вкладці Widget (Віджет) показано код, який додає іконку чату на ваш сайт. Коли відвідувачі натискають на неї, відкривається спливаюче вікно чату.
- Натисніть вкладку Widget
- Натисніть Copy to clipboard (Скопіювати в буфер обміну), щоб скопіювати код
- Знайдіть секцію
<head>вашого сайту - Вставте код останнім елементом у секції
<head> - Оновіть сторінку в браузері, щоб переконатися, що іконка чатбота з'явилася
Режим Iframe
На вкладці Iframe показано код, який вбудовує чатбот безпосередньо у вміст вашої сторінки. Чатбот залишається видимим постійно та може бути оточений іншими елементами сторінки.
- Натисніть вкладку Iframe
- Натисніть Copy to clipboard, щоб скопіювати код
- Вставте код у будь-яке місце HTML-коду вашого сайту, де повинен відображатися чатбот
- Налаштуйте атрибути
widthтаheightвідповідно до вашого макета
Не впевнені, що вибрати? Прочитайте статтю У чому різниця між widget та Iframe? для детального порівняння.
Додавання через WordPress або WooCommerce
Платформи WordPress та WooCommerce пропонують два методи встановлення: Plugin Installation (Встановлення плагіна, рекомендовано) та Manual Installation (Встановлення вручну).
Встановлення через плагін (рекомендовано)
- Натисніть Get WordPress Plugin (Отримати плагін WordPress), щоб відкрити репозиторій плагінів WordPress
- Встановіть та активуйте плагін "ChatLab -- AI Chatbot"
- Перейдіть на сторінку налаштувань плагіна в панелі адміністратора WordPress
- Скопіюйте ваш Bot ID (ID бота) з ChatLab за допомогою кнопки копіювання
- Вставте Bot ID у налаштування плагіна та збережіть зміни
- Переконайтеся, що чатбот відображається на вашому сайті
Встановлення вручну
Перейдіть на вкладку Manual Installation для встановлення за допомогою коду:
- Встановіть плагін "Insert Headers and Footers" у WordPress
- Перейдіть до Settings > Insert Headers and Footers
- Скопіюйте код із ChatLab і вставте його в секцію Header
- Збережіть зміни та оновіть сторінку сайту
Детальнішу інформацію дивіться у статті Як додати чатбот на сайт WordPress.
Додавання через інші платформи
Для Shopify, Wix, Webflow, PrestaShop, Abicart і CS-Cart виберіть відповідну платформу на панелі Select Platform. Для кожної платформи доступні:
- Код для вбудовування з варіантами Widget та Iframe
- Покрокові інструкції щодо вставки для конкретної платформи
- Посилання View full instructions на повну інструкцію для платформи
Відповідність GDPR
Якщо вам потрібно, щоб чатбот завантажувався лише після отримання згоди на використання файлів cookie, перегляньте статтю Налаштування ChatLab для відповідності GDPR, де описані інструкції з інтеграції для CookieBot, Usercentrics та Google Tag Manager.
Політика безпеки контенту (CSP)
Якщо ваш сайт використовує заголовки Content Security Policy (CSP), вам потрібно дозволити домени ChatLab для коректної роботи чатбота. Необхідні директиви залежать від того, який режим ви використовуєте - Widget чи Iframe.
Режим Widget
Віджет завантажує скрипт на вашу сторінку, який створює інтерфейс чату. Додайте такі директиви до вашого заголовка 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;
За замовчуванням віджет додає частину стилів inline, тому директива 'unsafe-inline' є обов'язковою у style-src.
Режим CSP Safe Mode - як уникнути unsafe-inline
Якщо політика безпеки вашого сайту не дозволяє використання 'unsafe-inline' у style-src, ви можете увімкнути режим CSP Safe Mode. У цьому режимі віджет завантажує всі стилі із зовнішніх файлів CSS замість їх додавання через inline.
Щоб увімкнути його, додайте рядок 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', і заголовок CSP може мати такий вигляд:
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
Iframe завантажує чатбот повністю з однієї URL-адреси, тому потрібна лише одна директива:
frame-src https://api.chatlab.com;