Interaction trigger into WxCC

This document provides instructions to trigger a customer interaction with Webex Contact Center (WxCC).

Overview

Webex Contact Center (WxCC) offers a comprehensive set of integration capabilities. Reading this document you will learn how to set WxCC Entry Points and Queues, Webex Engage and Connect Assets, and the need Live Chat Inbound Webex Connect Flow to trigger the interaction.

Prerequisites & Dependencies

• Webex Connect services must be up and running, you can visit this link to get more details
• Webex CC Task and Webex CC Engage nodes must be in an Authorized state, you can visit this link to get more details
• A basic understanding of Live Chat channel asset configuration for Webex Connect is neededhttps://github.com/wxsd-sales/video-for-wxcc

Setup

Create a Webex Connect Chat Asset

1. Log in to your WxConnent tenant
2. Navigate to the Menu Assets, Apps, click on Configure New App and choose Mobile / Web
3. Set a name of your choice, we will use 'my_chat_app' in this example
4. When you enable Live Chat / In-App Messaging, you can choose the Primary and Secondary Transport Protocol. Primary must be MQTT, and Secondary Web Socket.
5. Check the option Use Secured Port, and Save
6. When the application is saved, the buttons Register to Webex Engage and Configure Outbound Webhooks will be enabled. Click on Register to Webex Engage, select some of your existing Webex Connect services (if you do not have any you should create a new one), and click on the Register blue button. Please write down the Client Key value, you will need it later.
7. Go to back to Assets, Apps. You will see a list of Apps, write down the App ID for the one you just created

Webex Engage Asset setup

1. Log in Control Hub as Contact Center Admin, and under SERVICES go to Contact Center. On the right side panel, click on Webex Engage.
2. Navigate to New Digital Channels
3. Navigate to Assets -> Channels Assets, and click on the pen icon for the Asset with the same name you chose in the previous step (my_chat_app in this example)
4. Go to Websites, and add a new web site
5. Set the following mandatory values (these are examples):

• Display Name = Support
• First message = Hi there
• Domain = *.mydomain.com

Entry Points and Queues setup

Now we need to configure the system for sending the interaction to the right queue:

1. Log in Control Hub as Contact Center Admin, and under SERVICES go to Contact Center.
2. Navigate to the Menu Channels and click on Create Channel
3. Set the following values, and then Click on Save

• Name = Chat-EP (this is an example)
• Channel Type = Chat
• Asset Name = Select the WxConnect Asset Name you created in the previous step, 'my_chat_app' in this example
• Service Level Threshold = 120 (this is an example)
• And a Description of your choice and your preferred Timezone

4. Navigate to the Menu Queues and create a new Queue
5. Set the following values, and then Click on Save

• Name = Chat-queue (this is an example)
• Add a Description of your choice
• Queue Type = Inbound Queue
• Channel Type = Chat
• Queue Routing Type = Longest Available Agent (this is an example)
• Click on Create Group_ in the Contact Routing Settings. Choose the Team of agents that you want to answer these interactions
• Service Level Threshold and Maximum Time in Queue = 120 (this is an example)
• Maximum Time in Queue = 60 (this is an example)

Webex Connect Flow

1. Download the flow
2. Go to the Service you chose in the previous step and create a new flow
3. Set a name of your choice, 'my_chat_flow' in this example. As Method_, choose Upload a flow, and choose the flow file you downloaded
4. Select Create new Event and choose a Name for your Webhook (chat-webhook in this example)
5. Use this Sample Input, and click on Parse

   {"customerName": "",
   "customerEmail": "",
   "videoCallDestination": "",
   "inappmessaging.appId": "",
   "inappmessaging.userId": ""}
   

6. Save Your Flow Init configuration should look like this:

Follow the next steps before publishing the flow:

1. Edit some of the Custom Variables:

• secretKey = Use the Client Key Value created in the previous step
• liveChatDomain = The value you chose in the previous step (*.mydomain.com in this example)

3. Open the Receive Node and click on Save
4. Open the Queue Task Node, and select the queue you created in the previous step (Chat-queue in this example)
5. Open the Resolve Conversation Node, and change the Flow Id value. You can find this value in the WxConnect Services list:

