Gebeurtenissen in de browser: on, off en DOM-events

De widget meldt op twee manieren wat er in de chat gebeurt: via ReactiveChat('on', …) en als DOM-events op window. Geen van beide bevat ooit de tekst van een bericht, alleen het feit dat er iets is gebeurd. Gebruik webhooks voor inhoud op uw server.

ReactiveChat('on') en ('off')

function beiNachricht(e) {
  if (e.direction === 'in') { document.title = '(1) ' + document.title; }
}
ReactiveChat('on', 'message', beiNachricht);
// later:
ReactiveChat('off', 'message', beiNachricht);

U kunt on al vóór het laden aanroepen; het abonnement wacht in de wachtrij. Maar: een on is een opdracht en laadt de kern daarom onmiddellijk (trigger command). De widget vangt fouten in uw callback op; ze verstoren de chat niet. Onbekende namen worden zonder melding genegeerd.

De gebeurtenissen en hun gegevens:

• ready – { conversationId }. De verbinding is actief en de widget kan worden gebruikt. Het juiste moment voor opdrachten met een retourwaarde.
• open – { trigger }. Het venster is geopend; trigger geeft aan waardoor (standaard api).
• close – {}. Het venster is gesloten.
• message – { direction }. Een bericht is binnengekomen (in, van het team of de assistent) of verzonden (out, van de bezoeker). Zonder inhoud.
• unread – { count }. Het aantal ongelezen berichten is gewijzigd.
• csat – { score }. De bezoeker heeft een beoordeling gegeven (1 of -1).
• handoff – { reason, to }. Het gesprek is overgedragen; to is agent, queue, bot of offline_form.
• proactive – { ruleId }. Een regel heeft een proactief bericht geactiveerd.
• ab – { test, variant, qa }. De bezoeker is aan een A/B-variant toegewezen.
• teaser:shown – { ruleId, ts }. Een tooltipballon is verschenen.
• teaser:click – { ruleId }. Klik op de ballon.
• teaser:dismiss – { ruleId }. De ballon is gesloten.
• teaser:reply – { ruleId, text }. Een snelantwoord uit de ballon is gekozen (text is de knoptekst die u zelf hebt ingesteld).
• promo:shown – { ort }. De promotiekaart was zichtbaar (gespraech of start), eenmaal per locatie en paginaweergave en alleen met het venster open.
• promo:click – { ziel, ort }. Klik op de knop (knopf) of tekstlink (link) van de kaart.

Voorbeeld: gebeurtenissen doorgeven aan een analysetool

['open', 'close', 'csat', 'handoff', 'promo:click'].forEach(function (name) {
  ReactiveChat('on', name, function (e) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: 'reactivechat_' + name.replace(':', '_'), rc: e });
  });
});

DOM-events op window

Onafhankelijk van on activeert de widget CustomEvents op window (ze worden niet naar boven doorgegeven, bubbles: false). Elke detail bevat bovendien ts. Deze gebeurtenissen zijn geschikt voor tools die naar DOM-events luisteren, zoals tagmanagers.

• reactivechat:ready – { sessionId, visitorId, version }
• reactivechat:opened – { conversationId, trigger }
• reactivechat:closed – { conversationId }
• reactivechat:message – { conversationId, direction }, nooit de tekst
• reactivechat:bot_handoff – { conversationId, reason }
• reactivechat:csat – { score }
• reactivechat:proactive_shown – { ruleId }
• reactivechat:teaser_shown – { conversationId, ruleId }

window.addEventListener('reactivechat:opened', function (ev) {
  console.log('Chat open since', new Date(ev.detail.ts));
});

Gebeurtenissen waarnaar de widget luistert

Als u MousePlayer gebruikt, verwerkt de widget de gebeurtenissen mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent en mouseplayer:milestone; mouseplayer:frustration laadt de kern ook eerder. U hebt hiervoor geen andere bronnen nodig.

Wat er niet is

• Geen postMessage-kanaal voor uw pagina, ook niet in iframe-modus.
• Geen gebeurtenis met berichttekst. Inhoud ontvangt u aan de serverzijde via webhooks.

Volgende: Bezoekers identificeren en context doorgeven