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.

Pulling The Zoho Webex Connector Repo

The application code, along with the Kubernetes configuration files, is maintained in the Zoho-Webex-connector repository on the tag 1.0.0

Deployment Steps:

Create a Directory: Create a new directory named zoho-webex-connector, or use a name of your choice for ease of access.
Navigate to the Directory: Move into the newly created directory.

Clone the Tag: Pull the code from the repository using the following command:

CODE

git clone --branch 1.0.0 https://gitlab.expertflow.com/cti/zoho-connector-for-webex.git

You must have access to above git repository. You must have git username and password. In case of 2FA you must have personal access token.

Navigate to zoho-connector-for-webex directory.
CODE
```
cd zoho-connector-for-webex
```
Navigate to the Kubernetes Directory: Change to the Kubernetes directory, where all the YAML configuration files are stored:
CODE
```
cd Kubernetes
```

Setting Up the Environment for Webex Contact Center Connector For Zoho

Configure `zohoWebex-ingress.yaml`

To ensure proper accessibility, the Webex Connector should be accessible via a Fully Qualified Domain Name (FQDN). Follow the steps below to configure it:

Assign an FQDN – Determine and assign the FQDN for your Webex Connector (e.g., projectsdemo.expertflow.com).
Open the zohoWebex-ingress.yaml file.
Update Host Values – Replace the existing hosts and host values with your assigned FQDN to ensure proper routing and accessibility.

zohoWebex-ingress.yaml

CODE

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: zoho-connector-for-webex
  namespace: expertflow
  annotations:
    nginx.ingress.kubernetes.io/backend-protocol: "HTTPS"
    nginx.ingress.kubernetes.io/configuration-snippet: 'more_set_headers "Access-Control-Allow-Origin: $http_origin";'
    nginx.ingress.kubernetes.io/cors-allow-credentials: "true"
    nginx.ingress.kubernetes.io/cors-allow-methods: "PUT, GET, POST, OPTIONS, DELETE, PATCH"
    nginx.ingress.kubernetes.io/enable-cors: "true"
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
spec:
  ingressClassName: nginx
  tls:
    - hosts:
        - projectsdemo.expertflow.com
      secretName: ef-ingress-tls-secret
  rules:
    - host: projectsdemo.expertflow.com
      http:
        paths:
          - path: /zoho-webex(/|$)(.*)
            pathType: ImplementationSpecific
            backend:
              service:
                name: zoho-connector-for-webex-svc
                port:
                  number: 8082

Configure `zohoWebex-deployment.yaml`

Open the zohoWebex-deployment.yaml file.
Replace the image with the updated build tag.
Updated build tag is:1.0.0

zohoWebex-deployment.yaml

CODE

apiVersion: apps/v1
kind: Deployment
metadata:
  name: zoho-connector-for-webex
  namespace: expertflow
  labels:
    ef.service: zoho-connector-for-webex
    ef: expertflow
spec:
  replicas: 1
  selector:
    matchLabels:
      ef.service: zoho-connector-for-webex
  template:
    metadata:
      labels:
        ef.service: zoho-connector-for-webex
        ef: expertflow
    spec:
      imagePullSecrets:
        - name: expertflow-reg-cred
      containers:
        - name: zoho-connector-for-webex
          image:  gitimages.expertflow.com/cti/zoho-connector-for-webex:1.0.0
          ports:
            - containerPort: 8082
              name: http-port1
          imagePullPolicy: IfNotPresent
      volumes:
        - name: dist-volume
          emptyDir: {}

      restartPolicy: Always

Applying Kubernetes YAMLs

Apply the service with kubectl apply -f zohoWebex-service.yaml
Apply the image-pull secret with kubectl apply -f zohoWebex-imagePullSecret-expertflow.yaml
Apply the Ingress with kubectl apply -f zohoWebex-ingress.yaml. (For RKE2-based Ingresses using Ingress-Nginx Controller)
Apply the deployment with kubectl apply -f zohoWebex-deployment.yaml

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.
In the search bar, type Webex Contact Center Connector and press Enter or can access directly by using extension URL.
Select the connector from the search results.

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: Replace Desktop Layout File

#	Layout Properties	Description
1	`outDialAni`	This property allows you to override the Outdial ANI specified, for click to dial
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 designated Entry Point used for initiating outbound calls
5	`script`	holds the URL of a JavaScript file that needs to be dynamically loaded for the corresponding widget/component.

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"
        }
      ]
    }
  }

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.

Purpose

Intended Audience

Prerequisites

Pulling The Zoho Webex Connector Repo

Setting Up the Environment for Webex Contact Center Connector For Zoho

Configure zohoWebex-ingress.yaml

Configure zohoWebex-deployment.yaml

Applying Kubernetes YAMLs

Install Expertflow Extension

Configuring and Updating the Webex Contact Center Desktop Layout

Step 2: Replace Desktop Layout File

Step 3: Upload the Updated Layout File

Troubleshooting Tips

Configure `zohoWebex-ingress.yaml`

Configure `zohoWebex-deployment.yaml`