Manifest

19 Mar 2024
6 Minutes to read

Print
Share
Dark
Light

Manifest

Updated on 19 Mar 2024
6 Minutes to read

Print
Share
Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

Introduction

Manifest is the configuration file of the app, configure which extensive point of which product for the app to extend.

Extended products include AgentConsole and Controlpanel. Because each product supports different extensive points, the configuration of the manifest file for each product is described separately below.

Manifest for Agent Console
Manifest for Control Panel

Manifest Version

Manifest contains a configuration item called "manifestversion", this version is provided by Comm100. Comm100 will update the manifest version to enhance integrations and functions. as following:

{
  "manifestVersion": "2.0",
}

Currently, the supported version of comm100 is 2.0, this version improves the extensibility and adds more extensive points. The following configuration instructions are based on version 2.0.

Manifest for Agent Console

AgentConsole supports many extensive points, such as chatTab and ticketTab. The following describes how to configure app manifest to extend AgentConsole.

Background

This type creates a hidden iframe in the agent console. We can implement an app without UI.

{
  "manifestVersion": "2.0",
  "agentConsole": {
    "background": {
        "id": "background-console",
        "url": "./console.html",
    },
  },
}

Configurations

id: string the ID of the widget. Make sure that it is unique in your App.
url: string the URL of the entry page. It can be an absolute/relative URL.
If it is a relative URL, it is relative to the root of the app’s package.

Widgets

You can configure your app as different widgets and display it at different positions of the Agent Console.

Supported widgets:

Live Chat Side Tab
Visitor Badge
Live Chat Toolbar
Ticketing & Messaging Side Tab
Nav Bar
Top Bar

Live Chat Side Tab

This widget extends the tab of the current chat. It appears on the right of the Live Chat. It loads the entry page in the iframe when switching to the extended tab.

Position

Config

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

id: string the ID of the widget. Make sure that it is unique in your App.
url: string the URL of the entry page. It is an absolute/relative URL.
If it is a relative URL, it is relative to the root of the app’s package.
label: string it is displayed in the tab.
icon: string the URL of the icon. It is an absolute/relative URL.
If it is a relative URL, it is relative to the root of the app’s package. It is placed on the left of the tab. The icon format can be png/bmp/jpg/jpeg, and the size must be 20*20.

Visitor Badge

This widget extends the visitor badges. It is placed on the right of the visitor avatar. The extended icon is located to the last.

Position

Config

{
  "manifestVersion": "2.0",
  "agentConsole": {
    "widgets": {
      "visitorBadge": {
        "id": "custom-icon",
        "url": "./index.html",
        "tooltip": "Custom Icon",
        "icon": "./icon.png"
      }
    }
  }
}

id: string the ID of the widget. Make sure that it is unique in your App.
url: string the URL of the entry page. It is an absolute/relative URL.
If it is a relative URL, it is relative to the root of the app’s package.
tooltip: string tooltip when hovering over the icon.
icon: string the URL of the icon. It is an absolute/relative URL.
If it is a relative URL, it is relative to the root of the app’s package. It is placed on the left of the tab.The icon format can be png/bmp/jpg/jpeg, and the size must be 18 *18.

Live Chat Toolbar

This widget extends the editing toolbar. The extended icon is placed to the last.

Position

Config

{
  "manifestVersion": "2.0",
  "agentConsole": {
    "widgets": {
      "chatToolbar": {
        "id": "custom-toolbar",
        "url": "./index.html",
        "tooltip": "Custom toolbar",
        "icon": "./icon.png"
      }
    }
  }
}

id: string the Id of the widget. Make sure that it is unique in your App.
url: string the URL of the entry page. It is an absolute/relative URL.
If it is a relative URL, it is relative to the root of the app’s package.
tooltip: string tooltip when hovering over the icon.
icon: string the URL of the icon. It is an absolute/relative URL.
If it is a relative URL, it is relative to the root of the app’s package. It is placed on the left of the tab. The icon format can be png/bmp/jpg/jpeg, and the size must be 16*16.

Ticketing & Messaging Side Tab

This widget extends the tab of the current ticket. It is placed on the right of the Ticketing & Messaging. It will load the entry page in the iframe when switching to the extended tab.

Position

Config

{
  "manifestVersion": "2.0",
  "agentConsole": {
    "widgets": {
      "ticketSideTab": {
        "id": "ticket-custom-tab",
        "url": "./index.html",
        "label": "Custom Tab",
        "icon": "./icon.png"
      }
    }
  }
}

id: string the Id of the widget. Make sure that it is unique in your App.
url: string the URL of the entry page. It is an absolute/relative URL.
If it is a relative URL, it is relative to the root of the app’s package.
label: string It is displayed in the tab.
icon: string the URL of the icon. It is an absolute/relative URL.
If it is a relative URL, it is relative to the root of the app’s package. It is placed on the left of the tab. The icon format can be png/bmp/jpg/jpeg, and the size must be 20*20.

Nav Bar

This widget extends the left tab of Agent Console. It is placed on the left side of the Agent Console. It will load the entry page in the iframe when switching to the extended tab.

Position

Config

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

id: string the Id of the widget. Make sure that it is unique in your App.
url: string the address of resource, which will be displayed in iframe, can be relative or absolute.
label: string it is displayed in tab.

Top Bar

This widget extends the top bar of Agent Console. It is placed on the top of the Agent Console. It will load the entry page in the hided iframe.

Position

Config

{
  "manifestVersion": "2.0",
  "agentConsole": {
    "widgets": {
      "topBar": {
        "id": "custom-button",
        "url": "./index.html",
        "label": "Custom Button",
        "icon": "./icon.png"
      }
    }
  }
}

id: string the Id of the widget. Make sure that it is unique in your App.
url: string the address of resource, which will be displayed in iframe, can be relative or absolute.
icon: string the address of image resource.
label: string it is displayed in the button.
tooltip: string it is displayed in the tooltip

Manifest for Control Panel

This section introduces the configuration for extending the Control Panel by App. The primary way is to extend the control panel by adding a page.

You can customize the content of the extension page according to your needs, share the menu system provided by the control panel, and expand the page with the same style as the control panel. As shown below:

Position

Config

{
  "manifestVersion": "2.0",
  "controlPanel": {
    "pages": [
      {
        "id": "0593aae4-bc24-4420-8bf4-6e4ffa63bd1a",
        "path": "/liveChat/customPage/",
        "url": "./demo.html",
        "label": "Custom Page",
        "icon": "./icon.png",
      }
    ]
  },
}

id: string the Id of the widget. Make sure that it is unique in your App.
path: string it describes the position of the menu for this page. It is part of the page address displayed in the location.
url: string the content of the extensive page. The content will render in the iframe.
label: string it appears in the tooltip for level1Menu. Otherwise, it is the menu label.
icon: string it is optional. The size is 30*30. This field is required for level1Menu. It can be a relative or absolute path. If it is a relative path, the root folder is your package.

Was this article helpful?

What's Next

App API Reference

Table of contents

Introduction
Manifest Version
Manifest for Agent Console
Manifest for Control Panel