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

he following additional actions are available in this widget:

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

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

Example:

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

3. 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);

4. Send Message to Current Chat.

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

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

2. Current Chatting Visitor Changed Status.

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

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

4. Current Selected Chat Changes.

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

5. Current Selected Chat Receives Visitor Message.

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