Een AI-chatbot toevoegen aan je Webflow-site

Webflow-sites zien er gelikt uit, laden snel en geven je precieze controle over het design. Maar ze hebben geen ingebouwde AI-chat. Wil je een chatbot die je content echt begrijpt en volwaardige gesprekken met bezoekers kan voeren, dan moet je er zelf een toevoegen.

Het goede nieuws: het toevoegen van een AI-chatbot aan Webflow duurt ongeveer 20 minuten en vereist geen code, behalve het plakken van één scripttag. Je maakt de chatbot aan, traint hem op je sitecontent en voegt hem toe aan Webflow via de Custom Code-instellingen. Hij werkt op elke pagina, past bij je design en beantwoordt bezoekersvragen meteen.

Deze gids behandelt het hele proces: de chatbot aanmaken en trainen, hem insluiten in Webflow, het uiterlijk aanpassen en hem configureren voor het beste resultaat.

Webflow-chatbotopties vergeleken

Voordat we bij de installatie komen, hier een vergelijking van de belangrijkste manieren om chatfunctionaliteit aan Webflow toe te voegen.

Wil je een chatwidget waarbij een menselijk team in realtime reageert, dan is een livechat-tool zoals Intercom de juiste keuze. Wil je een AI-gestuurde assistent die vragen automatisch beantwoordt, getraind op je daadwerkelijke sitecontent, dan is een AI-chatbot de betere fit. De meeste Webflow-sitebeheerders willen dat laatste -- een selfservice-assistent die bezoekersvragen afhandelt zonder dat daar personeel voor nodig is.

Stap 1: maak je chatbot aan

Begin met het aanmaken van een chatbot op Agentkit. Je hebt een gratis account nodig.

1. Ga naar Agentkit en meld je aan.
2. Maak een nieuwe chatbot aan en geef hem een naam die past bij zijn doel (bijv. "Website-assistent" of je merknaam).
3. Kies een AI-model. GPT-4o is een sterke standaardkeuze. Je hebt een reeks modellen om uit te kiezen van OpenAI, Anthropic (Claude) en Google (Gemini).

Stap 2: train op je Webflow-sitecontent

Dit is de stap die de chatbot echt bruikbaar maakt. Je geeft hem je daadwerkelijke websitecontent zodat hij bezoekersvragen accuraat kan beantwoorden.

Voeg je website-URL toe

