Как да добавите AI чатбот на Asyntai в Webflow

Ръководство стъпка по стъпка за уебсайтове на Webflow

Платформа:

Стъпка 1: Вземете вашия код за вграждане

Първо, отидете във вашето табло на Asyntai и превъртете надолу до секцията „Embed Code“. Копирайте вашия уникален код за вграждане, който ще изглежда така:

<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
Кликнете върху панела Pages (икона на папка) в лявата странична лента
Задръжте мишката над страницата, която искате да редактирате, и кликнете върху иконата на зъбно колело
Превъртете надолу до "Custom Code"
Поставете вашия Asyntai код за вграждане в секцията "Before </body> tag"
Натиснете "Save"
Публикувайте вашия сайт

Алтернатива: Използване на елемент за вграждане

Можете също да добавите чатбота, използвайки елемента Embed навсякъде на вашата страница:

Отворете вашия проект в Webflow Designer
Кликнете бутона "+", за да отворите панела за добавяне
Потърсете "Embed" или го намерете под Components
Плъзнете елемента Embed на вашата страница
Поставете вашия Asyntai код за вграждане в редактора на код
Кликнете "Save & Close"
Публикувайте вашия сайт

Важно: Когато използвате елемента Embed, ще трябва да го добавите на всяка страница, където искате чатбота. За инсталация на целия сайт използвайте метода чрез Site Settings по-горе.

Стъпка 3: Проверка на инсталацията

След публикуване на сайта, отворете го в нов раздел на браузъра или в инкогнито режим. Трябва да видите бутона на чат джаджата в долния десен ъгъл. Кликнете върху него, за да се уверите, че се отваря и работи правилно.

Не виждате уиджета? Уверете се, че сте публикували сайта след добавяне на кода. Персонализираният код се появява само на живия сайт, не в предварителния изглед на Designer. Опитайте да изчистите кеша на браузъра или да прегледате в инкогнито режим.

Добавяне на AI лентата за търсене

AI лентата за търсене е отделно приспособление със собствен код. Добавете я заедно с чата или самостоятелно. Изисква план 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>

Прочетете пълното ръководство за AI лентата за търсене