Hoe voegt u de Asyntai AI-chatbot toe aan Webflow

Stapsgewijze handleiding voor Webflow-websites

Platform:

Stap 1: Uw insluitcode ophalen

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>

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

Stap 2: Code toevoegen via Site-instellingen (alle pagina's)

Om de chatbot in \u00e9\u00e9n keer aan alle pagina's van uw Webflow-site toe te voegen:

Log in op uw Webflow-account en selecteer uw project
Klik op het tandwielpictogram (Site-instellingen) in de linkerzijbalk
Klik op "Custom Code" in het instellingenmenu
Scroll naar beneden naar het gedeelte "Footer Code" (vóór de </body>-tag)
Plak uw Asyntai-insluitcode
Klik op "Save Changes"
Publiceer uw site zodat de wijzigingen live gaan

Tip: Het toevoegen van de code aan het Footer-gedeelte plaatst deze vlak voor de afsluitende </body>-tag, wat aanbevolen is voor chatwidgets omdat het uw pagina niet vertraagt.

Alternatief: Paginaspecifieke aangepaste code

Als u de chatbot alleen op specifieke pagina's wilt:

Open uw project in de Webflow Designer
Klik op het Paginapaneel (mappictogram) in de linkerzijbalk
Beweeg de muis over de pagina die u wilt bewerken en klik op het tandwielpictogram
Scroll naar beneden naar "Custom Code"
Plak uw Asyntai-insluitcode in het gedeelte "Before </body> tag"
Klik op "Save"
Publiceer uw site

Alternatief: Embed-element gebruiken

U kunt de chatbot ook toevoegen met het Embed-element, waar dan ook op uw pagina:

Open uw project in de Webflow Designer
Klik op de "+"-knop om het toevoegpaneel te openen
Zoek naar "Embed" of vind het onder Components
Sleep het Embed-element naar uw pagina
Plak uw Asyntai-insluitcode in de code-editor
Klik op "Save & Close"
Publiceer uw site

Belangrijk: Wanneer u het Embed-element gebruikt, moet u het toevoegen aan elke pagina waar u de chatbot wilt. Voor een sitewijde installatie gebruikt u de hierboven beschreven methode via Site-instellingen.

Stap 3: Installatie verifiëren

Open na het publiceren van uw site deze in een nieuw browsertabblad of incognitovenster. U zou de chatwidgetknop rechtsonder moeten zien. Klik erop om te controleren of deze correct opent en werkt.

Ziet u de widget niet? Zorg ervoor dat u uw site hebt gepubliceerd na het toevoegen van de code. Aangepaste code verschijnt alleen op de live site, niet in het Designer-voorbeeld. Probeer uw browsercache te wissen of bekijk de pagina in een incognitovenster.

De AI-zoekbalk toevoegen

De AI-zoekbalk is een aparte widget met een eigen code. Voeg hem toe naast de chat, of los. Hij vereist het Standard-abonnement of hoger: bij een lager abonnement verschijnt de balk maar geeft hij geen resultaten.

Voeg het attribuut data-replace toe aan de scripttag en de balk neemt de plaats in van die van uw thema. Voeg het toe onder Site Settings, Custom Code, Footer, dezelfde plek als de chatcode, waardoor het vlak voor de afsluitende body-tag komt te staan.

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

Lees de volledige handleiding voor de AI-zoekbalk