Ereignisse im Browser: on, off und DOM-Events

Das Widget meldet, was im Chat passiert, auf zwei Wegen: über ReactiveChat('on', …) und als DOM-Ereignisse auf window. Beide tragen nie den Text einer Nachricht – nur, dass etwas geschah. Für Inhalte auf deinem Server nimm Webhooks.

ReactiveChat('on') und ('off')

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

Du kannst on schon vor dem Laden aufrufen; die Anmeldung wartet in der Warteschlange. Aber: Ein on ist ein Befehl und lädt den Kern damit sofort (Auslöser command). Fehler in deinem Callback fängt das Widget ab, sie stören den Chat nicht. Unbekannte Namen werden still ignoriert.

Die Ereignisse und ihre Daten:

• ready – { conversationId }. Die Verbindung steht, das Widget ist bedienbar. Der richtige Zeitpunkt für Befehle mit Rückgabewert.
• open – { trigger }. Das Fenster wurde geöffnet; trigger sagt wodurch (Vorgabe api).
• close – {}. Das Fenster wurde geschlossen.
• message – { direction }. Eine Nachricht kam an (in, vom Team oder Assistenten) oder ging hinaus (out, vom Besucher). Ohne Inhalt.
• unread – { count }. Zahl der ungelesenen Nachrichten hat sich geändert.
• csat – { score }. Der Besucher hat bewertet (1 oder -1).
• handoff – { reason, to }. Das Gespräch wurde übergeben, to ist agent, queue, bot oder offline_form.
• proactive – { ruleId }. Eine Regel hat eine proaktive Nachricht ausgelöst.
• ab – { test, variant, qa }. Der Besucher wurde einer A/B-Variante zugeteilt.
• teaser:shown – { ruleId, ts }. Eine Teaser-Blase erschien.
• teaser:click – { ruleId }. Klick auf die Blase.
• teaser:dismiss – { ruleId }. Die Blase wurde weggeklickt.
• teaser:reply – { ruleId, text }. Eine Schnellantwort der Blase wurde gewählt (text ist der Knopftext, den du selbst festgelegt hast).
• promo:shown – { ort }. Die Werbekarte war sichtbar (gespraech oder start), einmal je Ort und Seitenaufruf und nur bei offenem Fenster.
• promo:click – { ziel, ort }. Klick auf Knopf (knopf) oder Textlink (link) der Karte.

Beispiel: an ein Analysewerkzeug weitergeben

['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-Ereignisse auf window

Unabhängig von on feuert das Widget CustomEvents auf window (sie steigen nicht auf, bubbles: false). Jedes detail enthält zusätzlich ts. Diese Ereignisse eignen sich für Werkzeuge, die auf DOM-Ereignisse hören, etwa Tag-Manager.

• reactivechat:ready – { sessionId, visitorId, version }
• reactivechat:opened – { conversationId, trigger }
• reactivechat:closed – { conversationId }
• reactivechat:message – { conversationId, direction }, nie der Text
• 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 offen seit', new Date(ev.detail.ts));
});

Ereignisse, auf die das Widget hört

Setzt du MousePlayer ein, wertet das Widget dessen Ereignisse mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent und mouseplayer:milestone aus; mouseplayer:frustration lädt den Kern zudem vorzeitig. Andere Quellen brauchst du dafür nicht.

Was es nicht gibt

• Keinen postMessage-Kanal für deine Seite – auch nicht im iframe-Modus.
• Kein Ereignis mit Nachrichtentext. Inhalte bekommst du serverseitig über Webhooks.

Weiter: Besucher identifizieren und Kontext übergeben