Händelser i webbläsaren: on, off och DOM-händelser

Widgeten rapporterar vad som händer i chatten på två sätt: via ReactiveChat('on', …) och som DOM-händelser på window. Inget av sätten innehåller någonsin texten i ett meddelande – bara att något har hänt. För innehåll på servern använder du webhooks.

ReactiveChat('on') och ('off')

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

Du kan anropa on före laddningen; prenumerationen väntar i kön. Men: ett on är ett kommando och laddar därför kärnan omedelbart (utlösaren command). Widgeten fångar fel i din callback; de stör inte chatten. Okända namn ignoreras utan felmeddelande.

Händelserna och deras data:

• ready – { conversationId }. Anslutningen är upprättad och widgeten kan användas. Rätt tillfälle för kommandon med returvärde.
• open – { trigger }. Fönstret öppnades; trigger anger vad som öppnade det (standard api).
• close – {}. Fönstret stängdes.
• message – { direction }. Ett meddelande kom in (in, från teamet eller assistenten) eller skickades (out, från besökaren). Utan innehåll.
• unread – { count }. Antalet olästa meddelanden har ändrats.
• csat – { score }. Besökaren har lämnat ett omdöme (1 eller -1).
• handoff – { reason, to }. Konversationen lämnades över; to är agent, queue, bot eller offline_form.
• proactive – { ruleId }. En regel har utlöst ett proaktivt meddelande.
• ab – { test, variant, qa }. Besökaren tilldelades en A/B-variant.
• teaser:shown – { ruleId, ts }. En tipsbubbla visades.
• teaser:click – { ruleId }. Klick på bubblan.
• teaser:dismiss – { ruleId }. Bubblan avvisades.
• teaser:reply – { ruleId, text }. Ett snabbsvar på bubblan valdes (text är knapptexten som du själv har definierat).
• promo:shown – { ort }. Reklamkortet var synligt (gespraech eller start), en gång per plats och sidvisning och bara med öppet fönster.
• promo:click – { ziel, ort }. Klick på kortets knapp (knopf) eller textlänk (link).

Exempel: skicka händelser vidare till ett analysverktyg

['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-händelser på window

Oberoende av on skickar widgeten CustomEvent-händelser på window (de bubblar inte, bubbles: false). Varje detail innehåller dessutom ts. Dessa händelser passar verktyg som lyssnar efter DOM-händelser, till exempel tagghanterare.

• reactivechat:ready – { sessionId, visitorId, version }
• reactivechat:opened – { conversationId, trigger }
• reactivechat:closed – { conversationId }
• reactivechat:message – { conversationId, direction }, aldrig texten
• 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));
});

Händelser som widgeten lyssnar efter

Om du använder MousePlayer utvärderar widgeten dess händelser mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent och mouseplayer:milestone; mouseplayer:frustration laddar även kärnan i förtid. Du behöver inga andra källor för detta.

Vad som inte finns

• Ingen postMessage-kanal för din sida – inte heller i iframe-läge.
• Ingen händelse med meddelandetext. Innehåll får du på serversidan via webhooks.

Nästa: Identifiera besökare och skicka kontext