1. Ga in het Agentkit-dashboard naar de pagina Bronnen van je chatbot.
2. Klik op Bron toevoegen en kies Website.
3. Voer de URL van je Webflow-site in (bijv. https://jouwsite.webflow.io of je custom domain https://jouwsite.com).
4. De crawler volgt links vanaf je hoofd-URL en indexeert alle toegankelijke pagina's: je homepage, over-ons-pagina, dienstenpagina's, portfolio, blogposts, FAQ, prijzen en alle andere gekoppelde content.

Voor Webflow-sites die interacties, animaties of dynamisch geladen content gebruiken, rendert de Agentkit-crawler eerst JavaScript via Firecrawl voordat hij indexeert. Zo wordt content die via Webflow-interacties wordt geladen, ook accuraat vastgelegd.

Voeg Q&A-paren toe voor belangrijke onderwerpen

Terwijl de website-crawl je algemene content vastlegt, geven Q&A-paren je precieze controle over specifieke antwoorden. Maak paren aan voor je belangrijkste bezoekersvragen:

Q&A-paren krijgen voorrang op gecrawlde content, dus ze zijn je middel om ervoor te zorgen dat de chatbot bij cruciale onderwerpen precies zegt wat jij wilt.

Upload documenten (optioneel)

Heb je bronnen die niet op je Webflow-site zijn gepubliceerd -- case studies in PDF-formaat, dienstspecificatiedocumenten, prijslijsten -- upload ze dan als documentbronnen. De chatbot gebruikt deze content naast je websitegegevens om vragen te beantwoorden.

Test in de Playground

Test de chatbot in de Agentkit Playground voordat je hem aan je live site toevoegt.

Stel de vragen die je bezoekers doorgaans stellen:

• "Welke diensten bieden jullie aan?"
• "Wat kost het?"
• "Hoe kom ik aan de slag?"
• "Werken jullie met bedrijven in [branche]?"
• "Wat is jullie retourbeleid?"

Klopt een antwoord niet, is het onvolledig of slecht geformuleerd, pas dan je trainingsdata aan. Voeg Q&A-paren toe of werk ze bij, voeg meer tekstfragmenten toe, of verfijn je websitebron zodat specifieke pagina's die je hebt gemist, worden meegenomen.

Stap 3: pas het uiterlijk van de widget aan

Configureer voordat je gaat insluiten de chatbotwidget zodat hij past bij het design van je Webflow-site.

Ga in het Agentkit-dashboard naar het tabblad Ontwerp van je chatbot:

Kleurthema. Stel de primaire kleur in zodat die bij je merk past. Gebruik de exacte hexcode uit je Webflow-stijlgids. De chatbubbel, header en verzendknop gebruiken allemaal deze kleur.

Positie. Kies rechtsonder (standaard en het meest gebruikelijk) of linksonder. Kies de kant die niet conflicteert met andere zwevende elementen op je Webflow-site.

Welkomstbericht. Schrijf een bericht dat past bij je merkstem en duidelijke verwachtingen schept:

• Voor een dienstverlenend bedrijf: "Hoi, ik kan vragen beantwoorden over onze diensten, prijzen en werkwijze. Waarmee kan ik je helpen?"
• Voor een SaaS-product: "Welkom! Vraag me alles over ons product, de functies of de prijzen."
• Voor een portfoliosite: "Hallo. Ik kan je vertellen over ons werk, onze mogelijkheden en hoe we samenwerken met klanten."

Voorgestelde berichten. Voeg drie tot vijf voorgestelde berichten toe die bezoekers naar je waardevolste gesprekken leiden:

• "Welke diensten bieden jullie aan?"
• "Wat kost het?"
• "Kan ik voorbeelden van jullie werk zien?"
• "Hoe kom ik aan de slag?"

Avatar. Upload je logo of een merkicoon als chatbotavatar voor een samenhangende uitstraling.

Stap 4: insluiten in Webflow

Nu volgt de daadwerkelijke installatie. Je hebt in Webflow twee opties: site-breed (elke pagina) of paginaspecifiek.

Optie A: site-brede installatie (aanbevolen)

Hiermee voeg je de chatbot toe aan elke pagina van je Webflow-site.

1. Ga in het Agentkit-dashboard naar het tabblad Publiceren van je chatbot.
2. Kopieer de scripttag:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

3. Open in Webflow je Project Settings (het tandwielicoon in de linkerzijbalk van de Designer, of vanuit het projectdashboard).
4. Ga naar het tabblad Custom Code.
5. Plak de scripttag in de sectie Footer Code (het veld met het label "Before </body> tag").
6. Klik op Save Changes.
7. Klik op Publish zodat de wijzigingen live gaan.

De chatbot verschijnt nu op elke pagina van je gepubliceerde Webflow-site.

Optie B: paginaspecifieke installatie

Wil je de chatbot alleen op bepaalde pagina's (bijvoorbeeld je prijspagina en contactpagina, maar niet je blog):

1. Open in de Webflow Designer de pagina waar je de chatbot wilt.
2. Open de Page Settings (tandwielicoon bij de paginanaam in het Pages-paneel).
3. Scroll naar de sectie Custom Code.
4. Plak de scripttag in het veld Before </body> tag.
5. Klik op Save en daarna op Publish.

Herhaal dit voor elke pagina waar je de chatbot wilt. Pagina's zonder het script tonen de chatbot niet.

De installatie verifiëren

Na het publiceren:

1. Open je Webflow-site in een nieuw browsertabblad (of incognitovenster om caching te vermijden).
2. Zoek de chatbubbel in de hoek van de pagina.
3. Klik op de bubbel en stuur een testbericht.
4. Controleer of het antwoord klopt en de styling er goed uitziet.
5. Test op mobiel om te bevestigen dat de widget correct wordt weergegeven op kleinere schermen.

Verschijnt de chatbot niet direct na het publiceren, forceer dan een refresh (Ctrl+Shift+R of Cmd+Shift+R). Het kan een minuutje duren voordat de CDN van Webflow de bijgewerkte code doorvoert.

Stap 5: domeinbeperkingen configureren

Zodra je chatbot live staat, beperk je hem tot je domein zodat hij niet op niet-geautoriseerde sites kan worden ingesloten.

1. Ga in het Agentkit-dashboard naar de Instellingen van je chatbot.
2. Voeg onder Domeinbeperkingen je Webflow-sitedomein toe (bijv. jouwsite.com).
3. Gebruik je ook het standaard Webflow-domein (jouwsite.webflow.io), voeg dat dan ook toe.

De chatbot laadt alleen op de opgegeven domeinen. Dit voorkomt dat iemand je embedcode kopieert en je chatbot (en je berichtenquotum) op zijn eigen site gebruikt.

Webflow-specifieke tips

Werken met Webflow-interacties

Gebruikt je Webflow-site zware interacties en animaties, dan laadt de chatbotwidget onafhankelijk en verstoort hij deze niet. De widget gebruikt een vaste-positie-overlay, dus hij ligt boven op je paginacontent zonder beïnvloed te worden door Webflow-transforms of scroll-getriggerde animaties.

CMS-collectiepagina's

Heb je een Webflow CMS-blog of -portfolio, dan verschijnt de chatbot (site-breed geïnstalleerd) op elke CMS-collectiepagina. Train de chatbot op je volledige site-URL zodat hij vragen over alle content kan beantwoorden, inclusief CMS-pagina's.

Verandert je CMS-content vaak, overweeg dan het Standard-abonnement ($119.99/mnd), dat Automatisch hertrainen omvat. De chatbot crawlt je site periodiek opnieuw en pikt nieuwe CMS-items automatisch op.

Webflow Ecommerce

Train de chatbot voor Webflow Ecommerce-sites op je productpagina's, verzendbeleid, retourbeleid en FAQ. De chatbot kan productvragen beantwoorden, verzendopties uitleggen en retourverzoeken afhandelen. Zie onze ecommerce-chatbotgids voor gedetailleerd installatieadvies.

Staging versus productie

Gebruik je de staging-omgeving van Webflow (jouwsite.webflow.io) om te testen voordat je publiceert naar je custom domain, dan kun je het chatbotscript aan beide toevoegen. Gebruik de domeinbeperking om te bepalen op welk domein de chatbot actief is. Sta tijdens het testen beide domeinen toe. Beperk in productie tot alleen je custom domain.

Impact op prestaties

De Agentkit-widget laadt asynchroon (let op het async-attribuut in de scripttag). Dat betekent dat hij het laden van je pagina niet blokkeert. Hij laadt op de achtergrond nadat je paginacontent klaar is. Er is geen meetbare impact op de laadtijd of Lighthouse-score van je Webflow-site.

Leads vastleggen op Webflow

Een chatbot op je Webflow-site is naast een supporttool ook een tool om leads vast te leggen. Bezoekers die met de chatbot in gesprek gaan, hebben interesse getoond. Het vastleggen van hun e-mailadres op het juiste moment maakt van een toevallige bezoeker een opvolgkans.

Leads vastleggen instellen

1. Ga in het Agentkit-dashboard naar de Acties van je chatbot.
2. Schakel Leads verzamelen in met naam en e-mail als verplichte velden.
3. Configureer wanneer het formulier verschijnt in de instructies van je chatbot: "Bied na het beantwoorden van een bezoekersvraag over diensten of prijzen aan om meer details te sturen en gebruik het leadformulier om hun e-mailadres vast te leggen."

Leads koppelen aan je tools

Zapier, webhooks en toegang tot de REST API zijn allemaal beschikbaar vanaf het Hobby-abonnement ($29.99/mnd).

Zie voor een uitgebreidere blik op leadstrategieën Hoe je chatbots gebruikt voor leadgeneratie.

Aansluiten bij je Webflow-design

Je Webflow-site heeft een specifieke designtaal. Zo zorg je dat de chatbot native aanvoelt in plaats van er los bovenop geplakt te zijn.

Merkkleur. Kopieer de exacte hexwaarde van je primaire merkkleur uit het stijlpaneel van Webflow en gebruik die als kleur van de chatbotwidget. Zo lopen de chatbubbel en header naadloos over in je site.

Lettertypeconsistentie. De chatbotwidget gebruikt een neutrale stack van systeemlettertypen die goed samengaat met de meeste Webflow-typografiekeuzes. De tekst van de widget is bewust neutraal, zodat hij niet botst met aangepaste lettertypen.

Ruimte en positie. Heeft je Webflow-site een vaste footer, een zwevende CTA-knop of een cookiebanner, plaats de chatbot dan aan de andere kant om overlap te vermijden. Je kunt in de chatbotinstellingen kiezen voor linksonder of rechtsonder.

Toon van het welkomstbericht. Schrijf het welkomstbericht en de voorgestelde berichten in dezelfde stem als de teksten op je Webflow-site. Is je site casual en vriendelijk, dan moet de chatbot dat weerspiegelen. Is je site professioneel en formeel, dan moet de chatbot dat ook zijn.

De prestaties van je chatbot op je Webflow-site meten

Nadat de chatbot een paar weken heeft gedraaid, bekijk je de prestaties in het Agentkit-dashboard.

Bekijk de gesprekslogs de eerste maand wekelijks. Hier vind je de snelle winst: vragen die de chatbot slecht afhandelt en makkelijk te verhelpen zijn met een Q&A-paar, en vragen die goed gaan en die je kunt gebruiken om je trainingsaanpak te valideren.

Agentkit-abonnementen voor Webflow-sites

Met een jaarabonnement bespaar je ongeveer 20% op alle betaalde abonnementen. De meeste Webflow-sites beginnen met het Free-abonnement om te testen en stappen daarna over naar Hobby zodra ze zien dat de chatbot echte bezoekersvragen afhandelt.

Veelvoorkomende problemen oplossen

Chatbot verschijnt niet na het publiceren. De CDN van Webflow kan een paar minuten nodig hebben om te synchroniseren. Forceer een refresh van de pagina. Verschijnt hij nog steeds niet, controleer dan of het script in het juiste Custom Code-veld staat (Footer Code in Project Settings, of Before </body> tag in Page Settings).

Chatbot verschijnt wel in de Designer maar niet op de gepubliceerde site (of andersom). De Designer-preview voert geen custom scripts uit. Je ziet de chatbot alleen op de gepubliceerde site. Dit is normaal Webflow-gedrag.

Chatbot overlapt met een Webflow-element. Wijzig de positie van de chatbot (linksonder versus rechtsonder) in de Agentkit-instellingen, of pas de z-index van je Webflow-element aan als dat boven de chatbot moet verschijnen.

Chatbot geeft verkeerde antwoorden. Bekijk de specifieke vraag in je gesprekslogs en voeg daarna een Q&A-paar met het juiste antwoord toe of werk het bestaande bij. Q&A-paren overschrijven gecrawlde content voor overeenkomende vragen.

Chatbot laadt niet op specifieke pagina's. Heb je een paginaspecifieke installatie gebruikt, controleer dan of het script aanwezig is in de Custom Code-instellingen van die pagina. Heb je een site-brede installatie gebruikt, controleer dan of er geen conflicterend script of beveiligingsheader is die het blokkeert.

Aan de slag

Een AI-chatbot toevoegen aan je Webflow-site is een van de wijzigingen met de meeste impact die je met de minste moeite kunt doorvoeren. Eén scripttag geeft je een 24/7-assistent die bezoekersvragen beantwoordt, leads vastlegt en de ervaring verbetert voor iedereen die je site bezoekt.

1. Meld je aan bij Agentkit (gratis).
2. Maak een chatbot aan en train hem op je Webflow-site-URL.
3. Voeg Q&A-paren toe voor je belangrijkste bezoekersvragen.
4. Pas de widget aan zodat die bij je merk past.
5. Plak de embedcode in de Custom Code-instellingen van Webflow.
6. Publiceer en test.

Het hele proces duurt ongeveer 20 minuten. Je chatbot beantwoordt meteen echte bezoekersvragen.

Bouw gratis je chatbot →

Geen creditcard nodig.