Chatbot insluiten op elke website

Je hebt een getrainde chatbot. Nu moet je hem op je website plaatsen. Agentkit ondersteunt vier insluitmethoden, en welke het beste past, hangt af van je platform, je technische opzet en hoeveel controle je nodig hebt. Deze gids behandelt alle vier de opties met codevoorbeelden, configuratiedetails en platformspecifieke instructies.

Insluitmethoden in één oogopslag

De meeste gebruikers beginnen het best met de JS-widget. Hij werkt op elk platform, laadt asynchroon en is in minder dan vijf minuten opgezet.

Voordat je begint

Elke insluitmethode vereist een getrainde chatbot. Heb je die nog niet:

1. Meld je aan bij Agentkit (gratis).
2. Maak een chatbot aan en train hem op je content met website-URL's, documenten, Q&A-paren of tekst.
3. Test hem in de Playground tot de antwoorden accuraat zijn.
4. Haal je embedcode op via Instellingen en daarna Publiceren in het dashboard.

Zie voor trainingsuitleg Je chatbot trainen op je websitecontent.

Methode 1: JavaScript-widget

De JS-widget is de universele insluitmethode. Eén scripttag, geplaatst vóór de afsluitende </body>-tag, laadt een chatbubbel op je site. Hij werkt op elk platform dat aangepast JavaScript toestaat: statische HTML-sites, CMS-platforms, landingspagina-bouwers en webapplicaties.

Basisinstallatie

Kopieer deze scripttag en plaats hem vóór de afsluitende </body>-tag op je pagina:

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

Vervang your-chatbot-id door de daadwerkelijke ID uit je Agentkit-dashboard. Het async-attribuut zorgt ervoor dat het script laadt zonder je pagina te blokkeren.

Dat is alles wat je nodig hebt voor een werkende chatbot. De widget verschijnt als chatbubbel rechtsonder in de hoek. Bezoekers klikken erop om een gesprek te openen.

Configuratie via data-attributen

Je kunt het gedrag van de widget aanpassen door data-attributen aan de scripttag toe te voegen:

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

Beschikbare data-attributen

De meeste visuele aanpassingen (kleuren, welkomstbericht, branding) worden geregeld vanuit het Agentkit-dashboard in plaats van via data-attributen. Zo blijft je embedcode eenvoudig en kun je instellingen wijzigen zonder code op je site aan te passen.

Hoe de widget laadt

Het widgetscript is licht en laadt asynchroon. Dit gebeurt er:

1. Je pagina laadt normaal. Het async-attribuut zorgt dat het script het renderen niet blokkeert.
2. Het script wordt gedownload van onze CDN en initialiseert.
3. Er verschijnt een chatbubbel op de pagina.
4. Klikt een bezoeker op de bubbel, dan laadt de volledige chatinterface.
5. Berichten worden naar de Agentkit-API gestuurd en in realtime teruggestreamd.

Het initiële script is klein. De volledige chatinterface laadt alleen wanneer de bezoeker de bubbel gebruikt, waardoor de impact op je paginasnelheid minimaal is.

Platformspecifieke widgetinstallatie

De JS-widget werkt op alle platforms, maar de stappen om het script toe te voegen verschillen per platform. Hier zijn snelle links naar platformspecifieke gidsen:

Methode 2: React-component

Bouw je met React, Next.js, Remix of Gatsby, dan geeft de React-component je een strakkere integratie dan de kale scripttag. Je krijgt configuratie via props, TypeScript-types en de mogelijkheid om in te haken op chatbot-events.

Installatie

Installeer het Agentkit React-pakket:

npm install @agentkit/react

Basisgebruik

import { AgentitkChat } from '@agentkit/react';

function App() {
  return (
    <AgentitkChat chatbotId="your-chatbot-id" />
  );
}

Dit rendert dezelfde chatbubbel als de JS-widget, maar als React-component binnen de componentenboom van je app.

Props

Next.js-integratie

Voeg in een Next.js App Router-project de chatbot toe aan je root layout, zodat hij op alle pagina's verschijnt:

// app/layout.tsx
import { AgentitkChat } from '@agentkit/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <AgentitkChat chatbotId="your-chatbot-id" />
      </body>
    </html>
  );
}

Voor de Pages Router voeg je de component in plaats daarvan toe aan _app.tsx.

Wanneer gebruik je de React-component versus de JS-widget

Gebruik je React, gebruik dan de React-component. Voor al het andere gebruik je de JS-widget.

Methode 3: iframe

De iframe-methode sluit de chatbot in als losstaande pagina binnen een frame op je site. Dit is nuttig in omgevingen waar JavaScript-injectie beperkt is, of waar je de chatbot als inline element wilt tonen in plaats van als zwevende bubbel.

Basis iframe-insluiting

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

Dit toont de volledige chatinterface inline op je pagina, niet als zwevende bubbel.

Wanneer gebruik je een iframe

iframe-configuratie

Pas de iframe aan via URL-parameters:

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id?theme=dark"
  style="width: 400px; height: 600px; border: none; border-radius: 12px;"
  allow="clipboard-write">
</iframe>

Het formaat van de iframe bepalen

De iframe past zijn formaat niet automatisch aan. Je bepaalt de afmetingen via CSS:

