Как добавить ИИ-чат-бот 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>

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 2: Добавьте код через настройки сайта (все страницы)

Чтобы добавить чат-бот на все страницы сайта Webflow сразу:

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

Совет: Добавление кода в раздел футера помещает его непосредственно перед закрывающим тегом </body> — это рекомендуется для чат-виджетов, поскольку не замедляет загрузку страницы.

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

Если вы хотите добавить чат-бот только на определённые страницы:

Откройте свой проект в Webflow Designer
Нажмите на Pages panel (иконка папки) в левой боковой панели
Наведите курсор на страницу, которую хотите отредактировать, и нажмите на значок шестерёнки
Прокрутите вниз до раздела «Пользовательский код»
Вставьте код вставки Asyntai в раздел «Перед тегом </body>»
Нажмите «Save»
Опубликуйте ваш сайт

Альтернатива: Через элемент встраивания

Вы также можете добавить чат-бот с помощью элемента 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>

Читать полное руководство по строке поиска с ИИ