IFrame integration reference

Search parameters

The agent-side interface is accessible at https://app.apizee.com/agent/ . It is a web application configured through query string parameters. Here's a list of all the available parameters.

Required parameters

The following parameters are mandatory for Embed to start:

Optional parameters

PostMessage API

The agent-side application has a real-time messaging feature that enables 2-way communication through the standard Window: postMessage mechanism:

• From the agent-side app to the host platform

• From the host platform to the agent-side app

From the agent-side app to the host platform

To enable the host application to receive events from the agent-side app, it has to register a listener on the window DOM element on events of type "message":

const AGENT_APP_DOMAIN = "https://app.apizee.com";
const receiveMessage = (event) => {
  if (event.origin !== AGENT_APP_DOMAIN) return;

  const message = event.data;

  switch (message.type) {
    case "ready": {
      // web-agent app is ready to receive messages
      break;
    }
    case "snapshot": {
      const dataUrl = message.dataUrl;
      // display or store the snapshot dataUrl.
      break;
    }
    ...
    default:
      console.warn(`Unhandled message.type ${message.type}.`);
  }
};

window.addEventListener("message", receiveMessage);

The received data contains at least a `type` attribute which describes the type of event triggered by the agent-side app.

For example, when a snapshot is taken,

• the agent-side app trigger an event containing a message of type `snapshot`.

• the event holder of the host application catches the event, reads the message's type, and executes the corresponding processing (e.g. grab the dataUrl field of the message and store the image somewhere)

Here's the list of all the available events and the fields of each event of the agent-side app.

name: string,
phone: string,
link: string

dataUrl: string,
contact: {
    id: string,
    conversationName: string,
    userData: apiRTC.UserData
}

length: Number

From the host platform to the agent-side app

The host application can control the agent-side app by using the standard DOM postMessage method of the Iframe element:

const AGENT_APP_DOMAIN = "https://app.apizee.com";
iframe.contentWindow.postMessage(
  {
    type: "conversation",
    name: "new_conversation_name",
  },
  AGENT_APP_DOMAIN
);

Here's the list of all the available actions and the list of fields for each message type of the agent-side app.

installationId: string;
callStatsMonitoringInterval?: number;
logLevel: string;

name: string

userId?: string,
username?: string,
name?: string
[key: string]: string | undefined;