WebChatAgent Logo

Embed een AI Chatbot op je website

Website Embed

Dit is de universele manier om je chatbot aan elke website toe te voegen. Je plakt twee korte regels in de HTML van je site: een <script>-tag die de widget laadt, en een <web-chat-agent>-element dat aangeeft welke chatbot getoond moet worden. Dat is alles, de zwevende chatbubbel verschijnt in de hoek van elke pagina waar de code draait.

Als je WordPress, Shopify, Wix, Squarespace of Webflow gebruikt, raadpleeg dan de specifieke handleiding voor jouw platform. Daarin staat precies waar je dezelfde code moet plakken.

Waar vind je je Chatbot-ID

Je hoeft het ID nooit handmatig in te voeren. In het WebChatAgent-dashboard:

  1. Open je chatbot.
  2. Ga naar Kanalen → Chatwidget en vouw Installatiedetails tonen uit.
  3. Klik op de knop Kopiëren bij het codeblok.

Het gekopieerde fragment bevat al je Chatbot-ID, dus je hoeft het alleen maar te plakken. (Als je het losse ID ooit nodig hebt, vind je dit als de lange tekenreeks in je dashboard-URL: /dashboard/<your-chatbot-id>.)

De te plakken code

Plak dit vlak voor de sluitende </body>-tag van je site:

<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>

Vervang YOUR_ID door je Chatbot-ID (of kopieer voor het gemak het kant-en-klare fragment uit het dashboard, waarin het ID al is ingevuld). De widget laadt asynchroon, dus je pagina wordt niet vertraagd, en verschijnt als een zwevende chatknop in de onderste hoek.

Optionele attributen

De widget haalt zijn kleuren, titel, welkomstbericht en gedrag op uit je dashboardinstellingen, waardoor je normaal gesproken alleen chatbot-id nodig hebt. Om bepaalde instellingen direct in de HTML te overschrijven, voeg je deze attributen toe aan het <web-chat-agent>-element:

  • chatbot-id, Je Chatbot-ID. Verplicht.
  • theme, Visuele stijl: "default" of "modern". Standaard ingesteld op "default".
  • initially-open, Stel in op "true" om de chat automatisch te openen zodra de pagina laadt. Standaard ingesteld op "false" (gesloten).
  • tracking-consent, Optioneel toestemmingssignaal voor permanente personalisatie: "unknown", "denied" of "granted". Indien weggelaten, staat dit standaard op "unknown" en blijven anonieme lokale triggers werken.
  • context-data, Sessiecontext vanaf je pagina voor de AI (bijvoorbeeld "Customer=Acme GmbH;OrderID=A-1023"), handig wanneer de widget binnen een CRM of een ingelogde omgeving draait. Formaten, limieten en beveiligingsopmerkingen vind je in de ontwikkelaarshandleiding.
<web-chat-agent
  chatbot-id="YOUR_ID"
  theme="modern"
  initially-open="false"
></web-chat-agent>

Al het overige, zoals merkkleur, avatar, lettertypen, positie en gedrag, stel je in onder Kanalen → Chatwidget. Je hoeft de code dus niet opnieuw aan te passen om de stijl van de widget te wijzigen. De persona van de assistent configureer je onder Instellingen → Antwoordstijl en rol.

Cookietoestemming en proactieve triggers

De widget voegt geen tweede cookiebanner toe. Zonder toestemmingssignaal draait deze in de anonieme privacymodus: triggers voor tijd, scrollen, exit-intentie, inactiviteit, URL, zichtbaarheid en rage-clicks worden lokaal in het geheugen verwerkt. Herkenning van terugkerende bezoekers, permanente tellers, proactieve analyse en door AI gegenereerde begroetingen wachten op een granted-signaal.

Zie Cookietoestemming en anonieme proactieve triggers voor de volledige gedragsmatrix, CMP-voorbeelden en opslagreferenties.

De chat binnen de pagina insluiten

Het bovenstaande fragment geeft een zwevende knop. Als je de chat liever in je paginalay-out plaatst, bijvoorbeeld een volledig chatpaneel op een speciale ondersteuningspagina, gebruik dan de inline-widget. Deze laadt een ander script en een ander element:

<script src="https://webchatagent.com/widget/chat-widget-inline.js" async></script>
<web-chat-agent-inline chatbot-id="YOUR_ID"></web-chat-agent-inline>

De inlinechat wordt weergegeven op de plek waar je het element plaatst. Zet het dus in het gewenste container-element op je pagina. Zie de Inlinechat-handleiding voor meer informatie over de lay-out.

Werkt overal

Beide fragmenten bestaan uit standaard HTML en een custom element. Ze werken daardoor op elk websiteplatform, zoals WordPress, Shopify, Wix, Squarespace, Webflow en handgeschreven HTML/JS-sites. Plak de code in de HTML van je site en publiceer de wijzigingen.

Probleemoplossing

  • Verschijnt de widget niet? Controleer of de code in de HTML van de pagina staat (vóór </body>) en of je eventuele caching-plugins hebt geleegd of de pagina opnieuw hebt gepubliceerd. Controleer de browserconsole op geblokkeerde scripts.
  • Alleen zichtbaar op één pagina? Plaats het fragment op een sitewijde locatie (footer of globale code) en niet op een losse pagina.