Deployment Guide

Purpose

This deployment guide provides detailed instructions for installing, configuring, and using the Webex Contact Center connector within ZOHO CRM. It is designed to ensure a smooth integration process, enabling users to effectively utilize the connector within their ZOHO environment.

Intended Audience

This document is intended for customers who want to deploy a Webex Contact Center connector within ZOHO CRM.

Prerequisites

You must have Webex Contact Center set up and configured before integrating with Zoho CRM.
A Zoho CRM account is required. You can access Zoho CRM here.

Install Expertflow Extension

Follow these steps to install the Webex Contact Center Connector in Zoho CRM from the Zoho Marketplace:

Step 1: Access Zoho Marketplace

Log in to your Zoho CRM account.
Click on the Marketplace icon or navigate to Setup > Marketplace > All.
Open the extension URL.

Step 2: Install the Extension

Click the Install button.
A prompt will appear requesting permissions; click Accept All Permissions to proceed.
Choose the installation scope:
- Install for Admins Only
- Install for All Users (Recommended)
- Choose Profiles (If you want to limit access to specific user roles)
Click Confirm to start the installation.

Step 3: Complete Installation

The extension will be installed automatically, and you will receive a confirmation once it is complete.
Navigate to Zoho CRM > Settings > Extensions to verify the installation.

Step 4: Change Base URL for an Installed Extension in Zoho CRM (if needed)

Click on the Marketplace > Installed Extensions.
Locate Zoho Connector for Webex and click on it.
Look for the Widget Configuration.
Update Base URL of Webex CC with the new URL e.g.
US Agent Desktop: https://desktop.wxcc-us1.cisco.com
UK Agent Desktop: https://desktop.wxcc-eu1.cisco.com
EMEA Agent Desktop: https://desktop.wxcc-eu2.cisco.com
ANZ Agent Desktop: https://desktop.wxcc-anz1.cisco.com
Click Save and refresh Zoho CRM to apply the changes.

Configuring and Updating the Webex Contact Center Desktop Layout

To ensure a seamless integration between Webex Contact Center and Zoho CRM, follow these steps to configure and update the Webex Contact Center Desktop Layout:

Step 1: Access Webex Control Hub

if you are using partner account then first you need to launch the organization.

Log in to Webex Control Hub as an administrator.
Navigate to Services > Contact Center.
Under Desktop Experience, select Desktop Layouts to access the configuration options.

Step 2: Create Desktop Layout File

Navigate to Services > Contact Center.
Under Desktop Experience, select Desktop Layouts to access the configuration options.
Create a new Desktop Layout, update the following parameters and upload the attached file as JSON File.

If you are using a custom layout, you can just copy the widgets JSON object from the following Desktop Layout JSON File and paste in your Layout file

ZOHO_CRM_WebExCC_DesktopLayout.json

JSON

{
    "version": "0.0.6",
    "appTitle": "Webex Contact Center Desktop",
    "logo": "",
    "dragDropEnabled": false,
    "notificationTimer": 8,
    "maximumNotificationCount": 3,
    "browserNotificationTimer": 8,
    "wxmConfigured": false,
    "area": {
      "header": {
        "id": "dw-header",
        "widgets": {
          "comp1": {
            "comp": "agentx-custom-desktop1",
             "script":"https://<fqdn>/zoho-webex/dist/EfCustomWebComponentBundle.js",
              "attributes": {
              "widgetName":"Crm_integration_by_EF",
              "widgetProvider":"Expertflow",
              "outDialAni":"<outDialAni>",
              "teamId": "$STORE.agent.teamName",
              "agentName":"$STORE.agent.agentName",
              "selectedTaskDetail":"$STORE.agentContact.taskSelected",
              "agentId":"$STORE.agent.agentId",
              "selectedTask":"$STORE.agentContact.selectedTaskId",
              "organizationID":"<organizationID>",
              "entryPointId":"<entryPointId>",
              "crmDefaultEntityName" : "Accounts",
              "crmEntityNames":"Contacts|Accounts|Leads",
              "noMatchEntity":"contacts"
              }
          }
        },
        "layout": {
          "areas": [["comp1"]],
          "size": { "cols": [1], "rows": [1] }
        }
      },
      "panel": {
        "comp": "md-tabs",
        "attributes": { "class": "widget-tabs" },
        "children": [
          {
            "comp": "md-tab",
            "attributes": { "slot": "tab", "class": "widget-pane-tab" },
            "children": [
              { "comp": "slot", "attributes": { "name": "IVR_TRANSCRIPT_TAB" } }
            ],
            "visibility": "IVR_TRANSCRIPT"
          },
          {
            "comp": "md-tab-panel",
            "attributes": { "slot": "panel", "class": "widget-pane" },
            "children": [
              { "comp": "slot", "attributes": { "name": "IVR_TRANSCRIPT" } }
            ],
            "visibility": "IVR_TRANSCRIPT"
          },
          {
            "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"
                }
              }
            ],
            "visibility": "WXM_JOURNEY"
          },
          {
            "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"
          }
        ]
      },
      "navigation": [
        {
          "nav": {
            "label": "Customer Experience Analytics",
            "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",
                  "isDarkMode": "$STORE.app.darkMode"
                }
              }
            },
            "layout": {
              "areas": [["comp1"]],
              "size": {
                "cols": [1],
                "rows": [1]
              }
            }
          },
          "visibility": "WXM_METRICS"
        }
      ]
    }
  }

Important parameters to set in Desktop Layout

Following are the parameters you need to define in Desktop Layout JSON File as per your configurations.

#	Layout Properties	Description
1	`outDialAni`	OutDialANI is the phone number configured in Webex Control Hub that shows as the caller ID when your contact center makes an outbound. You can navigate to it as follows: Contact Center -> OutDialAni
2	`crmEntityNames`	Contacts\|Accounts\|Leads define the search priority.
3	`noMatchEntity`	Contacts\|Accounts\|Leads defines which entity should be created when no matching record is found
4	`entryPointId`	Represents the unique identifier in Webex Control Hub it tells Webex which outbound calling route or flow to use when placing calls from the contact center. You can navigate to it as follows: Contact Center -> Channels - > Entry point ID (for Outbound Telephony)
5	`script`	URL of Expertflow connector, please get in touch with us to get the deployed connector URL.

Step 3: Upload the Updated Layout File

Return to Webex Control Hub > Desktop Layout.
Click Upload Layout and select the modified JSON file.
Click Save and ensure no errors appear.

Step 5: Apply Changes and Test

Assign the updated layout to agents or teams as required.
Log in to Webex Contact Center Agent Desktop and verify the Zoho CRM integration.
Perform test calls to ensure:
- The Zoho CRM panel loads correctly.
- Customer information syncs in real time.
- Call controls work as expected.

Troubleshooting Tips

If the layout does not update, clear the browser cache and refresh the Webex Contact Center interface.
Verify that Webex Contact Center credentials are correct.
Ensure the layout JSON follows the Webex Contact Center Desktop Layout Schema.

After completing these steps, your Webex Contact Center Agent Desktop will be properly configured to work with Zoho CRM.