Eventi nel browser: on, off ed eventi DOM

Il widget segnala ciò che accade nella chat in due modi: tramite ReactiveChat('on', …) e come eventi DOM su window. Nessuno dei due trasmette mai il testo di un messaggio, ma solo il fatto che sia accaduto qualcosa. Per i contenuti sul Suo server, usi i webhook.

ReactiveChat('on') e ('off')

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

Può chiamare on prima del caricamento; l’iscrizione attende nella coda. Attenzione: on è un comando e quindi carica immediatamente il nucleo (evento di attivazione command). Il widget intercetta gli errori nel Suo callback; non disturbano la chat. I nomi sconosciuti vengono ignorati senza avviso.

Gli eventi e i relativi dati:

• ready – { conversationId }. La connessione è attiva e il widget è utilizzabile. È il momento giusto per i comandi con un valore di ritorno.
• open – { trigger }. La finestra è stata aperta; trigger indica che cosa l’ha aperta (valore predefinito api).
• close – {}. La finestra è stata chiusa.
• message – { direction }. Un messaggio è arrivato (in, dal team o dall’assistente) oppure è uscito (out, dal visitatore). Senza contenuto.
• unread – { count }. Il numero dei messaggi non letti è cambiato.
• csat – { score }. Il visitatore ha lasciato una valutazione (1 o -1).
• handoff – { reason, to }. La conversazione è stata passata; to è agent, queue, bot o offline_form.
• proactive – { ruleId }. Una regola ha attivato un messaggio proattivo.
• ab – { test, variant, qa }. Il visitatore è stato assegnato a una variante A/B.
• teaser:shown – { ruleId, ts }. È comparso un fumetto di invito.
• teaser:click – { ruleId }. Clic sul fumetto.
• teaser:dismiss – { ruleId }. Il fumetto è stato chiuso.
• teaser:reply – { ruleId, text }. È stata scelta una risposta rapida del fumetto (text è il testo del pulsante definito da Lei).
• promo:shown – { ort }. La scheda promozionale era visibile (gespraech o start), una volta per posizione e visualizzazione della pagina e solo con la finestra aperta.
• promo:click – { ziel, ort }. Clic sul pulsante della scheda (knopf) o sul link nel testo (link).

Esempio: inoltrare eventi a uno strumento di analisi

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

Eventi DOM su window

Indipendentemente da on, il widget emette CustomEvent su window (non risalgono il DOM, bubbles: false). Ogni detail contiene anche ts. Questi eventi sono adatti agli strumenti che ascoltano eventi DOM, come i tag manager.

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

Eventi ascoltati dal widget

Se usa MousePlayer, il widget valuta i suoi eventi mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent e mouseplayer:milestone; mouseplayer:frustration carica inoltre il nucleo in anticipo. Non servono altre fonti per questo.

Che cosa non esiste

• Nessun canale postMessage per la Sua pagina, nemmeno in modalità iframe.
• Nessun evento contenente il testo dei messaggi. I contenuti sono disponibili lato server tramite i webhook.

Prosegua: Identificare i visitatori e trasmettere il contesto