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