Develop an App
  • 16 Sep 2022
  • 1 Minute to read
  • Dark
    Light

Develop an App

  • Dark
    Light

Article summary

Introduction

This article mainly introduces how to develop an app with an example. To make it simple to understand, we will extend the Live Chat tab by implementing the 'agentconsole.currentChat.visitor' API to get the chatting visitor's information and display it in the tab. The example uses HTML, CSS, and JavaScript.

Steps

You can follow the steps below to implement an app, or you can download this example.

Chat-Side-Tab.zip

  1. Creating Manifest
  2. Creating an icon for chat tab
  3. Creating an index.html

Creating Manifest

Create a 'manifest.json' file in the root directory, and configure it as follows:

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

Creating an icon for the chat tab

Create an icon image file for the tab that will appear in the Live Chat tabs. Use an icon that helps you to identify the tab. The image size should be 20*20, and the format can be PNG, GIF, JPG, JPEG, or BMP.

Creating an index.html

Create an index .html file. When you switch to the extended Tab, the contents of the file will show. The App API is used, so we need to refer to the SDK provided by Comm100. You can click here to download the SDK file. The sample code is as follows:

<!DOCTYPE html>
<html lang="en">
  <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>
    <div class="container">
      <div class="title">Current Chatting Visitor</div>
      <ul>
        <li><label>Name:</label> <span id="name"></span></li>
        <li><label>Email:</label> <span id="email"></span></li>
      </ul>
    </div>
    <script type="text/javascript">
      var client = APPClient.init();
      client.on("agentconsole.currentChat.selectChange", function () {
        var nameEle = document.getElementById("name");
        var emailEle = document.getElementById("email");
        client.get("agentconsole.currentChat.visitor").then(function (visitor) {
          var visitorInfo = visitor.data;
          nameEle.innerText = visitorInfo.name;
          emailEle.innerText = visitorInfo.email;
        });
      });
    </script>
  </body>
</html>

Documentations


Was this article helpful?