Zo voeg je een AI-chatbot toe aan je website (elk platform, stap voor stap)

Een AI-chatbot aan een website toevoegen bestaat uit twee delen: de assistent bouwen en hem op de website plaatsen. Bij Nexoply gebeurt het eerste deel in het Nexoply-dashboard, zonder code en zonder AI-sleutel, omdat Nexoply de AI regelt. Het tweede deel is één regel code. Je hebt nodig:

• Een Nexoply-account. Meld je gratis aan: het Gratis-abonnement bevat 50 gesprekken per maand, zonder creditcard. Betaalde abonnementen beginnen bij $19 per maand, zie de prijspagina.
• Toegang tot de plek waar je website eigen code accepteert: een instelling voor footercode in je websitebouwer, de bestanden van je thema of je HTML-sjablonen. Controleer bij gehoste websitebouwers of je abonnement eigen code toestaat.
• Ongeveer vijf minuten, plus de tijd om je bedrijfsinformatie te controleren.

Een AI-chatbot op de website van een klein bedrijf is maar zo nuttig als wat hij weet. In Nexoply geef je hem je diensten en prijzen, veelgestelde vragen, voorwaarden, openingstijden en werkgebieden. Het snelst gaat het door je website te importeren: vul het adres van je website in en Nexoply leest je openbare pagina's (Gratis 15, Starter 40, Business 100, Pro 200 per scan), ook pagina's die met JavaScript zijn gebouwd, en stelt daarna diensten met prijzen, veelgestelde vragen, voorwaarden, openingstijden en contactgegevens voor. Jij controleert de voorstellen; er wordt niets toegevoegd zonder jouw akkoord.

Vanaf dat moment antwoordt de assistent alleen met die informatie. Hij heeft de instructie te zeggen dat hij iets niet weet in plaats van te gokken, en elk gesprek staat in je dashboard om terug te lezen. Bezoekers kunnen in een van 12 talen schrijven en krijgen antwoord in hun eigen taal. Nexoply is geen live-chatinbox voor medewerkers en neemt zelf geen boekingen of betalingen aan; zijn knoppen kunnen bezoekers naar je boekingspagina, telefoonnummer of WhatsApp sturen. Lees hoe Nexoply werkt voor het volledige beeld.

Open de pagina Chatbot in je dashboard (klik op Chatbot maken als je dat nog niet hebt gedaan) en kopieer de installatiecode. Die ziet er zo uit:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

In plaats van YOUR-KEY staat de eigen sleutel van je chatbot, die de pagina Chatbot voor je invult. De sleutel is openbaar: het is geen wachtwoord en geeft geen toegang tot je account; hij vertelt de widget alleen bij welk bedrijf hij hoort. Wil je de assistent zien voordat je je website aanpast? Klik op Open een testpagina met je chatbot.

Bewerk je je website als HTML-bestanden, plak de code dan op een eigen regel direct boven de afsluitende </body>-tag:

    <!-- …de inhoud van je pagina… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   Zoek je gedeelde footer

   Delen je pagina's een footersjabloon of include (gebruikelijk bij PHP-websites en static site generators), plak de code daar dan één keer. Anders plak je hem in elke pagina waarop de chatknop moet verschijnen.

2. 2

   Eén keer per pagina

   Eén exemplaar per pagina is genoeg. Het script laadt asynchroon, dus als je het aan het einde van de pagina zet, verschijnt je inhoud eerst.

3. 3

   Uploaden of deployen

   Sla de bestanden op en upload of deploy ze zoals je je website normaal bijwerkt.

Websitebouwers en frameworks hebben elk één plek voor code die op de hele website geldt. Plak daar dezelfde regel; de platformhandleidingen lopen elke plek stap voor stap met je door.

