События в браузере: 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 тоже.
• Нет события с текстом сообщения. Содержимое можно получить на сервере через вебхуки.

Далее: Идентификация посетителей и передача контекста