Як додати AI чат-бот Asyntai до Webflow

Покрокова інструкція для сайтів Webflow

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдіть до своєї панелі керування Asyntai і прокрутіть вниз до розділу "Код вбудовування". Скопіюйте свій унікальний код вбудовування, який виглядає так:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Примітка: Код вище є лише прикладом. Ви повинні скопіювати власний унікальний код для вставки з вашої Панелі керування, оскільки він містить ваш особистий ID віджета.

Крок 2: Додайте код через налаштування сайту (всі сторінки)

Щоб додати чат-бот на всі сторінки вашого сайту Webflow одразу:

Увійдіть до свого облікового запису Webflow та виберіть свій проєкт
Натисніть на значок шестерня (Налаштування сайту) на лівій бічній панелі
Натисніть на "Custom Code" в меню налаштувань
Прокрутіть вниз до розділу "Footer Code" (перед тегом </body>)
Вставте ваш код для вставки Asyntai
Натисніть "Save Changes"
Опублікуйте свій сайт, щоб зміни набули чинності

Порада: Додавання коду в розділ Footer розміщує його безпосередньо перед закриваючим тегом </body>, що рекомендується для віджетів чату, оскільки це не сповільнить завантаження сторінки.

Альтернатива: Користувацький код для конкретної сторінки

Якщо ви хочете чат-бот лише на конкретних сторінках:

Відкрийте свій проект у Webflow Designer
Натисніть на панель сторінок (значок папки) на лівій бічній панелі
Наведіть курсор на сторінку, яку хочете редагувати, та натисніть на значок шестірні
Прокрутіть вниз до "Custom Code"
Вставте код вбудовування Asyntai в розділ "Before </body> tag"
Натисніть "Save"
Опублікуйте свій сайт

Альтернатива: Використання елемента Embed

Ви також можете додати чат-бот за допомогою елемента Embed будь-де на вашій сторінці:

Відкрийте свій проект у Webflow Designer
Натисніть кнопку "+", щоб відкрити панель додавання
Шукайте "Embed" або знайдіть його в розділі Components
Перетягніть елемент Embed на вашу сторінку
Вставте ваш код вбудовування Asyntai в редактор коду
Натисніть "Save & Close"
Опублікуйте свій сайт

Важливо: При використанні елемента Embed вам потрібно додати його на кожну сторінку, де ви хочете мати чат-бот. Для встановлення на весь сайт використовуйте метод через налаштування сайту, описаний вище.

Крок 3: Перевірте встановлення

Після публікації сайту відкрийте його в новій вкладці браузера або у режимі інкогніто. Ви повинні побачити кнопку віджета чату в правому нижньому куті. Натисніть на неї, щоб переконатися, що вона відкривається та працює правильно.

Не бачите віджет? Переконайтеся, що ви опублікували сайт після додавання коду. Користувацький код відображається лише на опублікованому сайті, а не в попередньому перегляді Designer. Спробуйте очистити кеш браузера або переглянути в режимі інкогніто.

Додавання рядка пошуку зі ШІ

Рядок пошуку зі ШІ - окремий віджет із власним кодом. Додайте його поруч із чатом або окремо. Потрібен тариф Standard або вищий: на нижчому рядок з являється, але результатів не повертає.

Додайте атрибут data-replace до тега script, і рядок займе місце того, що вже є у вашій темі. Додайте його в Site Settings, Custom Code, Footer, туди ж, куди й код чату: так він опиниться просто перед закривальним тегом body.

<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>

Читати повний посібник із рядка пошуку зі ШІ