Roles

The default JSON layout has following three roles.

• agent—To set the Desktop Layout to be displayed when an agent signs in to the Webex Contact Center Desktop to handle agent activities.

• supervisor—To set the Desktop Layout to be displayed when a supervisor signs in to the Webex Contact Center Desktop to handle only supervisor capabilities.

  When a supervisor signs in to the Desktop, the desktop layout that is specified for the primary team is applied. If you do not provide a primary team, the global layout applies. By default, APS reports are disabled.

• supervisorAgent—To set the Desktop Layout to be displayed when a supervisor signs in to the Webex Contact Center Desktop to handle both supervisor capabilities and agent activities.

The following are the top-level properties for JSON layout based on the role:

{
    "agent": {
        "version": "0.1.0",
        "appTitle": "Webex Contact Center",
        "logo": "",
        "taskPageIllustration": "https://www.abc.com/image/logo.jpg",
        "stopNavigateOnAcceptTask": false,
        "dragDropEnabled": false,
        "notificationTimer": 8,
        "maximumNotificationCount": 3,
        "browserNotificationTimer": 8,
        "wxmConfigured": false,
        "desktopChatApp": {
            "webexConfigured": false,
        }
        "headerActions": ["outdial", "notification"],
        "area": {
            "advancedHeader": {
                ...
            },
            "panel": {
                ...
            },
            "navigation": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            }
        },
    },
    "supervisor": {
        "version": "0.1.0",
        "appTitle": "Webex Contact Center",
        "logo": "",
        "taskPageIllustration": "https://www.abc.com/image/logo.jpg",
        "stopNavigateOnAcceptTask": false,
        "dragDropEnabled": false,
        "notificationTimer": 8,
        "maximumNotificationCount": 3,
        "browserNotificationTimer": 8,
        "wxmConfigured": false,
        "desktopChatApp": {
            "webexConfigured": false,
        }
        "headerActions": ["outdial", "notification"],
        "area": {
            "advancedHeader": {
                ...
            },
            "panel": {
                ...
            },
            "navigation": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            },
            "homePage": {
                ...
            }
        },
    }
    "supervisorAgent": {
        "version": "0.1.0",
        "appTitle": "Webex Contact Center",
        "logo": "",
        "taskPageIllustration": "https://www.abc.com/image/logo.jpg",
        "stopNavigateOnAcceptTask": false,
        "dragDropEnabled": false,
        "notificationTimer": 8,
        "maximumNotificationCount": 3,
        "browserNotificationTimer": 8,
        "wxmConfigured": false,
        "desktopChatApp": {
            "webexConfigured": false,
        }
        "headerActions": ["outdial", "notification"],
        "area": {
            "advancedHeader": {
                ...
            },
            "panel": {
                ...
            },
            "navigation": {
                ...
            },
            "persistent": {
                ...
            },
            "headless": {
                ...
            }
        },
    }
},

appTitle

To specify a title on the horizontal header of the Desktop. The default title is Webex Contact Center.

Example:

"appTitle": "Webex Contact Center"

The title can either be text, an image, or an empty string. The title text appears in two rows. If the text extends beyond the second row, an ellipsis icon is displayed, and the tooltip displays the complete title. Styles cannot be applied to the title.

You can either use data URIs (Uniform Resource Identifier) or host a custom title image on a content delivery network (CDN), Amazon Web Services (AWS) Simple Storage Service (S3) bucket, or a similar hosting service, and then specify the URL to the hosted image. The supported title image formats are PNG, JPG, JPEG, GIF, SVG, and WebP. The supported title image size is 184 x 32 pixels (width x height).

logo

To specify a URL for the company logo. If you do not provide a URL, then the Webex Contact Center logo appears by default.

Example:

"logo": "https://my-cdn.com/logo.png"

You can host a custom logo image on a CDN, Amazon Web Services (AWS) Simple Storage Service (S3) bucket, or a similar hosting service, and then specify the URL to the hosted image. The supported logo image formats are PNG, JPG, JPEG, GIF, SVG, and WebP. The supported logo image size is 96 x 32 pixels (width x height).

