---
title: "Top Bar"
slug: "app-widget-top-bar"
updated: 2022-07-14T08:32:53Z
published: 2022-07-14T08:32:53Z
canonical: "developer.comm100.com/app-widget-top-bar"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://developer.comm100.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/docs/app-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](/docs/app-manifest).

The following additional actions are available in this widget:

- [Popover](/docs/app-widget-top-bar#popover)
- [Chat](/docs/app-widget-live-chat-tab)
- [Ticket](/docs/app-widget-ticketing-messaging-tab)

## 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](/docs/guides-app-how-to-use-app-sdk-to-call-api).

## 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:`

| 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

1. 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
});
```

1. 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
});
```

1. 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

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:`

| 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,
});
```

1. 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");
```

1. Open popover for the current widget

`Params:` No.

`Return:` No.

`Example:`

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

1. Close the popover for the current widget

`Params:` No.

`Return:` No.

`Example:`

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

1. 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:`

| 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
});
```

1. 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
});
```