• Volledige breedte, ingesloten chat: width: 100%; height: 600px;
• Sidebar-chat: width: 400px; height: 100vh; gepositioneerd in een sidebarlayout.
• Compacte widget: width: 350px; height: 500px; voor een kleiner inline gebied.

Beperkingen van iframe-insluiting

Voor de meeste websites is de JS-widget een betere keuze. Gebruik de iframe alleen als de JS-widget geen optie is, of als je specifiek een inline chatervaring wilt.

Methode 4: WordPress-plugin

WordPress-sites kunnen de JS-widget gebruiken via elk van de hierboven beschreven methoden, maar er is ook een speciale aanpak met code-snippetplugins die het proces vereenvoudigt voor niet-technische gebruikers.

Snel instellen met WPCode

1. Installeer de WPCode-plugin (gratis, 2M+ installaties) via Plugins en daarna Nieuwe toevoegen.
2. Ga naar Code Snippets en daarna Header & Footer.
3. Plak de Agentkit-scripttag in de sectie Footer.
4. Opslaan.

De chatbot verschijnt nu op elke pagina. WPCode ondersteunt ook voorwaardelijke logica, zodat je de chatbot alleen op specifieke pagina's kunt tonen.

Andere WordPress-methoden

Zie voor de volledige WordPress-doorloop met probleemoplossing Chatbot toevoegen aan WordPress.

Aanpassingsopties

Ongeacht welke insluitmethode je gebruikt, wordt de meeste aanpassing gedaan vanuit het Agentkit-dashboard. Zo kun je instellingen wijzigen zonder je embedcode aan te raken.

Visuele aanpassing

Gedragsaanpassing

Beveiligingsoverwegingen

Houd bij het insluiten van een chatbot op je site deze beveiligingsinstellingen in gedachten.

Domeinbeperking

Stel altijd domeinbeperking in bij je chatbotinstellingen. Zo zorg je dat je chatbot alleen op je geautoriseerde domeinen laadt. Doe je dit niet, dan kan iedereen die je chatbot-ID vindt, je chatbot op zijn eigen site insluiten en je berichtenquotum gebruiken.

Ga naar Instellingen in het Agentkit-dashboard en voeg elk domein toe waarop de chatbot moet werken:

• Je primaire domein (bijv. jouwbedrijf.com)
• Eventuele subdomeinen (bijv. support.jouwbedrijf.com)
• Ontwikkel- of stagingdomeinen als je moet testen

Ratelimiet

Ratelimiet begrenst het aantal berichten dat één bezoeker per sessie kan versturen. Dit voorkomt misbruik en helpt je berichtenquotum te beheren. Een limiet van 15-25 berichten per sessie is voor de meeste sites redelijk.

Content Security Policy

Gebruikt je site Content Security Policy-headers, dan moet je de Agentkit-domeinen op de whitelist zetten. Voeg het volgende toe aan je CSP:

• script-src: cdn.agentkit.ai
• frame-src: cdn.agentkit.ai (bij gebruik van de iframe-methode)
• connect-src: *.agentkit.com (voor API-calls)

Veelvoorkomende insluitproblemen oplossen

De chatbot verschijnt niet

De chatbot verschijnt wel, maar reageert niet

• Controleer trainingsdata. Een ongetrainde chatbot heeft niets om mee te werken.
• Verifieer de chatbot-ID. Een onjuiste ID betekent dat de widget laadt, maar de chatbot niet kan vinden.
• Controleer de domeinbeperking. Staat je domein niet op de toegestane lijst, dan reageert de chatbot niet.
• Controleer het berichtenquotum van je abonnement. Heb je al je maandelijkse berichten verbruikt, dan stopt de chatbot met reageren tot de volgende factureringscyclus.

De chatbot conflicteert met andere widgets

Overlapt een andere chatwidget (Intercom, Crisp, Drift) met die van jou, verwijder dan de andere widget, wijzig de Agentkit-positie naar bottom-left, of gebruik de iframe-methode om de chatbot inline te plaatsen in plaats van als zwevende bubbel.

Het juiste abonnement kiezen voor je insluiting

Jaarlijkse facturering bespaart ongeveer 20% op alle betaalde abonnementen. Begin met het Free-abonnement om de insluiting te testen, en upgrade zodra je verkeer meer berichten vereist.

Volgende stappen

Zodra je chatbot is ingesloten, verschuift het werk van installatie naar optimalisatie:

1. Monitor gesprekken de eerste week in het Agentkit-dashboard. Identificeer vragen waar de chatbot mee worstelt.
2. Voeg trainingsdata toe voor zwakke plekken. Q&A-paren zijn de snelste manier om specifieke antwoordproblemen op te lossen.
3. Schakel leads verzamelen in om e-mailadressen van bezoekers tijdens gesprekken te verzamelen. Zie de gids voor leadgeneratie.
4. Verbind met je tools via Zapier, webhooks of de REST API. Zie de integratiegids.
5. Stel domeinbeperking en ratelimiet in voor beveiliging en quotabeheer.

Zie voor platformspecifieke doorlopen de gedetailleerde gidsen:

• WordPress
• Shopify
• Squarespace
• Wix
• Webflow

Bouw gratis je chatbot →

Geen creditcard nodig.