- 16 Sep 2022
- 1 Minute to read
- Print
- DarkLight
Develop an App
- Updated on 16 Sep 2022
- 1 Minute to read
- Print
- DarkLight
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.
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>