• Geen npm-pakket nodig. De widget is altijd dezelfde scripttag. Hij werkt ook als de tag vanuit code wordt toegevoegd, zolang het data-chatbot-attribuut blijft staan en de src widget.js bevat.
• Single-page apps. Hij wordt één keer op de pagina gekoppeld, buiten het rootelement van je app, houdt het gesprek vast terwijl bezoekers navigeren en controleert de paginaregels opnieuw als de URL verandert. Twee keer laden kan geen kwaad.
• Server-side rendering. Hij draait alleen in de browser en raakt de markup van je framework niet aan, dus er zijn geen hydration-problemen.
• Content-Security-Policy. Stuurt je website er een mee, sta dan https://nexoply.com toe in script-src, connect-src en img-src.
• Lokaal testen. Vul je Alleen toestaan op deze websites in, voeg dan je lokale ontwikkelhost met poort toe (bijvoorbeeld localhost:3000), of laat de lijst leeg zolang je test.

Open je live website in een nieuw privévenster. In de onderste hoek verschijnt een chatknop. Stel een echte vraag, zoals “Komen jullie in het weekend ook voor spoedgevallen?” of “In welke regio's werken jullie?” (meer voorbeelden in de handleiding AI-chatbot voor loodgieters). Binnen enkele seconden verschijnt het gesprek onder Gesprekken in je Nexoply-dashboard. Vanaf dat moment staan wijzigingen die je in het dashboard doet binnen ongeveer een minuut op je website, zonder dat je de code opnieuw hoeft te bewerken.

• Code nog niet live. Controleer of de wijziging is opgeslagen en gepubliceerd of gedeployd, en laad de live website opnieuw in een privévenster. Het voorbeeld in de editor van een websitebouwer voert niet altijd eigen code uit.
• Code gewijzigd of onvolledig. Controleer of de regel compleet is, van <script tot </script>, met data-chatbot en je sleutel ongewijzigd.
• Eigen code niet toegestaan. Bij gehoste websitebouwers kan eigen code van je abonnement afhangen (Wix vraagt bijvoorbeeld een premium-abonnement met een gekoppeld domein, en Squarespace het Business-abonnement of hoger).
• Toegestane domeinen. Heb je op de pagina Chatbot Alleen toestaan op deze websites ingevuld, zorg dan dat elk adres van je website er precies goed in staat (bijvoorbeeld mijnbedrijf.nl, of *.mijnbedrijf.nl voor subdomeinen).
• Content-Security-Policy. Een strikt beleid blokkeert het script totdat https://nexoply.com is toegestaan in script-src, connect-src en img-src.
• Chatbot uitgeschakeld, of adblockers. Controleer of de schakelaar Chatbot ingeschakeld aan staat. Heel soms blokkeert een browserextensie chatwidgets; probeer een andere browser.

Het ontwerp stel je in je Nexoply-dashboard in, nooit in de code van je website. Onder Chatbot → Aanpassen kies je het pictogram van de berichtknop (of je eigen afbeelding of SVG), het tekstlabel, de vorm, grootte, kleuren, rand, schaduw en positie, of gebruik je in plaats daarvan een zijtab aan de rand van het scherm (zoals “Hulp”). Je kunt een andere look instellen voor telefoons, en met paginaregels de knop op bepaalde pagina's wijzigen of verbergen (bijvoorbeeld /services/*). Stem het chatvenster af op je lettertypen en kleuren, voeg je logo toe of begin met een kant-en-klaar sjabloon. Een startscherm kan je eigen knoppen tonen, zoals Boeken, Bellen of WhatsApp. De widget gebruikt een Shadow DOM, dus de CSS van je website heeft er geen invloed op.

Bekijk daarna regelmatig de gesprekken: vragen die de assistent niet kon beantwoorden staan in een lijst en worden met één klik een veelgestelde vraag, en de inzichten tonen onderwerpen, de drukste momenten en de pagina's waarop de chat werd geopend. Voor alle opties, zie de chatbotfuncties; wil je eerst tools vergelijken, lees dan de beste AI-chatbots voor kleine bedrijven.