Добавление ChatLab на ваш сайт позволяет посетителям общаться с вашим ИИ-чатботом прямо на страницах ресурса. В этой инструкции объясняется, как получить код для вставки и добавить его на ваш сайт.
Открытие вкладки 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 подходит для любого сайта, к исходному коду которого у вас есть доступ. Вам будут доступны два варианта вставки: 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 (Ручная установка).
Plugin Installation (рекомендуется)
- Нажмите Get WordPress Plugin (Получить плагин для WordPress), чтобы перейти в каталог плагинов WordPress
- Установите и активируйте плагин «ChatLab - AI Chatbot»
- Перейдите на страницу настроек плагина в панели администратора WordPress
- Скопируйте ваш Bot ID из панели ChatLab с помощью кнопки Copy
- Вставьте Bot ID в настройки плагина и сохраните изменения
- Убедитесь, что чатбот появился на вашем сайте
Manual Installation
Перейдите на вкладку 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.
Content Security Policy (CSP)
Если на вашем сайте используются заголовки Content Security Policy, вам потребуется разрешить домены 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;
По умолчанию виджет внедряет часть стилей в виде инлайн-кода, поэтому директива 'unsafe-inline' обязательна для style-src.
CSP Safe Mode - исключение unsafe-inline
Если политика безопасности вашего сайта запрещает использование 'unsafe-inline' в style-src, вы можете включить CSP Safe Mode (Безопасный режим CSP). В этом случае виджет будет загружать все стили из внешних 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' больше не требуется, и в заголовке 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;