Eventos en el navegador: on, off y eventos DOM

El widget comunica lo que ocurre en el chat de dos formas: mediante ReactiveChat('on', …) y como eventos DOM en window. Ninguna incluye nunca el texto de un mensaje, solo el hecho de que ha ocurrido algo. Para obtener contenido en su servidor, utilice webhooks.

ReactiveChat('on') y ('off')

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

Puede llamar a on antes de la carga; la suscripción espera en la cola. Pero on es un comando y, por tanto, carga el núcleo de inmediato (disparador command). El widget captura los errores de su callback para que no interfieran con el chat. Los nombres desconocidos se ignoran sin aviso.

Los eventos y sus datos:

• ready – { conversationId }. La conexión está establecida y el widget se puede utilizar. Es el momento adecuado para comandos con valor de retorno.
• open – { trigger }. Se ha abierto la ventana; trigger indica qué la abrió (predeterminado api).
• close – {}. Se ha cerrado la ventana.
• message – { direction }. Ha llegado un mensaje (in, del equipo o del asistente) o ha salido (out, del visitante). Sin contenido.
• unread – { count }. Ha cambiado el número de mensajes sin leer.
• csat – { score }. El visitante ha enviado una valoración (1 o -1).
• handoff – { reason, to }. Se ha transferido la conversación; to es agent, queue, bot u offline_form.
• proactive – { ruleId }. Una regla ha activado un mensaje proactivo.
• ab – { test, variant, qa }. El visitante ha sido asignado a una variante A/B.
• teaser:shown – { ruleId, ts }. Ha aparecido una burbuja de aviso.
• teaser:click – { ruleId }. Clic en la burbuja.
• teaser:dismiss – { ruleId }. Se ha descartado la burbuja.
• teaser:reply – { ruleId, text }. Se ha elegido una respuesta rápida de la burbuja (text es el texto del botón que usted definió).
• promo:shown – { ort }. La tarjeta promocional fue visible (gespraech o start), una vez por ubicación y visita a la página y solo con la ventana abierta.
• promo:click – { ziel, ort }. Clic en el botón de la tarjeta (knopf) o en su enlace de texto (link).

Ejemplo: transmitir eventos a una herramienta de analítica

['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 en window

Independientemente de on, el widget emite CustomEvent en window (sin propagación ascendente, bubbles: false). Cada detail contiene además ts. Estos eventos son adecuados para herramientas que escuchan eventos DOM, como los gestores de etiquetas.

• reactivechat:ready – { sessionId, visitorId, version }
• reactivechat:opened – { conversationId, trigger }
• reactivechat:closed – { conversationId }
• reactivechat:message – { conversationId, direction }, nunca el 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 escucha el widget

Si utiliza MousePlayer, el widget evalúa sus eventos mouseplayer:ready, mouseplayer:frustration, mouseplayer:intent y mouseplayer:milestone; mouseplayer:frustration también carga el núcleo anticipadamente. No necesita otras fuentes para ello.

Qué no existe

• No hay un canal postMessage para su página, tampoco en modo iframe.
• No hay ningún evento que incluya el texto de los mensajes. Puede obtener el contenido en el servidor mediante webhooks.

Siguiente: Identificar visitantes y transmitir contexto