Embedding DW layouts in Webex CC Desktop

Prerequisites

By default, cloud DW does not allow the wallboards to be embedded in other pages for security reasons. To enable DW layouts in your Webex CC Desktop, you need to open a service request with us (https://www.2ring.com/support/contact-support/) to whitelist the “parent” URL. It will most likely be one of these (let us know which one):

• https://desktop.wxcc-us1.cisco.com

• https://desktop.wxcc-anz1.cisco.com

• https://desktop.wxcc-eu1.cisco.com

• https://desktop.wxcc-eu2.cisco.com

After we confirm that the URL has been whitelisted, you can proceed with the steps below.

Webex CC Desktop Layout Update

The Webex CC Desktop Layout JSON can be managed via the Webex Control Hub > Contact Center > Desktop Experience – Desktop Layouts. Full details are available in this Cisco documentation. You will need to be a Webex Contact Center Administrator to make modifications.

The actual JSON layout can vary quite significantly, but here are some examples of how DW layouts can be included. There are two primary ways to include our wallboards in the Desktop:

1. (Almost) Fullscreen in a dedicated Desktop tab.

   

   The JSON section looks like this and needs to be placed at the “nav” level (sublevel of “navigation”):

   {
       "nav": {
           "label": "2Ring Dashboards & Wallboards  - Team Stats with Top Agent",
           "icon": "https://demo.2ring.cloud/viewer/assets/icons/favicon.ico",
           "iconType": "other",
           "navigateTo": "2RingDW2",
           "align": "top"
       },
       "page": {
           "id": "2RingDW2",
           "widgets": {
           "right": {
               "comp": "agentx-wc-iframe",
               "attributes": {
               "src": "https://demo.2ring.cloud/viewer/4z2yv7"
               },
               "wrapper": {
               "title": "2Ring Dashboards & Wallboards - Team Stats with Top Agent",
               "maximizeAreaName": "app-maximize-area"
               }
           }
           },
           "layout": {
           "areas": [
               [
               "right"
               ]
           ],
           "size": {
               "cols": [
               1
               ],
               "rows": [
               1
               ]
           }
           }
       }
   }
   

   If your JSON layout has sections for various roles (agent, supervisor, supervisorAgent), you will need to replicate these “snippets” into each of the role-based sections.

2. Part of a header, visible regardless of the Desktop tab currently in focus.

   

3. The JSON section looks like this and needs to be placed at the “nav” level (sublevel of “area”):

   Dedicated “header”:

   "header": {
           "id": "dw-header",
           "widgets": {
               "head1": {
                   "comp": "agentx-wc-iframe",
                   "attributes": {
                       "src": "https://demo.2ring.cloud/viewer/o9pn1m",
                       "style": "height:64px;width:832px;display:flex;"
                   }
               }
           },
           "layout":{
             "areas":[[ "head1"]], 
             "size": { "cols": [1], "rows": [1] } 
           }           
       }
   

   Part of “advancedHeader”

   "advancedHeader": [
               {
                   "comp": "agentx-wc-iframe",
                   "attributes": {
                       "src": "https://demo.2ring.cloud/viewer/o9pn1m",
                       "style": "height:64px;width:832px;display:flex;"
                   }
               },
               ...
   ]
   

For the wallboard URL, please use the “Short URL” available after clicking the Share button while viewing the desired layout on your DW tenant.

Troubleshooting

Depending on the setup of your DW tenant and/or displayed wallboard, the following browser permissions for your DW tenant address might be required:

• When using Authorized Access (as opposed to Anonymous), you will need to enable “pop-up” windows.

• When utilizing Audible Alerts, you will need to enable Sound.

• When utilizing Toaster Alerts, you will need to enable Notifications.

If you are leveraging the Webex CC Desktop client, these permissions can be given in the Microsoft Edge browser. These settings are shared because the Webex CC Desktop client runs on Microsoft Edge WebView.