Events API

Introduction

uContact provides an API via window.postMessage that allows the consumer to integrate uContact into an external system. The API allows the consumer to subscribe to events dispatched by uContact and dispatch actions to the uContact instance. The consumer can use the API to create a custom interface for the agents, integrate uContact into a CRM, or create a custom reporting system.

Integration

WARNING

By default, uContact comes with an option that only allows the integration of external systems into uContact. If the consumer wants to integrate uContact into an external system, the consumer must enable the option to allow the integration of uContact into an iframe. The option is frame-ancestors, and the consumer must add the URL of the external system.

To integrate uContact into an external system, the consumer must embed the uContact instance within an iframe.

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

url: The URL of the uContact instance.

allow: The permissions required for the iframe to access the camera and microphone.

The consumer must also add event listeners to the window object of the iframe to subscribe to events dispatched by uContact.

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

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

Events

assignedInteraction

This event is dispatched when a interaction is assigned to the agent.

{
  "guid": "string", // The unique identifier of the interaction
  "campaign": "string", // The campaign name the interaction is associated with
  "channel": "string",  // Channel of the interaction
  "clientId": "string" // ID of the client
}

finishedInteraction

This event is dispatched when an interaction is closed.

{
  "guid": "string", // The unique identifier of the interaction
  "finishDate": "string", // The date and time the interaction was closed
}

sentDisposition

This event is dispatched when a agent sends a disposition for an interaction.

{
  "guid": "string", // The unique identifier of the interaction
  "comment": "string", // The comment of the disposition
  "levelsId": "Array", // The ID of the levels
  "levelsValue": "Array" // The value of the levels
}

changedTheme

This event is dispatched when the theme of the system is changed.

{
  dark: "boolean", // True if the theme is dark
  primary: "string" // The primary color of the theme
}

changedLanguage

This event is dispatched when the language of the system is changed.

"string" // The language code. For example, "en" for English

Actions

The consumer can dispatch actions to the uContact instance creating a custom event on the window object of the iframe.

const eventData = {
    campaign: "string", // The campaign name the interaction is associated with
    channel: "string",  // Channel of the interaction
    clientId: "string" // ID of the client
  }

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