CloudCherry is now part of Cisco.
Learn More About Cisco

Cisco Webex Experience Management Widgets and Gadgets


Customer Experience Journey and Customer Experience Analytics can be added to Webex Contact Center as widgets, and Unified CCE or Unified CCX as gadgets. These can be easily exported from the Spaces section of Experience Management.

Overview



Once added, these gadgets display the response data for CEJ and Metrics in CEA as they are setup in Webex Experience Management. Based on user’s role, CEA will display metrics relevant for the user.




Before You Begin (CORS URL Setup)

To ensure that CEJ and CEA load up correctly in Webex Contact Center, Unified CCE, or Unified CCX, they need to be authenticated. You can allow up to 25 of your Webex Contact Center, Unified CCE, or Unified CCX URLs in Experience Management. This can also be used for solutions with multiple nodes.

The format for allowing is https://<finesse FQDN>:8445


Follow the steps below to allow CORS Origin:

Step 1: Please make a note of the hostname along with the port number of the IP you are using to connect to Experience Management from Webex Contact Center, Unified CCE, or Unified CCX.

Step 2: Have your contact center administrator login to the Experience Management dashboard via a web browser using the credentials sent during the handover of your account.

Step 3: Navigate to the Edit Profile page by clicking on the User Profile icon on the top right of the screen.

Step 4: Scroll down the Edit Profile page till you see a tab titled CORS Origin.

Step 5: Enter the host name with port number of your environment and press Enter. You can add up to 25 URLs.


contactcenter/01_cors.png


Export CEJ and CEA for Webex Contact Center, Unified CCE, or Unified CCX

Follow the steps listed below to export CEJ and CEA from Experience Management.


Export Widgets for Webex Contact Center

Export CEJ Widget from Experience Management

Steps to export the code snippet required to add the CEJ widget to Webex Contact Center:

Step 1: Sign In to Experience Management using the Main account or Admin sub-account credentials.

Step 2: Navigate to the Space called Overall Experience using the top navigation bar.

Step 3: On the left menu within this space, click on the Responses section.

Step 4: Within the Responses section, click on menu ⁝ icon on the top right and select “Export To Cisco Contact Center” from the drop down menu.

Step 5: Copy the Space ID from the text box under the label DETAILS FOR CISCO WEBEX CONTACT CENTER and keep it handy while adding the CEJ widget to Webex Contact Center. Please make sure you copy the correct details meant for Webex Contact Center.

Step 6: Click Done.


Export CEA Widget from Experience Management

Steps to export the code snippet required to add the CEA widget to Webex Contact Center:

Step 1: Sign In to Experience Management using the Main account or Admin sub-account credentials.

Step 2: For agent CEA gadget, navigate to the Space called Agent Dashboard using the top navigation bar. For supervisors (teams), navigate to Space called Supervisor Dashboard. In case a custom Space has been created by you to use for CEA Gadget, navigate to that Space.

Step 3: On the left menu within this space, under go to Metric Groups and select Customer Experience Analytics from the menu. You can use any other custom metric group you have created in Experience Management for CEA Gadget.

Step 4: Within the Metric Groups section, click on menu ⁝ icon on the top right and select “Export To Cisco Contact Center” from the drop down menu.

Step 5: Copy the Space ID and Metric ID from the text boxes under the label DETAILS FOR CISCO WEBEX CONTACT CENTER and paste them somewhere to keep these details handy while adding the CEA widget to Webex Contact Center. Please make sure you copy the correct details meant for Webex Contact Center.

Step 6: Click Done.

Step 6: Click Done.


Export Gadgets for Unified CCE and Unified CCX

Export CEJ Gadget from Experience Management

Steps to export the code snippet required to add the CEJ gadget to Unified CCE and Unified CCX:

Step 1: Sign In to Experience Management using the Main account or Admin sub-account credentials.

Step 2: Navigate to the Space called Overall Experience using the top navigation bar.

Step 3: On the left menu within this space, click on the Responses section.

Step 4: Within the Responses section, click on menu ⁝ icon on the top right and select “Export To Cisco Contact Center” from the drop down menu.

Step 5: Copy the Code Snippet from the text box under the label CODE FOR CISCO FINESSE DESKTOP and keep it handy while adding the CEJ gadget to UCCE or UCCX. Please make sure you copy the correct code snippet meant for Finesse Desktop (UCCE and UCCX).

