Documentatie

JavaScript-widget

Installeer de chatwidget met de volledige code die in Kanalen wordt gegenereerd.

De JavaScript-widget voegt een zwevende chatbubbel toe aan je website. De gegenereerde code bevat twee scripttags; kopieer ze allebei vanuit het tabblad Kanalen van je agent.

Snel instellen

  1. Open Kanalen → Website-embed voor je agent
  2. Selecteer Chatwidget en schakel het kanaal in
  3. Kopieer de volledige gegenereerde code, inclusief beide scripttags
  4. Plak deze in je website vóór </body>
  5. Sla je website op en ververs deze

De eerste tag bereidt de Agentkit-opdrachtwachtrij voor. De tweede laadt de widget met je agent-id en de ingestelde script-URL. Houd beide tags en hun waarden bij elkaar.

Widgetconfiguratie

Positie

De widget verschijnt standaard rechtsonder. Wijzig de positie in de Ontwerp-instellingen.

Kleuren

De widgetkleuren volgen de thema-instellingen van je agent. Pas ze aan op het tabblad Ontwerp.

Mobiel

De widget is volledig responsive en werkt automatisch op mobiele apparaten.

Bestandsbijlagen

Bezoekers kunnen documenten, spreadsheets, afbeeldingen en tekstbestanden rechtstreeks vanuit de widget bijvoegen. Bijlagen worden alleen gebruikt als tijdelijke gesprekscontext en worden niet toegevoegd aan de trainingsbronnen van je agent.

Ondersteunde uploads zijn onder meer PDF-, Word-, Excel-, HTML-, TXT-, Markdown-, JSON-, CSV-, PNG-, JPG-, WEBP- en GIF-bestanden. Bezoekers kunnen tot 3 bestanden per bericht bijvoegen, met een limiet van 10 MB per bestand. Van PDF's worden alleen de eerste 20 pagina's verwerkt, zodat reacties snel en betrouwbaar blijven.

Data-attributen

De widget gebruikt data-attributen voor configuratie:

AttribuutBeschrijvingStandaard
data-chatbotVerplicht. De id van je agent (opgenomen in je embedcode)-

Plaatsing

Waar je de code toevoegt

Plak beide gegenereerde scripttags vóór </body>:

<!DOCTYPE html>
<html>
<head>
  <!-- Your head content -->
</head>
<body>
  <!-- Your website content -->

  <!-- Paste both script tags from Channels > Website embed here -->
</body>
</html>

Single-page applications

Voeg bij SPA's de volledige gegenereerde code toe aan je belangrijkste HTML-template of indexbestand.

Meerdere pagina's

Voeg dezelfde gegenereerde code toe aan elke pagina waarop je de widget wilt tonen, of plaats deze in een gedeelde layout-template.

Je installatie testen

Nadat je de code hebt toegevoegd:

  1. Bezoek je website in een browser
  2. Zoek de chatbubbel (standaard rechtsonder)
  3. Klik om de chat te openen
  4. Verstuur een testbericht
  5. Controleer of de reactie klopt

Problemen oplossen

Widget verschijnt niet:

  • Controleer in de gerenderde paginabron of beide gegenereerde scripttags vóór </body> staan
  • Controleer of het agent-id klopt
  • Wis de browsercache
  • Controleer de browserconsole op foutmeldingen

Verkeerde positie:

  • Controleer de Ontwerp-instellingen
  • Zoek naar CSS-conflicten

Reageert niet:

  • Zorg dat er trainingsbronnen aanwezig zijn
  • Controleer de berichtenlimiet van je plan
  • Test eerst in de Playground

Domeinbeperkingen

Als je toegestane domeinen hebt geconfigureerd:

  • Laadt de widget alleen op goedgekeurde domeinen
  • Andere sites zien geen widget (er wordt geen foutmelding getoond)

Domeinen configureren →

Prestaties

De widget is geoptimaliseerd voor minimale impact:

  • Laadt asynchroon (async-attribuut)
  • Kleine bundlegrootte
  • Blokkeert de weergave niet
  • Laadt de chatinterface lazy

Stylingconflicten

De widget gebruikt geïsoleerde stijlen en zou niet in conflict moeten komen met je site. Zie je toch problemen:

  1. Controleer op globale CSS-selectors
  2. Zoek naar !important-regels
  3. Neem contact op met support als de problemen aanhouden

De widget verwijderen

Om te verwijderen:

  1. Verwijder beide gegenereerde scripttags uit je HTML
  2. Wis eventuele caches
  3. De widget verdwijnt direct

Volgende stappen