taskPageIllustration

To specify a custom illustration for the task page based on organization preferences and brand alignment. When an agent signs in, the task page displays the configured illustration as a background. By default, the task page appears without illustration.

Example:

"taskPageIllustration": "https://www.abc.com/image/logo.jpg",

You can either use data URIs or host a custom illustration on a content delivery network (CDN), Amazon Web Services (AWS) Simple Storage Service (S3) bucket, or a similar hosting service, and then specify the URL to the hosted illustration. The illustration can be configured at the global or team level based on the layout definition. Ensure to configure the correct URL to prevent the broken image from being displayed on the Desktop.

The supported task page illustration formats are PNG, JPG, JPEG, GIF, SVG, and WebP. The recommended illustration size is 400 x 400 pixels (width x height). If the custom illustration size is larger than the recommended size, the illustration size is adjusted based on the aspect ratio in the task page. If the custom illustration size is smaller than the recommended size, the actual illustration size is retained in the task page.

stopNavigateOnAcceptTask

To determine whether to shift the focus to a newly accepted task, when the agent accepts the new task while working on a previous task. The default value is false.

Example:

"stopNavigateOnAcceptTask": false

If the value is set as true, when the user accepts a new task on the Desktop, the focus is retained on the previous task and does not shift to the newly accepted task. This setting prevents the user from losing any data when accepting a new request.

For example, consider that Agent 1 is on chat with Customer 1 and simultaneously on a voice call with Customer 2. During the voice call, Agent 1 is updating the details of Customer 2 in the Interaction Control pane. Currently, Agent 1 has two active tasks in the Task List pane, and the focus is on the Interaction Control pane. When Agent 1 accepts a new chat request from Customer 3, the focus remains on the Interaction Control pane with Customer 2 and does not shift to the newly accepted chat request.

To retain the focus on the previous task and not to shift to the newly accepted task, select the custom layout with the stopNavigateOnAcceptTask property value set to true.

If the stopNavigateOnAcceptTask property value is not entered in the JSON layout, the Desktop shifts the focus to the newly accepted task. The behavior is similar to when the stopNavigateOnAcceptTask property value is set to false.

dragDropEnabled

To enable the drag-and-drop and resizing of the widgets on the custom pages, set the value to true. The default value is false.

Example:

"dragDropEnabled": false

notificationTimer

To set the duration (in seconds) after which the desktop notifications on the Desktop are automatically dismissed. The notification appears at the top-right corner of the Desktop. The default timeout value is 8 seconds. The valid range for timeout values is 1-10 seconds. For the timeout changes to take effect, the browser must be refreshed after the changes are made.

Example:

"notificationTimer": 8

maximumNotificationCount

To set the number of desktop notifications to be displayed at a time on the Desktop. The default value is 3. The range for desktop notifications is 1-10. The desktop notifications are stacked. If there are many notifications, they appear with a slight delay depending on the notificationTimer settings.

browserNotificationTimer

To set the duration (in seconds) after which the browser toaster notifications on the Desktop are automatically dismissed. Toaster is a native browser notification that appears only if the Desktop is not the active browser window or tab. The Desktop browser window or tab is inactive when

• You are working on other browser windows or tabs.

• You are working on other applications.

• You have minimized the Desktop browser window.

The notification appears at the top-right corner of the Desktop. The default timeout value is 8 seconds. The recommended range for timeout values is 5-15 seconds. For the timeout changes to take effect, the browser must be refreshed after the changes are made.

Example:

"browserNotificationTimer": 8

wxmConfigured

(Optional) To configure Webex Experience Management, set the value to true. The default value is false.

Example:

"wxmConfigured": true

desktopChatApp

To configure multiple Cisco-offered chat applications such as Webex App.

webexConfigured

Webex App along with its messaging and meeting functionalities can be configured within the Desktop. This configuration allows agents to collaborate with other agents, supervisors, and subject matter experts (SMEs) in their organization without navigating away from the Desktop.

To configure Webex App within the Desktop:

• In Cisco Webex Control Hub, when adding services for a user, select the Advanced Messaging check box (Users > Manage Users > Services > Messaging). For more information, see Manage User Accounts in Cisco Webex Site Administration.