6. If you want, you can also edit the Flow Init node Transaction Action Set Variable Action, for the variable resolveConversationMessage: this is the text shown in the WxCC Agent Desktop when the interaction is accepted.

Examples

1. Comprehensive demo with JDS integration

In this video you can see an example of what you can create. After the creation of the Webex Connect Flow, you should follow these additional steps:

1. Import this macro on the Cisco video device (A Desk Pro was used in this example). This macro will use as videoCallDestination the video device SIP URI.

2. Macro setup, change these values:

   • AGENT_CONNECT_URL = your Webex Connect Flow Webhook URL
   • AGENT_CONNECT_APPID= your Webex Connect Chat Asset App ID

3. Customer Data is read from WxCC JDS. A new customer interaction is also added to WxCC JDS. Contact me at [email protected] if you want to use our JDS orchestrator, or if you want to build a new one.

4. Add a WxCC Widget, by adding these lines in your WxCC Desktop Layout panel section:

{
          "comp": "md-tab",
          "attributes": { "slot": "tab", "class": "widget-pane-tab" },
          "children": [{ "comp": "span", "textContent": "Video Kiosk Support" }]
        },
        
        {
          "comp": "md-tab-panel",
          "attributes": {
            "slot": "panel",
            "class": "widget-pane"
          },
          "children": [
            {
              "comp": "video-cc-widget",
              "script": "https://wxsd-sales.github.io/video-cc-widget-lit/public/video-cc-widget.js",
              "wrapper": {
                "title": "Video Kiosk Support",
                "maximizeAreaName": "app-maximize-area"
              },
              "attributes": {
                "darkmode": "$STORE.app.darkMode"
              },
              "properties": {
                "accessToken": "$STORE.auth.accessToken",
                "outdialEp": "$STORE.agent.outDialEp",
                "ani": "$STORE.agentContact.taskSelected.ani",
                "callData": "$STORE.agentContact.taskSelected.callAssociatedData"
              }
            }
          ]
        },

2. Simplified demo

In this section we describe how to setup a simplified one-page version of the same demo, with no order check, just a button to speak with an expert. JDS integration is not included. Here you can see a video of the demo.

This is an example of a URL that you can use:

https://wxsd-sales.github.io/video-kiosk-for-wxcc-short/?logo=https://cdn.bfldr.com/ENSXS21L/at/w72fhrksf5n3xc4ntpx8kg/RGB_Webex_Logo_lockups_.ai?format=png&ipaddress=192.168.100.232&username=victor&password=cisco,123&connectappid=DA18093757&customername=John&[email protected]&background=https://assets2.brandfolder.io/bf-boulder-prod/xbqbmsxbcnx9kp43q7tbfxw/v/56763683/original/02_13_2021_SHOT_01-02-03_A_0664.jpg&lang=en

You have to configure a WebApp on your video device , or use it as your kiosk mode URL (Desk or Board device).

It is very easy to setup your own version of the demo, you only neeed to change the URL parameters:

• logo= URL to your own logo image
• background = URL to your own backgorund image
• username= User name with admin or integrator video device permissions
• password= Password for the admin or integrator user name
• ipaddress= IP address of the video device
• customername = The customer name that you want to show in the WxCC agent desktop
• customerEmail = If you are using JDS, this email address will be used to a new interaction into the customer journey
• connectURL = Webex Connect Webhook URL. This should be the Webhook URL for the flow created in the previous section
• appid = The Id of the Webex Connect Chat Asset created in the previous section
• language = you can choose 'en' for English, or 'es' for Spanish.

License

All contents are licensed under the MIT license. Please see license for details.

Disclaimer

This flow can be used only for demo purposes.

Everything included is for demo and Proof of Concept purposes only. Use of the site is solely at your own risk. This site may contain links to third-party content, which we do not warrant, endorse, or assume liability for. These demos are for Cisco Webex use cases, but are not Official Cisco Webex Branded demos.

Questions

Please, contact the WXSD team at [email protected] for questions. Or, if you're a Cisco internal employee, reach out to us on the Webex App via our bot ([email protected]). In the "Engagement Type" field, choose the "API/SDK Proof of Concept Integration Development" option to reach our team.