Sample Use Case Examples
-
Configure and Access Customer Experience Management Metrics Widget From the Navigation Bar
-
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]
}
}
}
},Note | To get the spaceId and metricsId, see the Webex Experience Management documentation. |
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"
},
},