Develop an App

Updated on 16 Sep 2022
1 Minute to read

Print
Share
Dark
Light

Article Summary

Share feedback

Thanks for sharing your feedback!

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

Creating Manifest
Creating an icon for chat tab
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?

What's Next

Create your own apps

Table of contents

Steps
Creating Manifest
Creating an icon for the chat tab
Creating an index.html
Documentations