Introduction

Agent App Extensions are web applications loaded inside the chat.io Agent App. All agents can interact with the extension during chats with customers. The extension itself is displayed in the Agent’s App sidebar:

Use cases

One can use the Agent App Extension to:

  • embed and display static content, e.g. knowledge base articles, conversation prompts or context information,
  • embed your service or web app as a part of agents’ workspace.

Getting Started

  1. Go to the chat.io Developers Console.
  2. Create a new app and follow the app wizard.
  3. Set up app name, descriptions and icon in Display settings.
  4. Configure Agent App Extension in the Features tab. If you don’t have a working app at hand, feel free to start with the sample ones:
  5. Go to Distribution settings and install the app at your license. You’ll see it in the chat.io Agent App.

Pairing the extension with Agent App

Let’s say you want to create an extension which shows additonal customer details. You need to know which chat is currently displayed within the Agent App.

We send a postMessage event every time a chat with a visitor is displayed. You can use this information to provide additonal details on certain customer.

Example script

window.addEventListener('message', function (event) {
    if (event.data.event_name === 'customer_profile') {
        console.log(event.data);
    }
}, false);

Example data payload

{
    "event_name": "customer_profile",
    "event_data": {
        "id": "",
        "name": "Coleslaw Chat",
        "email": "coleslaw@chat.io",
        "chat": {
            "id": "IL0V3B00ZE"
        },
        "source": "chats"
    }
}