MENU
      How to Extend Nav Bar
      • 17 Jun 2022
      • 1 Minute to read

      How to Extend Nav Bar


      Article summary

      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:

      left-tab.png

      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 follows.

      {
        "manifestVersion": "2.0",
        "agentConsole": {
          "widgets": {
            "navBar": {
              "id": "custom-tab",
              "url": "./index.html",
              "label": "Custom Tab"
            }
          }
        }
      }
      JSON

      Properties

      NameTypeRequiredDescription
      idstringyesIt as the identity of widget.
      urlstringyesThe address of resource, which will be displayed in iframe, can be relative or absolute.
      labelstringnoIt 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:

      image.png


      Was this article helpful?