Eventos no navegador: on, off e eventos DOM

O widget informa o que acontece no chat de duas formas: por ReactiveChat('on', …) e como eventos DOM em window. Nenhuma delas contém o texto de uma mensagem, apenas o fato de que algo aconteceu. Para receber conteúdo no servidor, use webhooks.

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);

Você pode chamar on antes do carregamento; a assinatura espera na fila. Porém, on é um comando e, portanto, carrega o núcleo imediatamente (gatilho command). O widget captura erros no seu callback; eles não interferem no chat. Nomes desconhecidos são ignorados sem aviso.

Os eventos e seus dados:

• ready – { conversationId }. A conexão foi estabelecida e o widget pode ser usado. O momento certo para comandos com valor de retorno.
• open – { trigger }. A janela foi aberta; trigger informa o que a abriu (padrão api).
• close – {}. A janela foi fechada.
• message – { direction }. Uma mensagem chegou (in, da equipe ou do assistente) ou saiu (out, do visitante). Sem conteúdo.
• unread – { count }. O número de mensagens não lidas mudou.
• csat – { score }. O visitante deu uma avaliação (1 ou -1).
• handoff – { reason, to }. A conversa foi transferida; to é agent, queue, bot ou offline_form.
• proactive – { ruleId }. Uma regra disparou uma mensagem proativa.
• ab – { test, variant, qa }. O visitante foi atribuído a uma variante A/B.
• teaser:shown – { ruleId, ts }. Uma bolha de aviso apareceu.
• teaser:click – { ruleId }. Clique na bolha.
• teaser:dismiss – { ruleId }. A bolha foi dispensada.
• teaser:reply – { ruleId, text }. Uma resposta rápida da bolha foi escolhida (text é o texto do botão definido por você).
• promo:shown – { ort }. O card promocional ficou visível (gespraech ou start), uma vez por local e visualização de página e somente com a janela aberta.
• promo:click – { ziel, ort }. Clique no botão do card (knopf) ou no link de texto (link).

Exemplo: repassar eventos a uma ferramenta de análise

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

Eventos DOM em window

Independentemente de on, o widget dispara CustomEvents em window (não se propagam por bubbling, bubbles: false). Cada detail contém também ts. Esses eventos servem para ferramentas que escutam eventos DOM, como gerenciadores de tags.

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

Eventos que o widget escuta

Se você usa MousePlayer, o widget avalia seus eventos mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent e mouseplayer:milestone; mouseplayer:frustration também antecipa o carregamento do núcleo. Você não precisa de outras fontes para isso.

O que não existe

• Não há canal postMessage para sua página, nem no modo iframe.
• Não há evento com o texto das mensagens. Você recebe conteúdo no servidor por webhooks.

A seguir: Identificar visitantes e passar contexto