• In the custom Desktop Layout, set the webexConfigured property value to true.

  Example:

  "desktopChatApp": {
      "webexConfigured": true
  },

  The default value of the webexConfigured property is false.

  Webex App is available for the agent, supervisor, and supervisorAgent roles only if you set the webexConfigured property value to true for each of these roles. The agent, supervisor, or supervisorAgent can't sign out of Webex App.

  To display the (Webex) icon on the horizontal header of the Desktop, enter the value webex in the headerActions property. For more information, see headerActions.

  To enable Webex App for a specific team, select the custom layout with the webexConfigured property value set to true. For more information, see Create a team.

You can configure Webex App in the Auxiliary Information pane, custom page, and custom widget also. For more information, see Auxiliary Information Pane.

Webex App Notification

The values that are specified using the notificationTimer and browserNotificationTimer properties for the notification timer are applicable for Webex App. The default timeout value is 8 seconds for these properties. For more information, see notificationTimer and browserNotificationTimer.

headerActions

To change the order of the icons on the horizontal header of the Desktop. The default order is as follows:

1. (Webex)

2. (Outdial Call)

3. (Notification Center)

Set the value of the headerActions property as follows:

Example:

To change the default order of the icons, enter the headerActions property and the values in the custom layout accordingly.

Example:

area

The area property is the core section of the Desktop Layout. You can define the layout as per the area.

"area": {
    "header": {
        ...
    },
    "advancedHeader: {
        {
          "comp": "widget-1",
          "attributes": { ... },
          "script": ....
        }
    },
    "panel": {
        ...
    },
    "navigation": {
        ...
    },
    "persistent": {
        ...
    },
    "headless": {
        ...
    }
},

You can configure the following area objects:

• Panel: Represents the second panel or the right-most panel in the Auxiliary Information pane.

• Navigation: Represents custom pages and their navigation elements that are related to the pages.

• Persistent: Represents the page-level widgets that are persistent and display on all pages of the Desktop.

• Headless: Represents the widgets that do not have a visual interface, but execute logic in the background.

advancedHeader

To customise the visibility and change the order of the icons on the horizontal header of the Desktop. The default order is as follows:

1. (Webex)

2. (Outdial Call)

3. (Notification Center)

4. (Agent State Selector)

Set the value of the advancedHeader property as follows:

Example:

"advancedHeader": [
        {
          "comp": "agentx-webex"
        },
        {
          "comp": "agentx-outdial"
        },
        {
          "comp": "agentx-notification"
        },
        {
          "comp": "agentx-state-selector"
        }
        {
          "comp": "widget-1",
          "attributes": { ... },
          "script": ....
        }
      ]

To change the default order of the icons, enter the advancedHeader property and the values in the custom layout accordingly.

The widgets flow into the dropdown menu from left to right.

Attributes for Persistent Tabs

To set the tabs in the custom pages and custom widgets as persistent, enter the attributes for md-tabs in the custom layout.

Example: Set Tabs as Persistent

{
    "comp": "md-tabs",
    "attributes": {
        "persist-selection": true,
        "tabs-id": "unique-id for all the tabs together in the container"
    },
}

When you set md-tabs to be persistent (persist-selection: true), Agent Desktop retains the tab selection even if an agent switches between pages or widgets in the Desktop.

The More Tabs drop-down list appears automatically when the Auxiliary Information pane contains multiple tabs.

You must add a custom tab tooltip for readability and accessibility. To add a tooltip for a custom tab, wrap the component with md-tooltip. Enter the tooltip information in the message property and apply the style property values as shown in the following example.

"comp": "md-tooltip",
"attributes": {
    "class": "widget-tabs",
    "message": "Sample Tab 1",
    "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;"
},

To enable the drag-and-drop feature within the custom tab, add the following property within the attributes:

"comp": "md-tabs",
"attributes": {
    "class": "widget-tabs",
    "draggable": true,
    "comp-unique-id": "sample-dynamic-custom-tabs"
},

• draggable: Set the draggable property value to true.

