Додавання чатбота ChatLab на ваш сайт Webflow дозволяє відвідувачам взаємодіяти з вашим AI-асистентом безпосередньо на сайті. У цій інструкції описано кроки для отримання коду для вбудовування з ChatLab та його додавання у Webflow.
Перш ніж почати
Перш ніж почати, створіть свого чатбота і переконайтеся, що ваш сайт або робочий простір Webflow підтримує додавання власного коду. Дивіться вимоги Webflow щодо власного коду. Вам також потрібні права на редагування та публікацію сайту.
Крок 1 - Скопіюйте код для вбудовування з ChatLab
- Увійдіть у ChatLab і виберіть чатбота, якого ви хочете вбудувати
- Перейдіть на вкладку Deploy (Розгортання), а потім виберіть Webflow на панелі платформ праворуч
- Виберіть Widget (Віджет) для встановлення в заголовок, як описано нижче. Якщо потрібен постійно видимий чат, виберіть Iframe та дотримуйтесь інструкцій для iframe нижче. Порівняння дивіться у статті Яка різниця між віджетом та 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). Натисніть на іконку, щоб відкрити чат, і надішліть тестове повідомлення, щоб переконатися, що все працює належним чином.