Deployment Guide

Purpose

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

Intended Audience

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

Prerequisites

You must have Webex Contact Center set up and configured.
A SuiteCRM account is required.

Install Expertflow Webex Package

Follow these steps to install the Webex Contact Center Connector in SuiteCRM:

Make sure Node.js is installed on the machine where SuiteCRM is hosted.
Download the ZIP package from this URL.
Log in to your SuiteCRM account as an administrator.
Hover over the user icon in the top right corner and select Admin.
In the Admin Tools section, select Module Loader.
Uninstall the extension if it already exists (may take some time).
Click Choose File and select the zip file and click Upload.
Click Install then Commit and wait for the process to complete (may take some time, depending on your machine).

Keep the site open and wait for the popup confirming 100% completion. Then click Home and refresh the page.

After installation, make sure to select the correct Webex Region in the configuration before logging in.

Uninstall Expertflow Webex Package

Follow these steps to uninstall the Webex Contact Center Connector from SuiteCRM:

Make sure Node.js is installed on the machine where SuiteCRM is hosted.
Log in to your SuiteCRM account as an administrator.
Hover over the user icon in the top right corner and select Admin.
In the Admin Tools section, select Module Loader.
Click Uninstall then Commit and wait for the process to complete (may take some time, depending on your machine).

Keep the site open and wait for the popup confirming 100% completion. Then click Home and refresh the page.

Configuring and Updating the Webex Contact Center Desktop Layout

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

Step 1: Access Admin

Log in to Webex Control Hub as an administrator.
From the left-side menu, click Launch My Organization if it appears.
From the left-side menu, select Contact Center.
From the left-side menu, select Desktop Layouts.
You can open Global Layout to use it, or click Create Desktop Layout to make a new one.
Click on Replace File to upload the JSON file SuiteCRM_Webex_DesktopLayout.json, then click Save.

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

Step 2: Apply Changes

Return to Webex Control Hub.
From the left-side menu, select Teams and choose your team.
Under Desktop Layout option, ensure it is assigned to the updated one (which contains the SuiteCRM_Webex_DesktopLayout).

Step 3: Test Webex

Log in to your SuiteCRM account and show the Webex widget.
Log in to your Webex Agent Desktop inside the widget.
Perform test calls to ensure:
- Customer information loads correctly
- 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.

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