Webex Generic Connector Deployment Guide

Purpose

This deployment guide provides detailed instructions for installing, configuring, and using the Webex Contact Center (Webex CC) Generic Connector, which can be used to integrate with multiple CRMs.

Intended Audience

This document is intended for customers who want to deploy a Webex CC Generic Connector.

Deployment Guide Structure

This deployment guide is divided into two main parts:

Configuring and Updating the Webex Contact Center Desktop Layout with headless widget
Deploying the Generic Webex Connector

Configuring and Updating the Webex Contact Center Desktop Layout

To ensure a seamless integration between Webex Contact Center and SAP Sales & Service Cloud CRM, follow these steps to configure and update the Webex Contact Center Desktop Layout:

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.
Click on Replace File to upload the JSON file SAP_CRM_WebExCC_DesktopLayout.json, then click Save.

SAP_CRM_WebExCC_DesktopLayout.json

JSON

{
  "version": "0.0.6",
  "appTitle": "",
  "logo": "",
  "dragDropEnabled": false,
  "notificationTimer": 8,
  "maximumNotificationCount": 3,
  "browserNotificationTimer": 8,
  "wxmConfigured": false,
  "desktopChatApp": {
    "webexConfigured": true
  },
  "area": {
    "headless": {
      "id": "dw-headless",
      "widgets": {
        "comp1": {
          "comp": "ef-widget",
          "script": "https://expertflow-webex.pages.dev/bundle.js",
          "attributes": {
            "darkmode": "$STORE.app.darkMode",
            "selectedTaskId": "$STORE.agentContact.selectedTaskId",
            "outdialEp": "$STORE.agent.outDialEp"
          }
        }
      },
      "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"
      }
    ]
  }
}

Assign this desktop layout file to the relevant teams as needed under User Management -> Teams.

Deploying the Generic Webex Connector

Before you begin, verify that on the server, you have:

Installed Kubernetes. If not, see Deployment Planning
Setup storage. If not yet, see Storage Solution - Getting Started

Pulling The Webex CC Generic Connector from Git

Create a directory with name as mkdir webex-generic-connector. or according to your ease.
Navigate to newly created directory by cd webex-generic-connector.
Pull the the code from the:

CODE

git clone --branch yaml-1.0.0 --depth 1 https://gitlab.expertflow.com/cti/webex-generic-connector

Run cd webex-generic-connector/kuberenetes to change directories . This is where all the YAML files are stored.

Setting Up Environment

We use Kubernetes for our server deployment, on which the static files for the connector will be served, and where the Genesys Generic Connector will be running.

Namespace

Create a namespace “expertflow” if it doesn’t exist.

CODE

kubectl create namespace expertflow

Configure Ingress.yaml

Webex CC Generic Connector should be accessible by a fully qualified domain name. Assign the FQDN.

Replace <FQDN> with your FQDN for Webex CC Generic Connector (e.g. projectsdemo.expertflow.com) and run this command.

CODE

sed -i 's/devops[0-9]*.ef.com/<FQDN>/g' webex-ingress.yaml

Create Self-Signed SSL/TLS Ingress Certificates (optional if already present)

Please modify the <FQDN> with your current FQDN before applying the following command.

Create IngressCerts directory (optional)
CODE
```
mkdir ingress-certs  
```
CODE
```
cd ingress-certs
```

set the Variable name to your FQDN (e.g. projectsdemo.expertflow.com).
The ${FQDN} variable in following commands will be replaced with the value you provided in this step
CODE
```
export FQDN=<enter FQDN here>
```

Now generate a secret with the following commands.

CODE

openssl req -x509 \ -newkey rsa:4096 \ -sha256 \ -days 3650 \ -nodes \ -keyout ${FQDN}.key \ -out ${FQDN}.crt \ -subj "/CN=${FQDN}" \ -addext "subjectAltName=DNS:www.${FQDN},DNS:${FQDN}"

Create a Kubernetes secret in your required namespace. In our case it’s expertflow

CODE

kubectl -n expertflow create secret tls hs-ef-ingress-tls-secret --key  ${FQDN}.key --cert ${FQDN}.crt

Configure webex-deployment.yaml

Open the webex-deployment.yaml file.
Replace the image with the updated build tag.

Updated build tag is

CODE

gitimages.expertflow.com/cti/webex-generic-connector:1.0.0

Applying Kubernetes YAMLs

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

Access Genesys URL

You can access the Genesys generic connector using below URL:

CODE

https://projectsdemo.expertflow.com/webex-cc/webex-wrapper.js