Step 6: Click Done.


Export CEA Gadget from Experience Management

Steps to export the code snippet required to add the CEJ gadget to Unified CCE and Unified CCX:

Step 1: Sign In to Experience Management using the Main account or Admin sub-account credentials.

Step 2: For agent CEA gadget, navigate to the Space called Agent Dashboard using the top navigation bar. For supervisors (teams), navigate to Space called Supervisor Dashboard. In case a custom Space has been created by you to use for CEA Gadget, navigate to that Space.

Step 3: On the left menu within this space, under go to Metric Groups and select Customer Experience Analytics from the menu. You can use any other custom metric group you have created in Experience Management for CEA Gadget.

Step 4: Within the Metric Groups section, click on menu ⁝ icon on the top right and select “Export To Cisco Contact Center” from the drop down menu.

Step 5: Copy the Code Snippet from the text box under the label CODE FOR CISCO FINESSE DESKTOP and keep it handy while adding the CEA gadget to UCCE or UCCX. Please make sure you copy the correct code snippet meant for Finesse Desktop (UCCE and UCCX).

Step 6: Click Done.



Add CEJ and CEA to Webex Contact Center, Unified CCE, or Unified CCX

Follow the steps listed below to add CEJ and CEA to Webex Contact Center, Unified CCE, or Unified CCX. Before you begin, please ensure the code snippet has been copied to your clipboard from Experience Management. For more information, see the section above.


Add Widgets to Webex Contact Center

Add CEJ and CEA widgets to Webex Contact Center

To add the CEJ and CEA widgets to Webex Contact Center, they need to the configured in the Desktop Layout JSON, after enabling WXM Configuration

The default Desktop Layout JSON can be accessed in the Layout Section within the Admin Portal. Once downloaded the JSON should be edited to include the Space ID and Metric ID retrieved by following the steps in the previous section above and then re-uploaded to the Layout Section.

Below is an example of the configuration JSON:

Example for adding CEJ:

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

Example for adding CEA:

  "page": {
    "id": "wxm-metrics",
    "widgets": {
      "comp1": {
        "comp": "agentx-wc-cloudcherry-widget",
        "attributes": {
          "metrics": true
        },
        "properties": {
          "userModel": "$STORE.app.userModel",
          "spaceId": "SPACE_ID_COME_HERE",
          "metricsId": "METRIC_ID_COME_HERE",
          "isDarkMode": "$STORE.app.darkMode",
          "agentId": "$STORE.agent.agentId"
        }
      }
    },
    "layout": {
      "areas": [
        [
          "comp1"
        ]
      ],
      "size": {
        "cols": [
          1
        ],
        "rows": [
          1
        ]
      }
    }
  }

CEA and CEJ widgets on the Webex CC Agent Desktop use CI to authenticate. For the widgets to function it is necessary to first link the WCC org to the Webex XM tenant.

PREREQUISITE:

Obtain the Organization ID which needs to be mapped to the Webex Experience Management tenant. The Organization ID can be found in your Control Hub, in the Account section under the Management menu.

contactcenter/ci01.png

Step 1: Sign In to Webex Experience Management dashboard using the credentials setup during the account handover. Please contact your Webex Contact Center provisioning admin for the account details if required.

Step 2: Navigate to the Account Preferences page by clicking on the User Profile icon on the top right of the screen.

Step 3: Scroll down the Account Preferences page and locate a tile titled “COMMON IDENTITY ACCESS FOR WEBEX CONTACT CENTER”.

Step 4: Enter the Organization ID and select the Experience Management sub-user account that should be used to pull data to be displayed in the CEJ and CEA widgets from the drop-down.

contactcenter/ci02.png

Once setup, Webex CC Agent Desktop widgets (CEA and CEJ) will be able to display feedback data from the Webex XM platform using CI authentication to access the data in Webex XM via the selected sub-user account at the time of configuring.

Add Gadgets to Unified CCE
Cisco Finesse Client requires a public network connection.

Add CEJ and CEA widgets to UCCE

Step 1 Sign in to the administration console on the primary Finesse server using the URL: https://FQDN of Finesse server:8445/cfadmin.

Step 2 Click Desktop Layout.

Step 3 Select from the following editors:

  • Text Editor
  • XML Editor

