Az Asyntai AI Chatbot hozzáadása a Webflow-hoz

Lépésről lépésre útmutató Webflow weboldalakhoz

Platform:

1. lépés: Szerezze be a beágyazási kódját

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<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>

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

2. lépés: Kód hozzáadása a Webhelybeállításokon keresztül (Minden oldal)

A chatbot Webflow webhelye összes oldalához való egyszeri hozzáadásához:

Jelentkezzen be a Webflow fiókjába, és válassza ki a projektjét
Kattintson a fogaskerék ikonra (Webhelybeállítások) a bal oldali sávban
Kattintson az "Egyéni kód" elemre a beállítások menüben
Görgessen le a "Lábléc kód" szakaszhoz (</body> címke előtt)
Illessze be az Asyntai beágyazási kódját
Kattintson a "Módosítások mentése" gombra
Tegye közzé weboldalát a változtatások alkalmazásához

Tipp: A kód hozzáadása a Lábléc szakaszhoz közvetlenül a záró </body> címke elé helyezi azt, ami ajánlott a chat widgetek számára, mivel nem lassítja az oldal betöltését.

Alternatíva: Oldalspecifikus egyéni kód

Ha csak bizonyos oldalakra szeretné a chatbotot:

Nyissa meg a projektjét a Webflow Designerben
Kattintson az Oldalak panelre (mappa ikon) a bal oldali sávban
Vigye az egeret a szerkeszteni kívánt oldal fölé, és kattintson a fogaskerék ikonra
Görgessen le az "Egyéni kód" részhez
Illessze be az Asyntai beágyazókódot a "</body> címke előtt" szakaszba
Kattintson a „Mentés" gombra
Publikálja a webhelyét

Alternatíva: Beágyazási elem használata

A chatbotot a Beágyazás elem segítségével is hozzáadhatja az oldal bármely részéhez:

Nyissa meg a projektjét a Webflow Designerben
Kattintson a "+" gombra a Hozzáadás panel megnyitásához
Keressen rá a \"Embed\" kifejezésre, vagy keresse a Components alatt
Húzza a Beágyazás elemet az oldalára
Illessze be az Asyntai beágyazó kódját a kódszerkesztőbe
Kattintson a „Mentés és bezárás" gombra
Publikálja a webhelyét

Fontos: A Beágyazás elem használatakor minden oldalra külön hozzá kell adnia, ahol a chatbotot szeretné. A teljes webhelyre történő telepítéshez használja a fenti Webhelybeállítások módszert.

3. lépés: Telepítés ellenőrzése

A webhely publikálása után nyissa meg egy új böngészőlapon vagy inkognitó ablakban. A jobb alsó sarokban látnia kell a chat widget gombot. Kattintson rá, hogy meggyőződjön a helyes működéséről.

Nem látja a widgetet? Győződjön meg róla, hogy publikálta a webhelyét a kód hozzáadása után. Az egyéni kód csak az éles webhelyen jelenik meg, nem a Designer előnézetben. Próbálja meg törölni a böngésző gyorsítótárát, vagy nézze meg inkognitó ablakban.

Az AI keresősáv hozzáadása

Az AI keresősáv külön widget saját kóddal. Adja hozzá a csevegés mellé, vagy önmagában. Standard vagy magasabb csomagot igényel: alacsonyabb csomagban a sáv megjelenik, de nem ad találatot.

Adja hozzá a data-replace attribútumot a script címkéhez, és a sáv a téma meglévő sávjának helyére kerül. Adja hozzá a Site Settings, Custom Code, Footer alatt, ugyanoda, ahová a csevegőkódot, így közvetlenül a záró body címke elé kerül.

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

Olvassa el az AI keresősáv teljes útmutatóját