How to set up Agent chat / Inbox component in UI builderIssue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Here are the steps to get the inbox component added to custom configurable workspace.How to set up Inbox sidebar and Agent Chat: Adding the Left sidebar - Inbox (work items)Adding the Empty page - InboxAdding Agent Chat ShellAdding the sidebar in the workspace for InboxRelease<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } Any Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } span { font-size: 12pt; font-family: Lato; color: var(--now-color--text-primary, #000000); } h2 { font-size: 24pt; font-family: Lato; color: var(--now-color--text-primary, black); } h3 { font-size: 18pt; font-family: Lato; color: var(--now-color--text-primary, black); } h4 { font-size: 14pt; font-family: Lato; color: var(--now-color--text-primary, black); } a { font-size: 12pt; font-family: Lato; color: var(--now-color--link-primary, #00718F); } a:hover { font-size: 12pt; color: var(--now-color--link-primary, #024F69); } a:target { font-size: 12pt; color: var(--now-color--link-primary, #032D42); } a:visited { font-size: 12pt; color: var(--now-color--link-primary, #00718f); } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } 1) Adding the Left sidebar - Inbox (work items) Navigate to UI Builder page.Click Menu -> Create Page, select Inbox page as template, type Inbox as name,inbox-sidebar as path, click Create.Click Menu -> Developer -> Open variant collection, go to UX App Routes in related list, and fill in the fields as below:Route: inbox-sidebarFields: openedOptional Parameters: maxTabLimit,activeRecords,activeParentIdParent Macroponent Composition Element ID: wsInboxSidebar 2) Adding the Empty page - Inbox Navigate to UI Builder pageClick Menu -> Create Page, select None as template, type Inbox Empty as name,inbox as path, click Create.Click Menu -> Developer -> Open page definition, fill in the fields as below, and add the following JSON in different fields:Layout model: { "default": { "children": null, "items": [ { "slotName": "Main", "rules": { "grid-area": "main" }, "styles": { "display": "flex", "flex-direction": "column" } } ], "root": null, "rules": { "grid-template-rows": "minmax(400px,auto)", "grid-template-columns": "1fr", "grid-template-areas": "\"main\"", "grid-gap": "1rem", "height": "100%" }, "styles": null, "templateId": "28bde4cd53431010e6bcddeeff7b12cc", "type": "grid" } } Composition: [ { "elementId": "agent_inbox_empty_1", "elementLabel": "Agent Inbox Empty 1", "propertyValues": { "moduleId": { "type": "JSON_LITERAL", "value": "module_inbox" } }, "eventMappings": [], "slot": "Main", "definition": { "id": "299b4786a330c80085c1d0de5bf855bb", "type": "MACROPONENT" }, "overrides": null, "isHidden": { "type": "JSON_LITERAL", "value": "" }, "isNonDestructive": false, "styles": {} }] 3) Adding Agent Chat Shell Navigate to UI Builder pageClick Menu -> Create Page, select None as template, type Agent Chat Shell as name,chat as path, click Create.Add activeParentId and activeRecords as page paramtetersDrag and drop Agent Chat Shell component into pageConfigure component as in attached screenshotCreate below 4 client scripts with interactionUtils as script include:handleAgentChatTransferredhandleNewChatMessageReceivedhandleRemovedFromChathandleLoadChatErrorRefer out-of-the-box (OOTB) records from sys_ux_client_script table for scriptConfigure Events for Agent Chat Shell component with above client scripts as per attached screenshotClick Menu -> Developer -> Open variant collection, go to UX App Routes in related list, and fill in the fields as below: Route: chatFields: activeParentId,activeRecordsParent Macroponent Composition Element ID: wsChatShell Click Menu -> Developer -> Open page definition, fill in the field as below [ { "name":"activeRecords", "label":"activeRecords", "fieldType":"json", "typeMetadata":null, "valueType":"array", "mandatory":false, "defaultValue":null, "description":null, "readOnly":false, "selectable":false }, { "name":"activeParentId", "label":"activeParentId", "fieldType":"string", "typeMetadata":null, "valueType":"string", "mandatory":false, "defaultValue":null, "description":null, "readOnly":false, "selectable":false }] 4) Adding the sidebar in the workspace for InboxFor Inbox Icon appear on the workspace left toolbar (chrome_toolbar). Add the record similar to below in the Chrome toolbar (chrome_toolbar) page property of your experience.Go to Experiences, click into your application, scroll down to UX Page Properties, click New and fill in with below fields:Name: chrome_toolbarType: jsonValue: [ { "id":"inbox", "label":{ "translatable":true, "message":"Inbox" }, "icon":"inbox-outline", "routeInfo":{ "route":"inbox" }, "viewportInfo":{ "route":"inbox-sidebar", "fields":{ "opened":false }, "viewportElementId":"wsInboxSidebar" }, "group":"top", "order":300, "badge":{ "count":0 }, "presence":{ "status":"" }, "show":false, "availability":{ "roles":[ "awa_agent" ], "plugin":"com.glide.interaction.awa" } }]