Praktijkgids
AI-chatbot integreren in je website (5 manieren)
Een AI-chatbot op je website krijgen is geen developer-project. Hieronder vijf integratievormen — van klassieke floating widget tot inline embed en directe link in e-mail — wat ze opleveren, en welke past bij welk type site. Inclusief de no-code stappen en wat je moet testen vóór livegang.
1. Floating widget rechtsonder
De klassieker. Een ronde knop in de hoek, met een groet of vraag-prompt. Open een gesprek door erop te klikken; sluit het en het minimaliseert weer. Werkt voor 80% van de webshops en service-sites die we zien.
Wanneer kiezen
Standaard. Begin hier tenzij je een specifieke reden hebt voor iets anders.
2. Inline embed op de support-pagina
De chatbot staat als een gewoon blok in de pagina, niet als overlay. Werkt sterk op pagina's als /klantenservice of /faq waar bezoekers expliciet hulp zoeken. Voordeel: bezoekers zien dat hij er is en typen direct hun vraag.
3. Pre-launch trigger op intent
De chatbot opent zichzelf bij een specifieke gebeurtenis: gebruiker scrollt over 70% van de productpagina, blijft 30 seconden hangen, of beweegt richting de exit-button. Krachtige vorm voor productpagina's met een conversiedoel — gevoelig voor over-driven worden.
Wat je niet doet
Direct openen na 3 seconden op de homepage. Dat is reclame, geen service. Trigger op intent, niet op tijd.
4. Side-panel voor lange productpagina's
Een vast paneel rechts naast de productinhoud, alleen op specifieke pagina's. Werkt op B2B-sites en complexe productcategorieën waar bezoekers tijdens het lezen vragen krijgen. De chatbot blijft zichtbaar terwijl ze de pagina bekijken.
5. Directe link uit e-mail of campagne
Een URL die direct een chatgesprek opent op je site, eventueel met een vooraf-ingevulde vraag. Sterk in nieuwsbrieven, retourbevestigingen en service-e-mails: één klik en de klant zit in het gesprek met context.
Welke vorm past bij welk type site
| Type site | Aanbevolen vorm | Optioneel |
|---|---|---|
| Webshop (B2C) | Floating widget | Pre-launch trigger op productpagina |
| Webshop (B2B) | Floating widget + side-panel | Inline op aanvraagpagina |
| Service / advies | Floating widget | Inline op contact-pagina |
| Documentatie / kennisbank | Inline embed | Floating widget |
| Campagne-landingspage | Pre-launch + directe link | — |
De technische kant in 5 minuten (no-code)
- Kopieer het script uit je Chatwize-dashboard.
- Plak het in de footer of net voor de </body>-tag van je website.
- Refresh de pagina — de widget verschijnt rechtsonder.
- Pas in het dashboard kleur, positie en welkomstbericht aan.
- Klaar. Geen build-stap, geen deploy, geen DNS.
Voor WordPress, Shopify, Webflow, Wix
Alle vier hebben een “custom code” of “embed” veld in de instellingen waar het script in past. Geen plugin nodig — de officiële embed-velden werken.
Wat te testen vóór livegang
5 tests voor je publiceert
- Werkt de chatbot op mobiel (iOS Safari, Android Chrome)? Ander gedrag op kleinere schermen.
- Sluit en heropen het gesprek — onthoudt hij context binnen één sessie?
- Test in een incognito-venster — weergave kan verschillen door cookie-banners.
- Klik op een link die de bot toont — opent hij in een nieuwe tab of overschrijft hij de pagina?
- Probeer hem in een andere taal — herkent en schakelt hij correct?
Veelgestelde vragen over een AI-chatbot op je website
- Welk script moet ik in de HTML zetten?
- Eén regel JavaScript-script uit je dashboard, die je in de footer (vlak voor </body>) plakt. Dat script laadt de widget asynchroon, zodat hij je site-snelheid niet vertraagt. Geen build, geen pakketmanager, geen extra dependencies.
- Werkt dit ook met WordPress, Shopify, Webflow of Wix?
- Ja, in alle vier. WordPress: in het thema-bestand of via een “Insert Headers and Footers”-plugin. Shopify: in theme.liquid voor </body>. Webflow: in Project Settings → Custom Code → Footer. Wix: in Settings → Custom Code. Geen marketplace-plugin nodig.
- Hoe pas ik de huisstijl van de chatbot aan?
- In het dashboard: hoofdkleur, accentkleur, corner-radius, lettertype, logo, welkomstbericht en optionele afbeelding. Voor 95% van de sites is dat genoeg om naadloos aan te sluiten op je merk. Geavanceerde CSS-overrides zijn optioneel.
- Kan ik de chatbot eerst alleen op één pagina testen?
- Ja. Plak het script alleen op die specifieke pagina (in WordPress per pagina via Custom HTML-blok, in Webflow via per-page custom code). Zo test je het op een staging-pagina voordat je site-breed gaat.
- Wat als de chatbot niet laadt?
- Drie meest voorkomende oorzaken: (1) script staat boven </head> in plaats van vlak voor </body>, (2) Content Security Policy blokkeert externe scripts, (3) ad blocker van de bezoeker. In dat laatste geval is dat geen bug maar een ontwerp-keuze van de bezoeker.
- Vertraagt de chatbot mijn pagina-snelheid (en SEO)?
- Nee, mits je het script asynchroon laadt (standaard bij Chatwize). De widget initialiseert pas na de pageload, dus je Core Web Vitals (LCP, INP, CLS) blijven onaangetast. Een goede chatbot heeft <50KB initial payload.
Klaar om dit voor je eigen team te realiseren?
Boek een korte demo en we laten zien hoe Chatwize past op jouw klantvragen, kanalen en processen.