De widget installeren

De RolChat-widget is één zwevende knop die zich aanpast aan de modules die je hebt ingeschakeld: chat, een formulier om teruggebeld te worden, afspraken boeken, een leadformulier en zoeken in de kennisbank zitten er allemaal in. Je installeert hem één keer; wat hij toont, bepaal je in het dashboard.

1. Kopieer de code

Kies in Instellingen → Widget de site en kopieer de installatiecode. Die ziet er zo uit:

<!-- RolChat widget -->
<script>
  window.rolchatConfig = {
    "site_id": "ste_…",
    "account_id": "…",
    "widget_key": "wk1.<site>.<signature>",
    "modules": ["chat"]
  };
</script>
<script async src="https://widget.rolchat.com/stub.js"></script>

De widgetsleutel is openbaar en kan veilig in een pagina staan. Hij benoemt je site en is ondertekend, zodat niemand een kopie van de widget op je account kan richten. Het dashboard voegt extra sleutels aan het object toe (begroeting, koptitel, thema, werktijden, indeling per viewport) wanneer je de widgetinstellingen wijzigt; kopieer de code opnieuw na een wijziging, of houd het object minimaal en laat de widget de rest zelf ophalen.

stub.js is een paar kilobyte groot en laadt de rest pas wanneer de bezoeker het nodig heeft: de chatweergave bij de eerste keer openen, tracking na toestemming, de toestemmingsbanner waar die verplicht is.

2. Plak de code vóór </body>

Voeg de code toe aan elke pagina waar je de widget wilt hebben, bij voorkeur via je sitesjabloon of tagmanager zodat hij overal tegelijk verschijnt. Het script laadt asynchroon en blokkeert het renderen niet; de bundel bij de eerste keer laden is bewust klein gehouden, zodat hij je Core Web Vitals niet beïnvloedt.

3. Controleer of het werkt

Open je site in een privévenster. De knop verschijnt in de hoek die je hebt gekozen. In het dashboard toont Bezoekers de nieuwe anonieme sessie in realtime, en een bericht dat vanuit de widget wordt verstuurd, verschijnt in Postvak IN als nieuw gesprek.

Ingelogde gebruikers identificeren

Als je bezoekers inloggen in je product, vertel RolChat dan wie ze zijn, zodat gesprekken aan het juiste contact worden gekoppeld:

window.rolchat.identify({
  email: "alice@example.com",
  first_name: "Alice",
  last_name: "Martin",
  phone: "+15551234567",
  external_id: "user_12345",
  custom_fields: { plan: "pro" },
});

Geaccepteerde kenmerken zijn email, phone, first_name, last_name, external_id en een plat object custom_fields; al het andere wordt genegeerd. RolChat zoekt het e-mailadres op in de CRM. Bestaat er een contact, dan wordt de sessie eraan gekoppeld en ziet de agent het profiel; zo niet, dan worden de gegevens bewaard en wordt er een lead aangemaakt zodra de bezoeker voor het eerst schrijft.

Voor meer vertrouwen kan je backend de identiteit ondertekenen: geef de handtekening die RolChat voor de gebruiker uitgeeft mee met de kenmerken, en de sessie wordt pas opgewaardeerd als de handtekening klopt. Roep window.rolchat.reset() aan wanneer de gebruiker uitlogt, anders ziet de volgende persoon in die browser het vorige gesprek.

De JavaScript-API

window.rolchat is beschikbaar zodra de stub draait; aanroepen die worden gedaan voordat de bundel is geladen, worden in een wachtrij gezet en op volgorde uitgevoerd.

Methode	Wat hij doet
show() / hide()	De startknop tonen of verbergen
open() / close()	Het chatpaneel openen of sluiten
identify(traits)	De sessie aan een persoon koppelen (zie hierboven)
reset()	De identiteit vergeten en een nieuwe anonieme sessie starten
pushEvent(name, props)	Een aangepaste gebeurtenis melden voor triggerberichten en automatisering
trackPageView(path?)	Een paginaweergave melden in single-page-apps
setLocale(code)	De taal van de widget wijzigen
showConsentPreferences()	Het centrum voor toestemmingsvoorkeuren openen
on(event, handler) / off(event, handler)	Abonneren op chat:opened, chat:closed, message:sent, message:received, session:started

window.rolchat.pushEvent("cart_abandoned", { value: 129.9, currency: "EUR" });
window.rolchat.on("message:received", () => audio.play());

Taal en schrijfrichting

De widget spreekt de taal die je vastlegt met lang in window.rolchatConfig (bijvoorbeeld "lang": "de"); zonder lang de browsertaal van de bezoeker, gekozen in de volgorde van de browservoorkeuren uit de 40 talen die RolChat ondersteunt; past geen enkele, dan Engels. De eigen taalinstelling van de site wordt niet gebruikt: om de widget de taal van je site te laten spreken, stel je lang in. Arabisch en Hebreeuws worden van rechts naar links weergegeven. Berichten van agents worden niet door de widget vertaald; aan de kant van de agent kan in plaats daarvan AI-livevertaling worden gebruikt.

Cookies en toestemming

Waar een toestemmingsbanner verplicht is, volgt de widget bezoekers niet voordat er toestemming is. Gebruik je de RolChat-module Privacy, dan delen de banner en de widget één toestemmingsstatus. Gebruik je een ander toestemmingshulpmiddel, dan wachten de analysegebeurtenissen van de widget op het signaal dat je instelt in Instellingen → Privacy → Insluiten.

Waar de widget wordt geconfigureerd

Wat	Waar
Kleuren, positie, begroeting, instappunten, installatiecode	Instellingen → Widget
Welke modules in de widget verschijnen	Instellingen → Modules (per site)
Werktijden en het offlinebericht	Instellingen → Sites → Werktijden
Triggerberichten op specifieke pagina’s	Marketing → Triggers