Top Bar

The widget appears as an icon button or button on the top of the agent console. 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": {
      "topBar": {
        "id": "custom-button",
        "url": "./index.html",
        "label": "Custom Button",
        "icon": "./icon.png"
      }
    }
  }
}

See more introduction.

The following additional actions are available in this widget:

• Popover
• Chat
• Ticket

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 extended button in the top bar
   Use this API to update the information of the extended button, e.g. icon and label.

Params:

Return: No.

Result:

const client = APPClient.init();
client.set("agentconsole.topBar.button", {
  isEnabled: true,
  isHidden: false,
  icon: "./icon.png",
  label: "Custom Top Bar",
  tooltip: "Help text",
});

Events

1. Listen following event to trace the button clicking action.

Params:

Return: No.

Example:

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

2. Mouse enter event

Params:

Return: No.

Example:

const client = APPClient.init();
client.on("agentconsole.topBar.button.mouseEnter", function (toolbar) {
  // do stuff
});

3. Mouse leave event

Params:

Return: No.

Example:

const client = APPClient.init();
client.on("agentconsole.topBar.button.mouseLeave", function (topBar) {
  // 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.topBar.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.topBar.popover.toggle");

3. Open popover for the current widget

Params: No.

Return: No.

Example:

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

4. Close the popover for the current widget

Params: No.

Return: No.

Example:

const client = APPClient.init();
client.do("agentconsole.topBar.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.topBar.popover.status");

Events

1. Popover opened Event

Params:

Return: No.

Example:

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

2. Popover closed Event

Params:

Return: No.

Example:

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