Documentatie

JavaScript-widget

Voeg de chatwidget toe aan elke website met een eenvoudige scripttag.

De JavaScript-widget is de eenvoudigste manier om je agent aan elke website toe te voegen. Eén scripttag zorgt voor een zwevende chatbubbel waarop bezoekers kunnen klikken om een gesprek te starten.

Snel instellen

  1. Ga naar het tabblad Publiceren van je agent
  2. Selecteer Chatwidget (standaard)
  3. Kopieer de weergegeven JavaScript-snippet
  4. Plak deze in je website vóór </body>
  5. Sla je website op en ververs deze

De chatbubbel verschijnt in de hoek van je pagina. Je snippet bevat je specifieke agent-id en de juiste script-URL.

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

Voeg het script vlak vóór </body> toe voor de beste prestaties:

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

  <!-- Paste your embed code from Chatbot > Publish here -->
</body>
</html>

Single-page applications

Voeg het script bij SPA's toe aan je belangrijkste HTML-template of indexbestand.

Meerdere pagina's

Voeg hetzelfde script toe aan elke pagina waarop je de widget wilt tonen. Of voeg het toe aan het layout-template van je site.

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 of het script vóór </body> staat
  • 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 de scripttag uit je HTML
  2. Wis eventuele caches
  3. De widget verdwijnt direct

Volgende stappen