Zo voeg je een AI-chatbot toe aan Webflow (in 5 minuten)

Nexoply is een AI-assistent die je in een eigen dashboard bouwt en met één scripttag aan een Webflow-site toevoegt. Webflow bevat alleen die regel; de kennis, het uiterlijk en het gedrag van de assistent beheer je in Nexoply, zonder code en zonder AI-sleutel, omdat Nexoply de AI regelt. In de praktijk betekent dat:

• Hij kent het bedrijf. Voeg diensten en prijzen, veelgestelde vragen, voorwaarden, openingstijden en werkgebieden toe, of importeer ze van de openbare pagina's van de Webflow-site (15 per scan met het Gratis-abonnement). Er wordt niets toegevoegd zonder jouw akkoord.
• Hij antwoordt 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 het dashboard om terug te lezen.
• Hij past bij het ontwerp. Berichtknop of zijtab, kleuren, lettertypen en logo, kant-en-klare sjablonen, een aparte look op telefoons, paginaregels voor bepaalde pagina's en knoppen op het startscherm, zoals Boeken, Bellen of WhatsApp.
• Hij antwoordt in 12 talen. Bezoekers die in een andere ondersteunde taal schrijven, krijgen antwoord in die taal.
• Wat hij niet is. Het is geen live-chatinbox voor medewerkers, en hij neemt zelf geen boekingen of betalingen aan; zijn knoppen sturen bezoekers naar een boekingspagina, telefoonnummer of WhatsApp.

Het Gratis-abonnement bevat 50 gesprekken per maand; betaalde abonnementen beginnen bij $19 per maand, zie de prijspagina. Bouw je Webflow-sites voor klanten? Elk bedrijf heeft een eigen Nexoply-account en één chatbot, dus richt hem in met de eigen informatie van de klant. Voor alle opties, zie de chatbotfuncties.

Controleer eerst deze drie dingen:

• Een Nexoply-account. Meld je gratis aan: het Gratis-abonnement bevat 50 gesprekken per maand, zonder creditcard.
• De bedrijfsinformatie in Nexoply: diensten en prijzen, veelgestelde vragen, voorwaarden, openingstijden en werkgebieden. Het snelst gaat het als je het adres van de Webflow-site invult en Nexoply de openbare pagina's laat importeren, ook pagina's die met JavaScript zijn gebouwd. Jij controleert de voorstellen; er wordt niets toegevoegd zonder jouw akkoord.
• Toegang tot de instellingen van het Webflow-project, en een abonnement dat eigen code toestaat. Zijn de instellingen voor Custom code voor jou niet beschikbaar, controleer dan je abonnement of vraag het aan de eigenaar van de website.

Open in je Nexoply-dashboard de pagina Chatbot (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. Wil je de assistent zien voordat je iets in Webflow doet? Klik op Open een testpagina met je chatbot om hem op een voorbeeldpagina uit te proberen.

1. 1

   Open Project settings

   Open in Webflow de Project settings van het project.

2. 2

   Ga naar Custom code

   Open het onderdeel Custom code. Code hier geldt voor de hele website, dus hij wordt op elke pagina van het project uitgevoerd.

3. 3

   Plak in Footer code

   Plak je Nexoply-code in Footer code. Footer code staat vlak voor het einde van elke pagina, en daar hoort het script ook.

4. 4

   Opslaan

   Sla de wijzigingen in Project settings op.

5. 5

   Publiceren

   Publiceer de website. Eigen code wordt alleen aan de gepubliceerde website toegevoegd, dus pas met deze stap verschijnt de chatknop.

Open de gepubliceerde website in een nieuw privévenster, zodat je hem ziet zoals een bezoeker. In de onderste hoek verschijnt een chatknop. Stel een echte vraag, zoals “Nemen jullie nieuwe patiënten aan?” of “Wat moet ik meenemen naar mijn eerste afspraak?” (meer voorbeelden in de handleiding AI-chatbot voor klinieken). 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 de website, zonder dat je in Webflow opnieuw hoeft te publiceren.

• Niet gepubliceerd. Project settings opslaan is niet genoeg: publiceer de website en laad hem daarna opnieuw.
• Je kijkt in de Designer. Controleer de gepubliceerde website in een privévenster, niet in de Designer.
• Verkeerd veld of onvolledige code. Open Custom code opnieuw en controleer of de code in Footer code staat, compleet en ongewijzigd, van <script tot </script>.
• Abonnement of rechten. Kun je geen eigen code opslaan, controleer dan of je Webflow-abonnement dat toestaat, of dat je rol in het project je Project settings laat bewerken.
• Toegestane domeinen. Heb je op de pagina Chatbot Alleen toestaan op deze websites ingevuld, zet dan elk adres erin waarop de website gepubliceerd is (bijvoorbeeld mijnkliniek.nl, of *.mijnkliniek.nl voor subdomeinen).
• Content-Security-Policy. Stuurt de website een Content-Security-Policy mee, sta dan https://nexoply.com toe 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, niet in Webflow. Onder Chatbot → Aanpassen kies je het pictogram van de berichtknop (je eigen afbeelding of geplakte SVG-code), 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 het uiterlijk op bepaalde pagina's wijzigen (bijvoorbeeld /services/*). Stem het chatvenster af op de lettertypen en kleuren van de website, voeg een logo toe of begin met een kant-en-klaar sjabloon. Een startscherm kan je eigen knoppen tonen, zoals Boeken, Bellen of WhatsApp.

Wil je de chat openen vanuit een van je eigen Webflow-knoppen, dan kan een kort script window.dispatchEvent(new Event("nexoply:open-chat")) aanroepen; wil je hem openen zodra de pagina geladen is, voeg dan data-open="true" toe aan de scripttag. Bekijk daarna regelmatig de gesprekken: vragen die de assistent niet kon beantwoorden staan in een lijst en worden met één klik een veelgestelde vraag. Lees hoe Nexoply werkt voor het volledige beeld, of zie zo voeg je een AI-chatbot toe aan elke website voor andere platforms.