Skip to main content

Cloverhound Cloud Widget Integration

Introduction​

To ensure widgets function properly with Webex Contact Center, you must configure them in the desktop layout. Webex Contact Center Desktop uses a JSON file for layout configuration.

Prerequisites​

Before setting up the widget, ensure you have:

  1. A configured Webex Contact Center (WxCC) instance

In the Cloverhound Cloud Admin module, you'll need to:

  1. Configure your WxCC OAuth token (found under 'Settings' > 'Webex' tab)

  2. Generate an API Key for widget authentication

tip

Learn how to create API Keys here

  1. Create at least one preview campaign
tip

Learn how to create a preview campaign here

Widget Configuration Steps​

Follow these steps to integrate the Cloverhound Cloud widget with Webex Contact Center Desktop:

  1. Sign in to Webex Control Hub

  2. Navigate to Contact Center:

    • Find the Services section in the left sidebar
    • Select "Contact Center" or "Contact Centre"

Contact Center Settings

  1. Access Teams:
    • Look for User Management in the left sidebar
    • Select "Teams"
error calling records

  1. Check your team's Desktop Layout setting:

    • Open the team settings
    • Note the current Desktop Layout value

  2. Configure Desktop Layout:

    • Find Desktop Experience in the left sidebar
    • Select "Desktop Layouts"
error calling records

  1. Open your team's Desktop Layout:

    • Note which other teams share this layout

  2. Download the layout file:

    • Either use 'Download default desktop layout' or
    • Download the current JSON file using the download button

  3. Modify the JSON file to include the Cloverhound Cloud widget

tip

See the desktop layout configuration section below

  1. Create or update the Desktop Layout in Webex Control Hub with:

    • Name (required)
    • Description
    • Team assignments
    • Modified JSON file

  2. Upload your modified layout file

  3. Save your changes

Edit Desktop Layout File​

The header widget can be placed in two locations:

  • Left side (next to the logo and title) as a "header" widget
  • Right side (next to other header widgets) as an "advancedHeader" widget

For detailed information about the desktop layout JSON format, consult the official Webex documentation.

Cloverhound Cloud Widget Configuration​

Add the following JSON to either the advancedHeader or header section under roles:

{
  "comp": "md-tooltip",
  "attributes": {
    "message": "Cloverhound Cloud Widget"
  },
  "children": [
    {
      "script": "https://cloud.cloverhound.com/assets/wxcc_preview_widget.js?noCache=1",
      "comp": "wxcc-cloverhound-widget",
      "properties": {
        "cloudURL": "https://cloud.cloverhound.com",
        "organizationID": "<ORG_ID>",
        "apiKeyID": "<API_Key_ID>",
        "apiKeySecret": "<API_Key_Secret>",
        "previewTimeSeconds": "300",
        "agentName": "$STORE.agent.agentName",
        "isCallInProgress": "$STORE.agentContact.isActiveCall",
        "locationType": "<advancedHeader or header>",
        "darkmode": "$STORE.app.darkMode",
        "accessToken": "$STORE.auth.accessToken",
        "outdialEp": "$STORE.agent.outDialEp",
        "outdialAniList": "$STORE.agent.outdialAniList",
        "teamId": "$STORE.agent.teamId",
        "agentId": "$STORE.agent.agentId",
        "wrapUpData": "$STORE.agent.wrapUpData",
        "allowSkipRecord": "<true or false>",
        "saveCallbacksAsPersonal": "<true or false>",
        "includesUnassignedRecords": "<true or false>"
      }
    }
  ]
}

Replace these values:

  • <ORG_ID>: Your Cloverhound Cloud organization ID (found in the URL when logged in)
  • <API_Key_ID>: Your API Key ID from Cloverhound Cloud
  • <API_Key_Secret>: Your API Key Secret from Cloverhound Cloud

The widget uses $STORE variables to communicate with Webex Contact Center Desktop.

General key configuration notes:

  • locationType: Its value must correspond to either "header" or "advancedHeader," with the default value being "advancedHeader". It must match the widget's placement ("header" or "advancedHeader").

Key configuration notes for Preview campaigns:

  • previewTimeSeconds: Time allowed for agents to skip or call a customer record
  • allowSkipRecord: If this feature is enabled, the widget permits the agent to skip a record. Otherwise, if this option is not activated, the widget will not provide the ability to skip.
  • includesUnassignedRecords: If this is enabled, the widget retrieves unassigned and personal callback records. If this option is not activated, the widget will display only the personal callback records.
  • saveCallbacksAsPersonal: If this is enabled, the widget will automatically assign the contact callback to the current agent, and the option to save will not be visible to them in the widget. On the other hand, if this feature is disabled, the agent will have the ability to save the callback either as a personal callback or as a general/unassigned callback.

Example: Header Placement​

    "area": {
      ...
      "header": {
          "id": "dw-header",
          "widgets": {
              "head1": {
                "comp": "md-tooltip",
                "attributes": {
                    "message": "Cloverhound Cloud Widget"
                },
                "children": [
                    {
                        "script": "https://cloud.cloverhound.com/assets/wxcc_preview_widget.js?noCache=1",
                        "comp": "wxcc-cloverhound-widget",
                        "properties": {
                            ...
                            "locationType": "header",
                            ...
                        }
                    }
                ]
            }
          },
          "layout": {
              "areas": [["head1"]],
              "size": {
                "cols": [1],
                "rows": [1]
              }
            }
        }
    }

Example: Advanced Header Placement​

  "agent": {
    "area": {
      "advancedHeader": [
        {
          "comp": "md-tooltip",
          "attributes": {
            "message": "Cloverhound Cloud Widget"
          },
          "children": [
            {
                "script": "https://cloud.cloverhound.com/assets/wxcc_preview_widget.js?noCache=1",
                "comp": "wxcc-cloverhound-widget",
                "properties": {
                    ...
                    "locationType": "advancedHeader",
                    ...
                }
            }
          ]
        },
      ],
    }
  }

Next Steps​

After updating the desktop layout, test the configuration by logging into Webex Contact Center Desktop as an agent assigned to the modified team layout.

Important Notes​

  • Verify your API Key ID and Secret before beginning
  • Double-check your Organization ID in the Resource Domain URL
  • Contact Cloverhound Cloud support if you need assistance