• comp-unique-id: Enter a unique value to identify the component.

  Example:

  "comp-unique-id": "sample-dynamic-custom-tabs"
  

If you enable drag-and-drop for a custom tab, the agent can drag and drop the tab to the required position within the Auxiliary Information pane. To reset the tabs to the default tab order, add the following property:

"comp": "agentx-wc-more-actions-widget",
"attributes": {
    "slot": "settings",
    "class": "widget-pane",
    "tabs-unique-id": "sample-dynamic-custom-tabs"
},

• agentx-wc-more-actions-widget: Enter the component that is displayed as the More Actions () icon in the Auxiliary Information pane.

• slot="settings": Enter an attribute within the component that is displayed as the Reset Tab Order option in the More Actions drop-down list. Agents can reset the tabs in the Auxiliary Information pane to the default order by clicking the > Reset Tab Order.

• tabs-unique-id: Enter the same unique value defined for the comp-unique-id property to map and reset the md-tabs components.

The following sample code uses the More Actions and Reset Tab Order functions.

"comp": "agentx-wc-more-actions-widget",
"attributes": {
    "slot": "settings",
    "class": "widget-pane",
    "tabs-unique-id": "sample-dynamic-custom-tabs"
},
"children": [{
    "comp": "div",
    "attributes": {
        "textContent": "custom action",
        "slot": "custom-action"
    },
    "children": [{
            "comp": "agentx-wc-notes-header-widget"
        },
        {
            "comp": "agentx-wc-menu-notification"
        }
    ]
}],

}

The More Actions drop-down list can be extended to add additional custom components or widgets after the Reset Tab Order option. The following is a sample set of style property values that can be applied to additional components.

"comp": "md-tooltip",
"attributes": {
    "class": "widget-tabs",
    "message": "Sample Element",
    "style": "max-width: 252px; min-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; margin-bottom: -10px;"
},

• Configure and Access Customer Experience Management Metrics Widget From the Navigation Bar

• Using Tabs on the Custom Page

• Default Auxiliary Information Pane with Contact History, and Screen Pop

• Auxiliary Information Pane with Customer Experience Journey Widget

Configure and Access Customer Experience Management Metrics Widget From the Navigation Bar

Example:

{
    "nav": {
        "label": "Customer Experience Management Metrics",
        "icon": "/app/images/wxm.bcd45cc3.svg",
        "iconType": "other",
        "navigateTo": "wxm-metrics",
        "align": "top"
    },
    "page": {
        "id": "wxm-metrics",
        "widgets": {
            "comp1": {
                "comp": "agentx-wc-cloudcherry-widget",
                "attributes": {
                    "metrics": true
                },
                "properties": {
                    "userModel": "$STORE.app.userModel",
                    "spaceId": "",
                    "metricsId": "",
                    "teamId": "$STORE.agent.teamName",
                    "ani": "$STORE.agentContact.taskSelected.ani",
                    "isDarkMode": "$STORE.app.darkMode"
                },
                "wrapper": {
                    "title": "Customer Experience Journey",
                    "maximizeAreaName": "app-maximize-area"
                }
            }
        },
        "layout": {
            "areas": [
                ["comp1"]
            ],
            "size": {
                "cols": [1],
                "rows": [1]
            }
        }
    }
},

Using Tabs on the Custom Page

Example:

{
    "nav": {
        "label": "Dynamic Tabs",
        "icon": "stored-info",
        "iconType": "momentum",
        "navigateTo": "dynamic-tabs",
        "align": "top"
    },
    "page": {
        "id": "page-id-tabs",
        "widgets": {
            "comp1": {
                "comp": "md-tabs",
                "children": [{
                        "comp": "md-tab",
                        "textContent": "One",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel"
                        },
                        "children": [{
                            "comp": "widget-two",
                            "script": "http:/my-cdn.com/dynamic-widgets/widget-two.js"
                        }]
                    },
                    {
                        "comp": "md-tab",
                        "textContent": "Two",
                        "attributes": {
                            "slot": "tab"
                        }
                    },
                    {
                        "comp": "md-tab-panel",
                        "textContent": "Two Content",
                        "attributes": {
                            "slot": "panel"
                        }
                    }
                ]
            },
            "comp2": {
                "comp": "widget-two",
                "script": " http:/my-cdn.com/dynamic-widgets/widget-two.js"
            }
        },
        "layout": {
            "areas": [
                ["comp1", "comp2"]
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1]
            }
        }
    }
}

