Événements du navigateur : on, off et événements DOM

Le widget signale ce qui se passe dans le chat de deux manières : via ReactiveChat('on', …) et sous forme d’événements DOM sur window. Aucun ne contient jamais le texte d’un message, uniquement le fait qu’une action s’est produite. Pour le contenu sur votre serveur, utilisez les webhooks.

ReactiveChat('on') et ('off')

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

Vous pouvez appeler on avant le chargement ; l’abonnement attend dans la file de commandes. Mais on est une commande et charge donc immédiatement le noyau (déclencheur command). Le widget intercepte les erreurs de votre fonction de rappel ; elles ne perturbent pas le chat. Les noms inconnus sont ignorés silencieusement.

Les événements et leurs données :

• ready – { conversationId }. La connexion est établie et le widget peut être utilisé. Le bon moment pour les commandes avec une valeur de retour.
• open – { trigger }. La fenêtre a été ouverte ; trigger indique ce qui l’a ouverte (par défaut api).
• close – {}. La fenêtre a été fermée.
• message – { direction }. Un message est arrivé (in, de l’équipe ou de l’assistant) ou est parti (out, du visiteur). Sans contenu.
• unread – { count }. Le nombre de messages non lus a changé.
• csat – { score }. Le visiteur a donné une évaluation (1 ou -1).
• handoff – { reason, to }. La conversation a été transférée ; to vaut agent, queue, bot ou offline_form.
• proactive – { ruleId }. Une règle a déclenché un message proactif.
• ab – { test, variant, qa }. Le visiteur a été attribué à une variante A/B.
• teaser:shown – { ruleId, ts }. Une bulle de relance est apparue.
• teaser:click – { ruleId }. Clic sur la bulle.
• teaser:dismiss – { ruleId }. La bulle a été fermée.
• teaser:reply – { ruleId, text }. Une réponse rapide de la bulle a été choisie (text est le texte du bouton que vous avez défini).
• promo:shown – { ort }. La carte promotionnelle a été visible (gespraech ou start), une fois par emplacement et par page vue, et uniquement lorsque la fenêtre est ouverte.
• promo:click – { ziel, ort }. Clic sur le bouton de la carte (knopf) ou sur le lien textuel (link).

Exemple : transmettre des événements à un outil d’analyse

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

Événements DOM sur window

Indépendamment de on, le widget déclenche des CustomEvent sur window (ils ne remontent pas dans le DOM, bubbles: false). Chaque detail contient aussi ts. Ces événements conviennent aux outils qui écoutent les événements DOM, comme les gestionnaires de balises.

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

Événements écoutés par le widget

Si vous utilisez MousePlayer, le widget analyse ses événements mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent et mouseplayer:milestone ; mouseplayer:frustration charge aussi le noyau plus tôt. Vous n’avez pas besoin d’autres sources pour cela.

Ce qui n’existe pas

• Aucun canal postMessage pour votre page, même en mode iframe.
• Aucun événement contenant le texte des messages. Vous obtenez le contenu côté serveur via les webhooks.

Suite : Identifier les visiteurs et transmettre du contexte