Live Chat Toolbar

The widget appears as an icon in the chat's editor toolbar. Clicking it opens a popover, the page you configured in the manifest will be displayed in the popover.

Example manifest:

{
  "manifestVersion": "2.0",
  "agentConsole": {
    " widgets": {
      "chatToolbar": {
        "id": "custom-toolbar",
        "url": "./index.html",
        "tooltip": "Custom toolbar",
        "icon": "./icon.png"
      }
    }
  }
}

See more introduction.

The following additional actions are available in this widget:

• Popover
• Chat

How to Use API

You must invoke api through SDK, which provides different methods, such as listening to events using the on method. Which method is used to call the api? It it desided by the providor.

Learn more for SDK view here.

Actions

1. Update the chatToolbar widget

Params:

Return: No.

Example:

const client = APPClient.init();
client
  .set("agentconsole.livechat.toolbar.icon", {
    isEnabled: true,
    isHidden: false,
  })

Events

1. Register click event callback

Params:

Return: No.

Example:

const client = APPClient.init();
client.on("agentconsole.livechat.toolbar.icon.click", function (icon) {
  // do stuff
});

Popover

Popover is not an independent object. If the widget supports popover, you can use the following APIs to operate it.

Actions

1. Update Popover Info
   By default, the size of the popover is 600x400, you can call following API to adjust the size base on requirements.

Params:

Return: No.

Example:

const client = APPClient.init();
client.set("agentconsole.livechat.toolbar.popover", {
  width: 600,
  height: 400,
});

2. Toggle popover on and off for the current widget

You can use this API to toggle popover on and off.

Params: No.

Return: No.

Example:

const client = APPClient.init();
client.do("agentconsole.livechat.toolbar.popover.toggle");

3. Open popover for the current widget

Params: No.

Return: No.

Example:

const client = APPClient.init();
client.do("agentconsole.livechat.toolbar.popover.open");

4. Close the popover for the current widget

Params: No.

Return: No.

Example:

const client = APPClient.init();
client.do("agentconsole.livechat.toolbar.popover.close");

5. Get status of popover opening

Params: No.

Return: The status of popover opening, its type is boolean.

Example:

const client = APPClient.init();
client.get("agentconsole.livechat.toolbar.popover.status");

Events

1. Popover opened Event

Params:

Return: No.

Example:

const client = APPClient.init();
client.on("agentconsole.livechat.toolbar.popover.opened", function (popover) {
  // do stuff
});

2. Popover closed Event

Params:

Return: No.

Example:

const client = APPClient.init();
client.on("agentconsole.livechat.toolbar.popover.closed", function (popover) {
  // do stuff
});