Добавление ChatLab на ваш сайт позволяет посетителям взаимодействовать с вашим ИИ-чатботом прямо на страницах ресурса. В этом руководстве объясняется, как получить код для вставки и добавить его на ваш сайт.
Перед началом работы
Создайте и обучите чатбота перед тем, как открывать к нему доступ клиентам. Для установки вам также понадобятся права на редактирование и публикацию сайта. См. раздел Как создать своего первого чатбота.
Переход на вкладку 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
Каналы сообщений:
- WhatsApp Business - отвечает в аккаунте WhatsApp Business, см. WhatsApp для бизнеса
- Facebook Messenger - отвечает на сообщения вашей страницы Facebook, см. Интеграция с Facebook Messenger
- Instagram - отвечает на личные сообщения в Instagram, см. Интеграция с Instagram
Для каналов сообщений приведенный ниже код вставки не используется. Они подключаются напрямую к вашей существующей учетной записи, поэтому вставлять код на сайт не требуется.
Для каждой платформы отображаются пошаговые инструкции, относящиеся к данной интеграции. Для платформ с отдельными статьями в базе знаний внизу доступна ссылка 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в соответствии с разметкой вашей страницы
Не уверены, какой вариант выбрать? Ознакомьтесь с подробным сравнением в статье В чем разница между виджетом и Iframe?.
Добавление через WordPress или WooCommerce
Для платформ WordPress и WooCommerce предусмотрено два метода установки: Plugin Installation (Установка плагина, рекомендуется) и Manual Installation (Ручная установка).
Plugin Installation (рекомендуется)
- Нажмите Get the plugin on WordPress.org (Получить плагин на WordPress.org), затем установите и активируйте плагин ChatLab.
- Откройте раздел ChatLab в WordPress. Для магазина WooCommerce оставьте выбранным пункт WooCommerce integration (Интеграция с WooCommerce), чтобы подключить данные магазина.
- Нажмите Continue (Продолжить), войдите в ChatLab и выберите своего чатбота.
- Завершите подключение, откройте опубликованный сайт и отправьте тестовое сообщение.
Manual Installation
Перейдите на вкладку 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.
Режим Widget
Виджет загружает на страницу скрипт, создающий интерфейс чата. Добавьте следующие источники 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 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;