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 en Configuración → Seguridad → Dominios permitidos → Frame ancestors.

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

Abre en uContact el formulario de nueva interacción saliente, prellenado con la información del campo data. La interacción no se inicia sola: el agente revisa el formulario y lo confirma. Antes de abrirlo, uContact cierra la vista CRM (si está abierta) y navega al Inbox.

Si la campaña no existe o el agente no es miembro, uContact solo muestra una notificación y no prellena el formulario.

{
  "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 (número de teléfono, dirección de email, etc.)
  "contact": "string",   // Opcional. Alias de clientId; tiene prioridad si se envían ambos
  "contactId": "string", // Opcional. ID del contacto a asociar con la interacción
  "message": "string",   // Opcional. Texto del mensaje prellenado (no aplica a telefonía)
  "subject": "string"    // Opcional. Asunto prellenado (solo email)
}

Ejemplo:

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