Default Auxiliary Information Pane with Contact History and Screen Pop

Example:

"panel": {
    "comp": "md-tabs",
    "attributes": {
        "class": "widget-tabs"
    },
    "children": [{
            "comp": "md-tab",
            "attributes": {
                "slot": "tab",
                "class": "widget-pane-tab"
            },
            "children": [{
                "comp": "slot",
                "attributes": {
                    "name": "CONTACT_HISTORY_TAB"
                }
            }]
        },
        {
            "comp": "md-tab-panel",
            "attributes": {
                "slot": "panel",
                "class": "widget-pane"
            },
            "children": [{
                "comp": "slot",
                "attributes": {
                    "name": "CONTACT_HISTORY"
                }
            }]
        },
    ]
}, {
    "comp": "md-tab",
    "attributes": {
        "slot": "tab",
        "class": "widget-pane-tab"
    },
    {
        "comp": "md-tab",
        "attributes": {
            "slot": "tab",
            "class": "widget-pane-tab"
        },
        "children": [{
            "comp": "slot",
            "attributes": {
                "name": "SCREEN_POP_TAB"
            }
        }],
        "visibility": "SCREEN_POP"
    },
    {
        "comp": "md-tab-panel",
        "attributes": {
            "slot": "panel",
            "class": "widget-pane"
        },
        "children": [{
            "comp": "slot",
            "attributes": {
                "name": "SCREEN_POP"
            }
        }],
        "visibility": "SCREEN_POP"
    }
},

Auxiliary Information Pane with Customer Experience Journey Widget

Example:

"panel": {
    "comp": "md-tabs",
    "attributes": {
        "class": "widget-tabs"
    },
    "children": [{
                "comp": "md-tab",
                "attributes": {
                    "slot": "tab"
                },
                "children": [{
                    "comp": "slot",
                    "attributes": {
                        "name": "WXM_JOURNEY_TAB"
                    }
                }],
                "visibility": "WXM_JOURNEY"
            },
            {
                "comp": "md-tab-panel",
                "attributes": {
                    "slot": "panel",
                    "class": "widget-pane"
                },
                "children": [{
                    "comp": "agentx-wc-cloudcherry-widget",
                    "properties": {
                        "userModel": "$STORE.app.userModel",
                        "spaceId": "",
                        "metricsId": "",
                        "teamId": "$STORE.agent.teamName",
                        "ani": "$STORE.agentContact.taskSelected.ani",
                        "isDarkMode": "$STORE.app.darkMode"
                    },
                    "wrapper": {
                        "title": "Customer Experience Journey",
                        "maximizeAreaName": "app-maximize-area"
                    }
                }],
                {
                    "comp": "md-tab",
                    "attributes": {
                        "slot": "tab",
                        "class": "widget-pane-tab"
                    },
                    "children": {
                        "comp": "md-tab",
                        "attributes": {
                            "slot": "tab",
                            "class": "widget-pane-tab"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "CONTACT_HISTORY_TAB"
                            }
                        }]
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel",
                            "class": "widget-pane"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "CONTACT_HISTORY"
                            }
                        }]
                    },
                    {
                        "comp": "md-tab",
                        "attributes": {
                            "slot": "tab",
                            "class": "widget-pane-tab"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "SCREEN_POP_TAB"
                            }
                        }],
                        "visibility": "SCREEN_POP"
                    },
                    {
                        "comp": "md-tab-panel",
                        "attributes": {
                            "slot": "panel",
                            "class": "widget-pane"
                        },
                        "children": [{
                            "comp": "slot",
                            "attributes": {
                                "name": "SCREEN_POP"
                            }
                        }],
                        "visibility": "SCREEN_POP"
                    }
                    "visibility": "SCREEN_POP"
                },
            },