Step 4 Add the code snippet that is obtained from Experience Management.

  1. Customer Experience Journey: Add the exported code snippet within the gadgets tag in <id>home</id> tag. This gadget is displayed in the Home tab of Cisco Finesse.

Example:

<gadgets>
  <gadget>
    /3rdpartygadget/files/CXService/CiscoCXJourneyGadget.xml?gadgetHeight=600&spaceId=5dd51b054ba95e075808661e-accountname
  </gadget>
</gadgets>
  1. Customer Experience Analytics: Ensure to append the exported code snippet obtained from Experience Management with filter tag for the report to be agent-specific or team-based.
  • Agent Specific Reports: Add the exported code snippet from the Experience Management Space Agent Dashboard within the gadgets tag in <id>myStatistics</id> tag. For agents to view their own metrics based on customer feedback, add &filterTags=cc_AgentId in the code snippet. This gadget is displayed in the My Statistics tab of Cisco Finesse.

Example:

<gadgets>
  <gadget>
      /3rdpartygadget/files/CXService/CiscoCXAnalyticsGadget.xml?spaceId=5dd51b054ba95e075808661e-accountname&metricId=f004721lhxo94gon-accountname&filterTags=cc_AgentId
  </gadget>
</gadgets>
  • Team Based Reports for Supervisors: Add the exported code snippet from the Experience Management Space Supervisor Dashboard within the gadgets tag in <id>teamData</id> tag. For supervisors to view their team’s metrics based on customer feedback, add &filterTags=cc_TeamId in the code snippet. This gadget is displayed in the Team Data tab of Cisco Finesse.

Add the exported code snippet within the gadgets tag in the desktop layout. For supervisors to view metrics based on customer feedback, add &filterTags=cc_TeamId in the code snippet.

Example:

<gadgets>
    <gadget>
        /3rdpartygadget/files/CXService/CiscoCXAnalyticsGadget.xml?spaceId=5dd76d0d4ba95e0e6cecd552-accountname&metricId=4f3mih1j55ir792r-accountname&filterTags=cc_TeamId
    </gadget>
</gadgets>

Step 5 Click Save.

Add Gadgets to Unified CCX
Cisco Finesse Client requires a public network connection.

Add CEJ and CEA widgets to UCCX

Step 1 Sign in to the administration console on the primary UCCX server using the URL: https://FQDN of UCCX server:8445/cfadmin.

Step 2 Click Desktop Layout.

Step 3 Select from the following editors:

  • Text Editor
  • XML Editor

Step 4 Add the code snippet that is obtained from Experience Management.

  1. Customer Experience Journey: Add the exported code snippet within the gadgets tag in <id>home</id> tag. This gadget is displayed in the Home tab of Cisco Finesse.

Example:

 <gadgets>
        <gadget>
            /3rdpartygadget/files/CXService/CiscoCXJourneyGadget.xml?gadgetHeight=600&spaceId=5dd51b054ba95e075808661e-accountname
        </gadget>
</gadgets>
  1. Customer Experience Analytics: Ensure to append the exported code snippet obtained from Experience Management with filter tag for the report to be agent-specific or team-based.
  • Agent Specific Reports: Add the exported code snippet from the Experience Management Space Agent Dashboard within the gadgets tag in <id>myStatistics</id> tag. For agents to view metrics based on customer feedback, add &filterTags=cc_AgentId in the code snippet. This gadget is displayed in the My Statistics tab of Cisco Finesse.

Example:

<gadgets>
    <gadget>
        /3rdpartygadget/files/CXService/CiscoCXAnalyticsGadget.xml?spaceId=5dd51b054ba95e075808661e-accountname&metricId=f004721lhxo94gon-accountname&filterTags=cc_AgentId
    </gadget>
</gadgets>
  • Team Based Reports for Supervisors: Add the exported code snippet from the Experience Management Space Supervisor Dashboard within the gadgets tag in <id>manageTeam</id> tag. For supervisors to view metrics based on customer feedback, add &filterTags=cc_TeamId in the code snippet. This gadget is displayed in the Manage Team tab of Cisco Finesse.

Example:

<gadgets>
    <gadget>
        /3rdpartygadget/files/CXService/CiscoCXAnalyticsGadget.xml?spaceId=5dd76d0d4ba95e0e6cecd552-accountname&metricId=4f3mih1j55ir792r-accountname&filterTags=cc_TeamId
    </gadget>
</gadgets>

Step 5 Click Save.