---
title: "Live Chat Visitor Badge"
slug: "app-widget-live-chat-visitor-badge"
updated: 2022-07-14T08:33:17Z
published: 2022-07-14T08:33:17Z
canonical: "developer.comm100.com/app-widget-live-chat-visitor-badge"
---

> ## 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 Visitor Badge

The widget appears as an icon beside the visitor avatar in the live chat tab.

Example manifest:

```
{
  "manifestVersion": "2.0",
  "agentConsole": {
    "widgets": {
      "visitorBadge": {
        "id": "custom-icon",
        "url": "./index.html",
        "tooltip": "Custom Icon",
        "icon": "./icon.png"
      }
    }
  }
}
```

See [more introduction](/docs/app-manifest).

The following additional actions are available in this widget:

- [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 visitor badge widget

`Params:`

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

`Return:` No.

`Example`:

```
const client = APPClient.init();
client
  .set("agentconsole.livechat.visitorBadges.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 badge. |

`Return:` No.

`Example:`

```
const client = APPClient.init();
client.on(
  "agentconsole.livechat.visitorBadges.icon.click",
  function (badge) {
    // do stuff
  }
);
```