Добавление чат-бота ChatLab на ваш сайт Webflow позволяет посетителям взаимодействовать с вашим AI-ассистентом прямо на страницах сайта. В этой инструкции описаны шаги по получению кода для вставки из ChatLab и его добавлению в Webflow.
Перед началом работы
Перед началом создайте своего чат-бота и убедитесь, что ваш сайт или рабочее пространство в Webflow поддерживает добавление пользовательского кода. См. требования Webflow к пользовательскому коду. Вам также потребуются права на редактирование и публикацию сайта.
Шаг 1 - Скопируйте код для вставки из ChatLab
- Войдите в ChatLab и выберите чат-бота, которого хотите встроить
- Перейдите на вкладку Deploy (Развертывание), затем выберите Webflow на панели платформ справа
- Выберите Widget (Виджет) для установки в заголовок страницы, как описано ниже. Если нужен постоянно отображаемый чат, выберите Iframe и следуйте инструкциям для iframe ниже. Ознакомьтесь со статьей В чем разница между widget и Iframe? для сравнения вариантов
- Нажмите Copy to clipboard (Скопировать в буфер обмена)
Шаг 2 - Добавьте код в Webflow
Добавление кода в Site Settings (Настройки сайта) разместит чат-бота на всех страницах вашего сайта Webflow.
- Откройте ваш проект в панели управления Webflow Dashboard
- Перейдите в раздел Site settings > Custom code (Настройки сайта > Пользовательский код)
- Вставьте скопированный код в поле секции Head Code (Код заголовка)
- Нажмите Save Changes (Сохранить изменения)
- Нажмите Publish (Опубликовать), чтобы изменения вступили в силу на вашем сайте
Добавление только на одну страницу
Если вы хотите добавить чат-бота только на определенную страницу, а не на весь сайт:
- Откройте страницу в Webflow Designer
- Нажмите на значок шестеренки, чтобы открыть Page Settings (Настройки страницы)
- Прокрутите вниз до секции Custom Code (Пользовательский код)
- Вставьте код в поле Head Code (Код заголовка)
- Сохраните изменения и опубликуйте сайт
Добавление постоянно отображаемого iframe
В Webflow Designer добавьте элемент Code Embed (Вставка кода) в то место, где должен располагаться чат-бот, вставьте фрагмент Iframe из ChatLab и настройте подходящие ширину и высоту для вашей разметки. Сохраните изменения и опубликуйте сайт. Элемент iframe должен находиться в теле страницы, а не в Head Code.
Проверка установки
После публикации откройте ваш сайт Webflow в браузере. Вы должны увидеть значок чата в углу страницы (в режиме виджета) или встроенное окно чата на самой странице (в режиме iframe). Нажмите на иконку, чтобы открыть чат, и отправьте тестовое сообщение для проверки работоспособности.