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:

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

Update extended button in the top bar
Use this API to update the information of the extended button, e.g. icon and label.

Params:

Name	Type	Description
isEnabled	bool	The default value is true. Sets whether the button is available
isHidden	bool	The default value is false. Sets whether the button is visible
icon	string	It is optional, the address of icon
label	string	It is optional, the text for label
tooltip	string	It is optional, it is displayed when hover on button

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

Listen following event to trace the button clicking action.

Params:

Name	Type	Description
callback	function	The callback function will be fired when clicking the extended button.

Return: No.

Example:

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

Mouse enter event

Params:

Name	Type	Description
callback	function	It is triggered when mouse over the button.

Return: No.

Example:

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

Mouse leave event

Params:

Name	Type	Description
callback	function	It is triggered when mouse leave the button.

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

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:

Name	Type	Description
width	number	Set the width of popover
height	number	Set the height of popover

Return: No.

Example:

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

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");

Open popover for the current widget

Params: No.

Return: No.

Example:

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

Close the popover for the current widget

Params: No.

Return: No.

Example:

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

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

Popover opened Event

Params:

Name	Type	Description
callback	function	It is triggered when Popover opened.

Return: No.

Example:

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

Popover closed Event

Params:

Name	Type	Description
callback	function	It is triggered when Popover closed.

Return: No.

Example:

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