Події в браузері: on, off і DOM

Віджет повідомляє про події чату двома способами: через ReactiveChat('on', …) і як події DOM на window. Жоден ніколи не містить тексту повідомлення, лише факт події. Для вмісту на сервері використовуйте вебхуки.

ReactiveChat('on') і ('off')

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

on можна викликати до завантаження; підписка чекає в черзі. Але on є командою й тому одразу завантажує ядро (тригер command). Віджет перехоплює помилки вашого зворотного виклику; вони не заважають чату. Невідомі назви мовчки ігноруються.

Події та їхні дані:

• ready — { conversationId }. З’єднання встановлено, віджет доступний. Належний момент для команд зі значенням повернення.
• open — { trigger }. Вікно відкрито; trigger указує причину відкриття (стандартно api).
• close — {}. Вікно закрито.
• message — { direction }. Повідомлення надійшло (in, від команди чи асистента) або вийшло (out, від відвідувача). Без вмісту.
• unread — { count }. Кількість непрочитаних повідомлень змінилася.
• csat — { score }. Відвідувач дав оцінку (1 або -1).
• handoff — { reason, to }. Розмову передано; to — agent, queue, bot або offline_form.
• proactive — { ruleId }. Правило запустило проактивне повідомлення.
• ab — { test, variant, qa }. Відвідувача призначено A/B-варіанту.
• teaser:shown — { ruleId, ts }. Хмаринка підказки з’явилася.
• teaser:click — { ruleId }. Натискання хмаринки.
• teaser:dismiss — { ruleId }. Хмаринку закрито.
• teaser:reply — { ruleId, text }. Вибрано швидку відповідь хмаринки (text — текст кнопки, заданий вами).
• promo:shown — { ort }. Промокартка була видима (gespraech або start), раз на місце й перегляд сторінки та лише з відкритим вікном.
• promo:click — { ziel, ort }. Натискання кнопки картки (knopf) або текстового посилання (link).

Приклад: передавання подій інструменту аналітики

['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 на window

Незалежно від on віджет надсилає CustomEvent на window (без спливання, bubbles: false). Кожен detail додатково містить ts. Ці події підходять інструментам, що слухають DOM, як-от менеджерам тегів.

• reactivechat:ready — { sessionId, visitorId, version }
• reactivechat:opened — { conversationId, trigger }
• reactivechat:closed — { conversationId }
• reactivechat:message — { conversationId, direction }, ніколи текст
• 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));
});

Події, які слухає віджет

Якщо ви використовуєте MousePlayer, віджет обробляє його події mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent та mouseplayer:milestone; mouseplayer:frustration також рано завантажує ядро. Інших джерел для цього не потрібно.

Чого немає

• Немає каналу postMessage для вашої сторінки, навіть у режимі iframe.
• Немає події з текстом повідомлення. Вміст на сервері отримується через вебхуки.

Далі: Ідентифікація відвідувачів і передавання контексту