--- title: "Manifest" slug: "app-manifest" updated: 2024-03-19T02:38:29Z published: 2024-03-19T02:38:29Z canonical: "developer.comm100.com/app-manifest" --- > ## Documentation Index > Fetch the complete documentation index at: https://developer.comm100.com/llms.txt > Use this file to discover all available pages before exploring further. # Manifest ## 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](/docs/app-manifest#manifest-for-agent-console) - [Manifest for Control Panel](/docs/app-manifest#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](/docs/app-manifest#live-chat-side-tab) - [Visitor Badge](/docs/app-manifest#visitor-badge) - [Live Chat Toolbar](/docs/app-manifest#live-chat-toolbar) - [Ticketing & Messaging Side Tab](/docs/app-manifest#ticketing-messaging-side-tab) - [Nav Bar](/docs/app-manifest#nav-bar) - [Top Bar](/docs/app-manifest#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` ![image.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/image%28155%29.png) `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` ![image.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/image%28156%29.png) `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` ![image.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/image%28157%29.png) `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` ![image.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/image%28158%29.png) `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` ![image.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/image%28159%29.png) `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` ![image.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/image%28160%29.png) `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` ![menu.png](https://cdn.document360.io/c74d881b-a484-4687-85e4-c23c20d25ce2/Images/Documentation/menu%283%29.png) `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.