Events in the browser: on, off and DOM events

The widget reports what happens in the chat in two ways: via ReactiveChat('on', …) and as DOM events on window. Neither ever carries the text of a message – only the fact that something happened. For content on your server, use webhooks.

ReactiveChat('on') and ('off')

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

You can call on before loading; the subscription waits in the queue. But: an on is a command and therefore loads the core immediately (trigger command). The widget catches errors in your callback; they do not disturb the chat. Unknown names are silently ignored.

The events and their data:

• ready – { conversationId }. The connection is up and the widget can be used. The right moment for commands with a return value.
• open – { trigger }. The window was opened; trigger says what opened it (default api).
• close – {}. The window was closed.
• message – { direction }. A message arrived (in, from the team or the assistant) or went out (out, from the visitor). Without content.
• unread – { count }. The number of unread messages has changed.
• csat – { score }. The visitor has given a rating (1 or -1).
• handoff – { reason, to }. The conversation was handed over; to is agent, queue, bot or offline_form.
• proactive – { ruleId }. A rule has triggered a proactive message.
• ab – { test, variant, qa }. The visitor was assigned to an A/B variant.
• teaser:shown – { ruleId, ts }. A teaser bubble appeared.
• teaser:click – { ruleId }. Click on the bubble.
• teaser:dismiss – { ruleId }. The bubble was dismissed.
• teaser:reply – { ruleId, text }. A quick reply of the bubble was chosen (text is the button text you defined yourself).
• promo:shown – { ort }. The promo card was visible (gespraech or start), once per location and page view and only with the window open.
• promo:click – { ziel, ort }. Click on the card's button (knopf) or text link (link).

Example: passing events on to an analytics tool

['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 events on window

Independently of on, the widget fires CustomEvents on window (they do not bubble, bubbles: false). Every detail additionally contains ts. These events suit tools that listen for DOM events, such as tag managers.

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

Events the widget listens for

If you use MousePlayer, the widget evaluates its events mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent and mouseplayer:milestone; mouseplayer:frustration also loads the core early. You do not need any other sources for this.

What does not exist

• No postMessage channel for your page – not in iframe mode either.
• No event carrying message text. You get content on the server side via webhooks.

Next: Identifying visitors and passing context