Contents x
- Getting Started
- Guides
- Connecting to Server API (Restful)
- Extend Comm100 by Apps
- Mobile SDK
- Bot Integration
- SSO (Single Sign-On)
- VoIP Integration
- Embed Comm100 into other system
- Custom CSS
- Apps
- Server API (Restful) Reference
- Introduction
- Authentication
- Contact
- LiveChat
- Agent Private Message
- Audio & Video Chat
- Auto Distribution
- Auto Invitation
- Banned Visitor
- Banned IP
- Campaign
- Chat
- Custom Variable
- Custom Variable Config
- Chat Server
- Conversion Action
- Dynamic Campaign
- Field
- Installation
- Integration Calendly
- Offline Message
- Real Time
- Segment
- Segment Config
- Secure Forms
- Screen Sharing Config
- Shift
- Shift Config
- Visitor History
- Visitor Single Sign-On (SSO)
- Webhook
- Wrapup Category Config
- Wrap-Up Field
- Bot
- Agent Assist
- Agent Assist Learning Question
- Agent Assist Synonym
- Chatbot
- Chatbot Canned Quick Reply
- Chatbot Entity
- Chatbot Intent
- Chatbot Engine
- Chatbot Intent Answer
- Chatbot Action
- Chatbot Intent Category
- Chatbot Intent Question
- Chatbot Learning Question
- Chatbot Message When A Visitor Start A Chat
- Chatbot Message When Not Helpful
- Chatbot Message When Providing Possible Answer
- Chatbot No Answer Message
- Chatbot Smart Trigger
- Chatbot Generative Answers Source
- Chatbot Generative Answers Content
- Prebuilt Entity
- Task Bot
- Taskbot Booked Calendly Meeting
- Taskbot Version
- Bot Message API
- Bot Session API
- VoiceBot
- Ticketing
- KB
- Global Setting
- Action Type
- Agent
- Custom Agent Away Status
- Audit Log
- Agent Single Sign-On Config
- Credit Card Masking Config
- Department
- Login IP Allowlist
- Auto Translation
- Module
- Password Policy Config
- Permission
- Private Canned Message
- Private Canned Message Category
- Public Canned Message
- Public Canned Message Category
- Restricted Words Config
- Role
- Role Config
- Site Profile
- System Avatar
- Visitor
- Department Config
- Secure Forms
- Reporting
- Visitor Side API (JavaScript) Reference
- Partner API Reference
How to Extend Nav Bar
Article summary
Did you find this summary helpful?
Thank you for your feedback
Introduction
This article introduces how to develop an app to extend left tab in the Agent Console.
We will show you how to add a new tab in the Agent Console in this example. You can also use Server API(Restful) and App API(JavaScript) to implement more complex logic based on your own requirements.
After completing all steps, you can see a new tab in the left side of Agent Console, as follows:
Prerequisites
Read Developing An App for setting up a testing environment.
Steps
Configuring the manifest file
Configure manifest as follows.
{
"manifestVersion": "2.0",
"agentConsole": {
"widgets": {
"navBar": {
"id": "custom-tab",
"url": "./index.html",
"label": "Custom Tab"
}
}
}
}
JSON
Properties
Name | Type | Required | Description |
---|---|---|---|
id | string | yes | It as the identity of widget. |
url | string | yes | The address of resource, which will be displayed in iframe, can be relative or absolute. |
label | string | no | It is displayed in tab. |
Modifying the index.html
Copy the following code to index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello App</title>
<script type="text/javascript" src="./js/APPClient.js"></script>
</head>
<body>
<div>
Hello! New Tab!
</div>
</body>
</html>
HTML
Testing App
Follow this guide, log in to Agent Console, you can find a new tab in the Agent Console:
Was this article helpful?
Thank you for your feedback! Our team will get back to you
How can we improve this article?
Your feedback
Comment
Comment (Optional)
Character limit : 500
Please enter your comment
Email (Optional)
Email
Please enter a valid email