API de Eventos

Puedes utilizar esta API para incrustar uContact dentro de un sistema externo y comunicarte con él de forma bidireccional: suscribirte a eventos que dispara uContact y enviar acciones para activar comportamientos desde tu aplicación.

Integración

Esta sección explica cómo incrustar uContact en tu sistema externo y configurar la comunicación entre ambos.

Antes de comenzar

Por defecto, uContact solo permite incrustar sistemas externos dentro de sí mismo. Para incrustarlo dentro de un sistema externo, debés habilitar la opción frame-ancestors y agregar la URL del sistema externo.

Para integrar uContact en un sistema externo, incrustá la instancia de uContact dentro de un iframe. El atributo name es necesario para poder referenciar el frame al momento de enviar acciones.

<iframe 
  src="url"
  name="uContact"
  id="uContact"
  scrolling="no" 
  allow="camera;microphone">
</iframe>

Atributos:

• src: La URL de la instancia de uContact.
• allow: Los permisos necesarios para que el iframe acceda a la cámara y al micrófono.

Luego agregá un listener de eventos en la ventana padre para recibir los eventos que dispara uContact:

window.addEventListener("message", (e) => {
  const { event, data } = e.data;

  switch (event) {
    case "assignedInteraction":
      // Hacer algo
      break;
    case "finishedInteraction":
      // Hacer algo
      break;
    case "sentDisposition":
      // Hacer algo
      break;
    case "changedTheme":
      // Hacer algo
      break;
    case "changedLanguage":
      // Hacer algo
      break;
    default:
      break;
  }
});

Eventos

Estos son los eventos que dispara uContact. Cada evento se recibe como un message en la ventana padre, con un campo event que identifica el tipo y un campo data con el payload.

assignedInteraction

Se dispara cuando se asigna una interacción al agente.

{
  "guid": "string",     // El identificador único de la interacción
  "campaign": "string", // El nombre de la campaña con la que está asociada la interacción
  "channel": "string",  // Canal de la interacción
  "clientId": "string", // ID del cliente
  "contactId": "string" // ID del contacto asociado, si existe
}

finishedInteraction

Se dispara cuando se cierra una interacción.

{
  "guid": "string",             // El identificador único de la interacción
  "finishDate": "string",       // La fecha y hora en que se cerró la interacción
  "finishedByClient": "boolean" // Verdadero si la interacción fue finalizada por el cliente
}

sentDisposition

Se dispara cuando un agente envía una tipificación para una interacción.

{
  "guid": "string",         // El identificador único de la interacción
  "comment": "string",      // El comentario de la tipificación
  "levelsId": "Array",      // Los IDs de los niveles de tipificación seleccionados
  "levelsValue": "Array"    // Los valores de los niveles de tipificación seleccionados
}

changedTheme

Se dispara cuando el usuario cambia el tema del sistema.

{
  "dark": "boolean",    // Verdadero si el tema es oscuro
  "primary": "string",  // El color primario del tema
  "themeName": "string" // El nombre del tema seleccionado
}

changedLanguage

Se dispara cuando el usuario cambia el idioma de la interfaz. El campo data es directamente el código de idioma como string.

"string" // El código del idioma. Por ejemplo, "en" para inglés

Acciones

Las acciones permiten activar comportamientos dentro de uContact desde tu sistema externo. Se envían mediante postMessage al objeto window del iframe:

window.frames["uContact"].postMessage({ event: "nombreAccion", data: payload }, "*");

startInteraction

Indica a uContact que inicie una nueva interacción saliente. El campo data contiene la información que uContact necesita para iniciar la interacción.

{
  "campaign": "string", // El nombre de la campaña con la que está asociada la interacción
  "channel": "string",  // Canal de la interacción
  "clientId": "string"  // ID del cliente
}

Ejemplo:

window.frames["uContact"].postMessage({
  event: "startInteraction",
  data: {
    campaign: "Ventas",
    channel: "telephony",
    clientId: "12345"
  }
}, "*");