How to Extend Visitor Badge
  • 16 Sep 2022
  • 1 Minute to read
  • Dark
    Light

How to Extend Visitor Badge

  • Dark
    Light

Article summary

Introduction

This article introduces how to develop an app to extend visitor badge in the Agent Console. You can learn how to add an icon beside the visitor avatar by implementing the click event "agentconsole.livechat.visitorBadge.click" API.

You can also use Server API(Restful) and App API(JavaScript) to implement complex logic based on your requirements.
By following the step-by-step instructions in the example, you can see a new icon beside the visitor avatar, as follows:

visitorInfo(2)

Prerequisites

Read Developing An App for setting up a testing environment.

Steps

  1. Configuring the manifest file
  2. Modifying the index.html
  3. Testing App

Configuring the manifest file

Configure manifest as following and make sure you input visitorBadge as widget's type.

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

Modifying the index.html

Copy the following code to index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello App</title>
    <script type="text/javascript" src="./js/APPClient.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    <script type="text/javascript">
      var client = APPClient.init();
      client.on("agentconsole.currentChat.visitorInfoIcon.click", function () {
        // do stuff
      });
    </script>
  </body>
</html>

Testing App

Follow this guide, log in to Agent Console, simulate a chat, then switch to the chat tab; you can find the icon beside the visitor avatar.

visitorInfo(2)


Was this article helpful?