---
title: "Live Chat Toolbar"
slug: "app-widget-live-chat-toolbar"
updated: 2022-07-14T08:33:12Z
published: 2022-07-14T08:33:12Z
canonical: "developer.comm100.com/app-widget-live-chat-toolbar"
---

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

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

The following additional actions are available in this widget:

- [Popover](/docs/app-widget-live-chat-toolbar#popover)
- [Chat](/docs/app-widget-live-chat-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 the chatToolbar widget

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| isEnabled | bool | Default value is `true`, if the value is `true`, the custom tool is available. |
| isHidden | bool | Default value is `false`, if the value is `true`, the custom tool is hidden. |

`Return:` No.

`Example:`

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

## Events

1. Register click event callback

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callback | function | The callback function will be fired when clicking the extended icon. |

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

| 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.livechat.toolbar.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.livechat.toolbar.popover.toggle");
```

1. Open popover for the current widget

`Params:` No.

`Return:` No.

`Example:`

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

1. Close the popover for the current widget

`Params:` No.

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.do("agentconsole.livechat.toolbar.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.livechat.toolbar.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.livechat.toolbar.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.livechat.toolbar.popover.closed", function (popover) {
  // do stuff
});
```