Zdarzenia w przeglądarce: on, off i zdarzenia DOM

Widżet zgłasza, co dzieje się w czacie, na dwa sposoby: przez ReactiveChat('on', …) i jako zdarzenia DOM na window. Żaden z nich nigdy nie zawiera tekstu wiadomości – tylko informację, że coś się wydarzyło. Do treści na twoim serwerze użyj webhooków.

ReactiveChat('on') i ('off')

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

on możesz wywołać już przed załadowaniem; subskrypcja czeka w kolejce. Ale: on jest poleceniem i tym samym od razu ładuje rdzeń (wyzwalacz command). Błędy w twoim callbacku widżet przechwytuje, nie przeszkadzają czatowi. Nieznane nazwy są po cichu ignorowane.

Zdarzenia i ich dane:

• ready – { conversationId }. Połączenie działa, widżet jest gotowy do użycia. Właściwy moment na polecenia z wartością zwracaną.
• open – { trigger }. Okno zostało otwarte; trigger mówi, co je otworzyło (domyślnie api).
• close – {}. Okno zostało zamknięte.
• message – { direction }. Wiadomość przyszła (in, od zespołu lub asystenta) albo wyszła (out, od odwiedzającego). Bez treści.
• unread – { count }. Zmieniła się liczba nieprzeczytanych wiadomości.
• csat – { score }. Odwiedzający wystawił ocenę (1 albo -1).
• handoff – { reason, to }. Rozmowa została przekazana, to to agent, queue, bot albo offline_form.
• proactive – { ruleId }. Reguła wyzwoliła wiadomość proaktywną.
• ab – { test, variant, qa }. Odwiedzający został przypisany do wariantu A/B.
• teaser:shown – { ruleId, ts }. Pojawił się dymek teasera.
• teaser:click – { ruleId }. Kliknięcie w dymek.
• teaser:dismiss – { ruleId }. Dymek został zamknięty.
• teaser:reply – { ruleId, text }. Wybrano szybką odpowiedź z dymka (text to tekst przycisku, który sam ustaliłeś).
• promo:shown – { ort }. Karta promocyjna była widoczna (gespraech albo start), raz na miejsce i otwarcie strony i tylko przy otwartym oknie.
• promo:click – { ziel, ort }. Kliknięcie w przycisk (knopf) albo link tekstowy (link) karty.

Przykład: przekazanie do narzędzia analitycznego

['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 });
  });
});

Zdarzenia DOM na window

Niezależnie od on widżet wywołuje zdarzenia CustomEvent na window (nie propagują się w górę, bubbles: false). Każde detail zawiera dodatkowo ts. Te zdarzenia nadają się dla narzędzi, które nasłuchują zdarzeń DOM, np. menedżerów tagów.

• reactivechat:ready – { sessionId, visitorId, version }
• reactivechat:opened – { conversationId, trigger }
• reactivechat:closed – { conversationId }
• reactivechat:message – { conversationId, direction }, nigdy 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('Czat otwarty od', new Date(ev.detail.ts));
});

Zdarzenia, których nasłuchuje widżet

Jeśli używasz MousePlayera, widżet analizuje jego zdarzenia mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent i mouseplayer:milestone; mouseplayer:frustration dodatkowo wcześniej ładuje rdzeń. Innych źródeł do tego nie potrzebujesz.

Czego nie ma

• Kanału postMessage dla twojej strony – także w trybie iframe.
• Zdarzenia z tekstem wiadomości. Treści dostajesz po stronie serwera przez webhooki.

Dalej: Identyfikacja odwiedzających i przekazywanie kontekstu