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

> ## 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 Side Tab

The widget appears as a tab in the right side tabs of live chat in the agent console. The entry page you configured in the [manifest](/docs/app-manifest) will be displyed in the tab.

Example manifest:

```
{
  "manifestVersion": "2.0",
  "agentConsole": {
    "widgets": {
      "chatSideTab": {
        "id": "custom-tab",
        "url": "./index.html",
        "label": "Custom Tab",
        "icon": "./icon.png"
      }
    }
  }
}
```

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

he following additional actions are available in this widget:

- [Chat](/docs/app-widget-live-chat-tab#chat)

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

## Chat

### Basic Data Structure

```
// visitor
const visitor = {
  id: 'e2e3ecc9-fa03-4df2-842a-f08f1d60e36b',    // guid
  name: '', // string
  email: '',// string
  status: '', // string, waiting for chat/chatting/prechat/inviting/offline message/refused by agent/refused by visitor/chat ended/in site/out of site/transferring/system processing
  enterSiteTime: 1502934947,  // number, unix time
  referrer: '', // string, the referrer url
  landingPage: {
    title: '',  // string
    url: '',    // string
  }
  currentPage: {
    title: '',  // string
    url: '',    // string
  },
  currentPageStayTime: 20, // number, time of this visitor stay in current page, unit(second)
  numOfPages: 20, // number, the number of this visitor view pages
  location: {
    ip: '',   // string, ip address in dotted form
    city: '', // string
    state: '',// string
    country: '',  // string
  },
  device: {
    os: '', // string
    browser: '',  // string
    screenResolution: '', //string
    language: '', // string
    timezone: '', // string
  },
  history: {
    firstVisitorTime: 1502934947, // number, unix time
    visitTimes: 0,  // number, visit times of this visitor
    chatTimes: 0,   // number, chat times of this visitor
  }
  visitorSegmentations: [], // array<string>, names of segmentation
  customVariables: [
    {
      name: '', // string
      value: '',// string
    },
  ],
  ssoId: null | '',    // string, the id returned when visitor single sign-on
}

// chat
const chat = {
  id: '68dab65b-0726-4087-886d-a1bf4886eed8',  // guid
  visitorId: 'e2e3ecc9-fa03-4df2-842a-f08f1d60e36b', // guid
  status: ''  // string,  chatting/waiting/transferring/chat ended/audio chatting/video chatting/inviting
  name: '',     // string
  email: '',    // string
  company: '',  // string
  phone: '',    // string
  productService: '', // string
  department: '',     // string, name of department
  fields: [
    {
      name: '',   // string
      value: '',  // string
    }
  ]
  rating: {
    score: 1,   // number, 0 - 5
    comment: '',  // string,
  }
  agents: [], // array<string>, agent's name
  requestPage: {
    title: '',  // string
    url: '',    // string
  },
  requestTime: 1502934947,  // number, unix time
  waitingTime: 15,  // number, how long the visitor waiting time, unit(second)
  duration: 180, //number, how long the chat duration, unit(second)、
  messages: [
    {
      sender: '',
      senderType: '', // string, system/agent/visitor
      time: 1502934947,
      content: '',  // string, html
    }
  ]
}
```

### Actions

1. Get the Information of Current Chat.

`Params:` No.

`Return:` Get current Chat, the structure of chat check in [Basic Data Structure](/docs/app-widget-live-chat-tab#basic-data-structure) section.

`Example:`

```
/** @type {object(chat)} **/
const client = APPClient.init();
const currentChat = await client.get("agentconsole.livechat.currentChat");
```

2. Get the Information of the Current Chatting Visitor.

`Params:` No.

`Return:` Get the Information of the current chatting visitor, the structure of visitor check in [Basic Data Structure](/docs/app-widget-live-chat-tab#basic-data-structure) section.

`Example:`

```
/** @type {object(visitor)}**/
const client = APPClient.init();
const chatingVisitor = await client.get("agentconsole.livechat.currentChat.visitor");
```

1. Set the Pre-chat Information for Current Chat.

```
/** @param {string} name **/
const client = APPClient.init();
client.set("agentconsole.livechat.currentChat.name", name);

/** @param {string} email **/
const client = APPClient.init();
client.set("agentconsole.livechat.currentChat.email", email);

/** @param {string} phone **/
const client = APPClient.init();
client.set("agentconsole.livechat.currentChat.phone", phone);

/** @param {string} productService **/
const client = APPClient.init();
client.set("agentconsole.livechat.currentChat.productService", productService);

/** @param {string} department **/
const client = APPClient.init();
client.set("agentconsole.livechat.currentChat.department", department);

/** @param {array<field>} fields **/
const fields = [
  {
    name: "",
    value: "",
  },
];
const client = APPClient.init();
client.set("agentconsole.livechat.currentChat.fields", fields);
```

1. Send Message to Current Chat.

```
/** @param {string} message **/
const client = APPClient.init();
client.do("agentconsole.livechat.currentChat.send", message);
```

1. Insert Message to the editor of Current Chat.

```
/** @param {string} message **/
const client = APPClient.init();
client.do("agentconsole.livechat.currentChat.input", message);
```

### Events

1. Chat started/Chat ended Event.

```
/** @param {object(chat)} chat **/
const client = APPClient.init();
client.on("agentconsole.livechat.chats.chatStarted", function (chat) {
  // do stuff
});

/** @param {object(chat)} chat **/
const client = APPClient.init();
client.on("agentconsole.livechat.chats.chatEnded", function (chat) {
  // do stuff
});
```

1. Current Chatting Visitor Changed Status.

```
/** @param {object(visitor)} visitor **/
const client = APPClient.init();
client.on("agentconsole.livechat.currentChat.visitor.statusChanged", function (visitor) {
  // do stuff
});
```

1. Agent Submitted the Wrap-up for Current Chat.

```
/** @param {object(chat)} chat **/
const client = APPClient.init();
client.on("agentconsole.livechat.currentChat.wrapupSubmitted", function (chat) {
    // do stuff
});
```

1. Current Selected Chat Changes.

```
/** @param {object(chat)} chat **/
const client = APPClient.init();
client.on("agentconsole.livechat.chats.selected", function (chat) {
  // do stuff
});
```

1. Current Selected Chat Receives Visitor Message.

```
/** @param {string} message **/
const client = APPClient.init();
client.on("agentconsole.livechat.currentChat.receivedVisitorMessage", function (message) {
  // do stuff
});
```