Hoe voegt u de Asyntai AI-chatbot toe aan WordPress

Stapsgewijze handleiding voor WordPress-websites

Platform:

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai-dashboard en scrol omlaag naar het gedeelte "Embed Code". Kopieer uw unieke insluitcode, die er zo uitziet:

<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: Kies een installatiemethode

Er zijn verschillende manieren om de chatwidget aan WordPress toe te voegen. Kies de methode die het beste bij u past:

Methode 1: Een plugin gebruiken (aanbevolen)

De eenvoudigste manier om de chatwidget toe te voegen is met de gratis plugin "WPCode" (voorheen "Insert Headers and Footers").

WPCode gebruiken (gratis)

Ga naar Plugins → Add Plugin in uw WordPress-beheer
Zoek naar "WPCode" en installeer het
Activeer de plugin
Ga naar Code Snippets → Header & Footer
Plak uw Asyntai-insluitcode in het gedeelte "Footer"
Klik op "Save Changes"

Waarom een plugin gebruiken? Het gebruik van een plugin zorgt ervoor dat uw code behouden blijft, zelfs wanneer u uw WordPress-thema bijwerkt of wijzigt.

Methode 2: Themabestanden bewerken

U kunt de code rechtstreeks aan uw themabestanden toevoegen. De locatie van de Theme File Editor is afhankelijk van uw WordPress-versie en thematype.

Voor klassieke thema's

Ga naar Appearance → Theme File Editor in uw WordPress-admin
Selecteer uw actieve thema uit het dropdown-menu (als het nog niet is geselecteerd)
Zoek en klik op footer.php in de bestandenlijst aan de rechterkant
Scroll naar beneden en zoek de afsluitende </body>-tag
Plak uw Asyntai-insluitcode net vóór de </body>-tag
Klik op "Update File"

Voor blokthema's (FSE-thema's)

Blokthema's (zoals Twenty Twenty-Four en andere Full Site Editing-thema's) hebben geen footer.php-bestand en geen </body>-tag in hun themabestanden. Gebruik voor een blokthema de pluginmethode (WPCode), die met alle thematypen werkt.

Belangrijk: Thema-updates overschrijven uw wijzigingen. Gebruik voor een permanente oplossing een child-thema of de pluginmethode.

Methode 3: Elementor gebruiken

Als u Elementor gebruikt, kunt u de code toevoegen via de aangepaste codefunctie van Elementor.

Elementor Pro

Ga naar Elementor → Custom Code
Klik op "Add New"
Geef het een naam zoals "Asyntai Chatbot"
Stel Location in op "<body> – End"
Plak uw Asyntai-insluitcode
Stel Weergavevoorwaarden in op "Entire Site"
Klik op "Publish"

Elementor Free

Als u de gratis versie van Elementor gebruikt, gebruik dan de hierboven beschreven pluginmethode, aangezien aangepaste code-injectie Elementor Pro vereist.

Stap 3: Installatie verifiëren

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

Ziet u de widget niet? Wis uw browsercache en eventuele WordPress-cacheplugins. Als u een cacheplugin gebruikt zoals WP Rocket of W3 Total Cache, wis dan de cache na het toevoegen van de code.

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 deze toe met dezelfde header- en footerplugin die u voor de chatcode hebt gebruikt, zoals WPCode. Het script hoeft niet bij uw zoekvak te staan, dus u hoeft geen themabestand te bewerken.

<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

Documentatie