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