---
title: "Agent Console API"
slug: "app-agent-console-api"
updated: 2022-07-14T08:32:41Z
published: 2022-07-14T08:32:41Z
canonical: "developer.comm100.com/app-agent-console-api"
---

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

# Agent Console API

## Introduction

The extension area provided by the agent console is called widget here. You can extend the agent console through the widgets as below:

- [Top Bar](/docs/app-widget-top-bar)
- [Nav Bar](/docs/app-widget-nav-bar)
- [Live Chat Side Tab](/docs/app-widget-live-chat-tab)
- [Live Chat Toolbar](/docs/app-widget-live-chat-toolbar)
- [Live Chat Visitor Badge](/docs/app-widget-live-chat-visitor-badge)
- [Ticketing & Messaging Side Tab](/docs/app-widget-ticketing-messaging-tab)
- [Background](/docs/app-widget-background)

In order to enhance the extensibility of agent console, we also provide the following public objects.

- [Notification](/docs/app-agent-console-api#notification)
- [Widgets](/docs/app-agent-console-api#widgets)
- [Dialog](/docs/app-agent-console-api#dialog)

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

## Notification

1. Send a notification to Agent Console

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| title | string | Define title for message |
| message | string | The content of message |
| leftTabId | string | It is optional. The Id of left tab in the Nav bar, system tab Id: `visitor`, `chat`, `tickets` and `agent`. If it is extensive tab, use the widgetId instead. If you config it, navigate to the specific tab when clicking pop up notification |

`Return:` No.

`Example:`

```
client.do("agentconsole.notification.notify", {
  title: "new-message",
  message: "new message",
});
```

## Widgets

**Actions**

1. Get all widgets that configured by current app when executing this API.

`Params:` No.

`Return:` Wedget list there you configured in the manifest.

`Example:`

```
const client = APPClient.init();
client.get("agentconsole.widgets").then(function (widgets) {
  // do stuff
});
```

1. Send the message to others widget

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| to | string | Widget Id which will be received this message. |
| data | any | The message content. It supports base data type and plain object. You can define a structure base on your requirements. |

`Return:` No.

`Example:`

```
const client = APPClient.init();
client
  .do("agentconsole.widget.sendMessage", {
    to: "0593aae4-bc24-4420-8bf4-6e4ffa63bd1a", 
    data: "test",
  })
```

**Events**

1. It will be fired when others widget send message to it throught call `agentconsole.widget.sendMessage` api.

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callback | function | It is triggered when received a message from other widgets. |

`Callback params:`

| Name | Type | Description |
| --- | --- | --- |
| from | string | The Id of widget which sent a message. |
| data | any | The received content. |

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.on("agentconsole.widget.messageReceived", function (data) {
  // do stuff
});
```

## Dialog

This API can open a dialog dynamically, and others widget under this app can subscribe the event of a dialog have be opened.

**Actions**

1. Open a dialog  

This API can open a dialog dynamically,  and return promise result, you can get the opened dialog Id from result.  The dialog Id is used when you want to close the dialog.

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| url | string | The content of requested will displayed in the dialog. |
| width | number | Default value is 600, you specify the value for dialog width. |
| height | number | Default value is 400, you specify the value for dialog height. |

`Return:`

| Name | Type | Description |
| --- | --- | --- |
| dialogId | string | The Id of the opened dialog, it is used when you want to close the dialog. |

`Example:`

```
const client = APPClient.init();
const dialogId = await client
  .do("agentconsole.dialog.open", {
    url: "./dialog.html",
    width: 600,
    height: 480,
  })
```

1. Close a dialog  

You need to pass in the **Dialog Id** when closing the dialog.

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| dialogId | string | You can get this Id when you opening the dialog |

`Return:` No.

`Example:`

```
/**
 * @param {string} id - the app id
 */
const client = APPClient.init();
client
  .do("agentconsole.dialog.close", "0593aae4-bc24-4420-8bf4-6e4ffa63bd1a");
```

**Events**

1. You can listen to the following event to track the others dialog opened.

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callback | function | It is triggered when dialog opened. |

`Return:` No.

`Example:`

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

1. You can listen to the following event to track the others dialog closed.

`Params:`

| Name | Type | Description |
| --- | --- | --- |
| callback | function | It is triggered when dialog closed. |

`Return:` No.

`Example:`

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