Skip to content

Lab 3. Webex Contact Center Google CCAI for Digital Channels

Objective

Today, customer preferences are constantly evolving, with a growing demand for more digital channels tailored to individual needs and convenience. Bearing this in mind, let's examine how Webex Contact Center delivers a superior and consistent customer experience. This applies not only to voice channels but also to digital channels by utilizing Dialogflow CX virtual agent capabilities.

(Read Only. Preconfigured.)Exercise 3.1 Environment Setup.

In this Lab, we will go through the tasks that are required to complete the general pre-configuration of a tenant. These tasks are to be undertaken by an administrator. By following each of the steps, you would have prepared your tenant to begin configuring Dialogflow CX for Digital Channel. Pre-requisites

  • You have received the access credentials with a full admin access.
  • You have received the access to the agent account.

Quick Links

Task 1. (Read Only). Node Authorization for Webex CC Task and Engage nodes.

Webex Connect is required to provide a valid access token for using various Webex Contact Center and Webex Engage APIs. All the Steps related to this Task are ready only.

  • The access token is generated using the authorization details configured within the ‘Node Runtime Authorization’ field that Webex Contact Center users are required to provide during flow configuration.
  • To integrate Dialogflow CX, Authorization is also required with GCP (Google Cloud Platform) which will be converted in the next Task.



  • Because this is a shared tenant, the nodes are already authorized. You don’t need to complete the following steps, just read it to understand how it would be.
  1. Access to Webex Connect: https://labtenant.us.webexconnect.io/ using your admin credentials.
  2. To authorize a pre-built integration,
    • Go to Assets > Integrations.
    • The integrations which are not yet authorized show the status as Pending Authorization.
    • In front of Webex CC Engage Click Actions → Manage.



  3. On the Manage Integrations page, scroll down to the Node Authorizations section. This section lists all the authorizations mapped to this integration.
  4. Click Action → Add Authorization associated with the authorization



  5. Enter the Authorization Name and click Authorize. In that example we use WebexCCAuth



  6. Click on the back button for being redirected back to Integrations page
    • Scroll down to Webex CC Task
    • Click Actions → Manage.



    • Scroll down to the Node Authorizations section. This section lists all the authorizations mapped to this integration.
    • Click Action → Add Authorization associated with the authorization where Auth Type is oauth2 and Status is Authorization Pending.



  7. Enter the Authorization Name (for example: WxCCAuth) and click Authorize.
    • As the result the pop-up appears where you need to enter your Cisco admin email address (wxcclabs+admin_IDX@gmail.com) and click Sign in.



  8. The status of the authorization will change to Authorized and all the nodes under this authorization are authorized and ready for use.



(Read Only. Preconfigured).Task 2. Node Authorization for Dialogflow CX.

Webex Connect is required to provide a valid access token for using Dialogflow CX APIs. Dialogflow CX Authorization needs to be completed for the integration. All the Steps related to this Task are ready only.

  1. In Webex Connect click on Integrations, find Dialogflow CX block and click on Manage.



  2. In the following window you will see the option to Add Authorization



  3. You will be presented with New Authorization required details, such as:
    • Authorization Name
    • Client ID
    • Client Secret



  4. You can get this information from Google Cloud Portal Console https://console.cloud.google.com/.
    • Login to GCP and select the project that is related to your Dialogflow CX Virtual Agent i.e. CL2024AMS
    • Please note that the user should have Owner Role assigned to be able to set up Oauth 2 authorization.



  5. 5. Navigate the API & Services: (As this is pre-configured and shared user do not have this permission, please refer the screenshot below for step 5 to 8)
    • Click on Credentials
    • Select Create OAuth Client ID Credentials.



  6. If this is the first time you are creating the credentials you will be presented with the option to Configure Consent Screen page. Click on it.



  7. Select that your application will be External and click on Create.



  8. Enter:
    • App name
    • User Support email
    • Developer Contact Information.
    You can use the same email ID which you used to login to the GCP portal.



  9. Complete the Consent Screen creation and go back to the Dashboard.



  10. Make the App to be in production.



  11. Click on credentials and create OAuth client ID credentials.



  12. Application type select as Web application.



  13. You will see OAuth client is created with Client ID and Client Secret.



  14. Enter the Client ID and Client Secret information to the Webex Connect New Authorization page.



  15. You will be redirected to Google login page where you need to provide the username and the password of the resource owner. The user should have owner role in GCP portal.



  16. Select all and click Continue to allow Webex Connect to access the Dialogflow CX services on Google Public Cloud.



  17. You can have Authorizations configured with multiple GCP projects or event GCP tenants.
    • To be able to select the correct Virtual Agent from the flow you need to make the Authorization that is related to you GPC project as Default.



  18. After the Authorization is configured, you can see the related Virtual Agents in Dialogflow CX block in the flow builder.



Exercise 3.2. Configuration of the Chat with Dialogflow CX Virtual Agent.

Objective

In this Lab, you will go through the tasks that are required to complete Live chat digital channel integration with Dialogflow CX Virtual Agent and the Real Agent.
You will be able to initiate a Chat contact to the Contact Center from a sample website, interact with Dialogflow CX Virtual Agent, initiate agent handoff to the Real Agent and pick up the interaction from the Agent Desktop. In this lab you will be configuring Service, Chat Assets, Channel, Queue, Chat Template, Website Settings, and corresponding workflows.

Pre-requisite You received an admin credentials to configure in Control Hub and Webex Connect.

Task 1. Service Creation in Webex Connect Portal

To attach your Entry Point to a digital channel, you must create a Service first. In this Service you will create your channel flows.

  1. From the Control Hub:



  2. Navigate to Services and click on Create New Service.
    • Provide the name using the schema CL_LTRCCT_3002_ID{YourID}_Service and click on Create.



Task 2. Live Chat Asset creation & register to Webex Engage

Assets play an integral role in configuring the digital channel, serving as the bridge between:

  • Webex Connect flows.
  • Webex Engage
  • Webex Contact Center Entry Points
  • Queues.

Through the Asset ID, the platform identifies how the chat should appear, which flow it should utilize, and to which Webex Contact Center Entry Point and queue it is bound.


  1. Navigate to Assets > Apps > Configure New App > Mobile / Web.



  2. Provide the name using the following format CL_LTRCCT3002_ID{YourID}_Asset.
    • Toggle/Enable Live Chat / In-AppMessaging to “ON”
    • Choose PRIMARY TRANSPORT PROTOCOL as MQTT
    • SECONDARY TRANSPORT PROTOCOL as Web Socket
    • Enable Use Secured Port
    • SAVE



  3. Select Register To Webex Engage
    • Choose the Service you have created previously and REGISTER.



    • Verify that the Register To Webex Engage option is now disabled and there is a message indicating the time when the asset was registered along with the service to which it is assigned.



  4. Click the back arrow next to go back to the list of Apps. Then copy of the App ID, we will need this later.



Task 3. (Read Only). Chat Template creation for website integration.

Chat template creation allows you to configure a pre-defined chat form that will be presented to the customer. Data points can be collected from the customer in a chat-like interface. We have a default template created names as CL_LTRCCT_3002_Template
(Please don’t do any changes with this template as it all users Webex Connect Flows.)
All the Steps related to this Task are ready only.
To create yourself you can following steps but not required for this lab.

  1. From Webex Connect interface, go to TOOLS > Templates then click on Add New Template



  2. Provide the name using the following format CL_LTRCCT_3002_{YourID}_Template
    • Choose Channel as Live Chat / In-APP Messaging.
    • Select Message Type as Form
    • Provide the Title as Welcome to Webex Contact Center Chat or some other message.



  3. Click on Add field
    • Select Name under Type and fill in rest of the details for Name. Make it as mandatory field.
    • Save



Task 4. Chat Channel and Queue creation

  • Go to https://admin.webex.com and select Contact Center service.





  • Then click on Channels and create new Channel.





  • Name the chat using the following format: 3002_ID{Your ID}_Chat_Channel.
    • Channel Type select as Chat
    • From the list select the Asset Name that you have created earlier.
    • Ender 300 as the Service Level Threshold and click on Create.





  • Create Queue in Control Hub.
    • Under Customer Experience,
    • Select Queues the click on Create Queue.





  • (Read Only). Two queue will be preconfigured for this lab with names:
    • 3002_Chat_TAC_Queue
    • 3002_Chat_Sales_Queue

    Below you can see the step on how to configure the queue for the Chat
    Select as Inbound Queue and the Channel Type as Chat.


    • Enter Service Level Threshold and Maximum Time in Queue.
    • Click on Create Group.
    • Search for your Team and select it from the list.
    • Then save the group and Save the Queue.




    • Task 5. Configure Website Settings.

    1. Navigate to Control Hub
      • Go to Contact Center
      • Click on the Webex Engage hyperlink under “Quick Links”.
      • You might need to enter the Admin login credentials. The same credentials that you use to login to Control Hub.



    2. Go to Assets > search and edit the chat asset which we created earlier.
      • Click on Pencil icon next to your asset.



    3. On the top of the page select Websites and then click Add Website.



    4. Enter the respective fields as per Screenshots below and click Save changes.
      We are going to insert the chat bubble into an online HTML editor for testing at Glitch.me. The Domain field should contain the domain where you will insert the chat bubble, in this case it should be *.glitch.me
      • Add Display name “Webex Contact Center Chat”
      • Byline Text: “Happy to help”
      • First message: “Hi there”
      • Message: "This is a test"
      • Domain: *.glitch.me
      • Domain: Scroll down and SAVE Changies



    5. Scroll up, select the Appearance tab and change the settings (Widget Color, Logo, Emojis, Allow attachments etc.)
      If you want to add the logo, you can download the it from the following link, you don’t need to login to download it. https://cisco.box.com/s/gcpv3dctd9dhz51x58wp6gr84nknwkm0



      • Then click on SAVE CHANGES
    6. Select the Widget Visibility tab and click on Show without restriction and SAVE CHANGES



    Task 6. Verify that live chat widget loads

    1. We need to implement our chat to a website. For this lab we will be using http://Glitch.com to create a test website and integrate our chat in there. Using your Gmail credentials login to https://glitch.com/



    2. Click on New project and select glitch-hello-website.
      • The new website will be created, and we will use it later to add our chat information.



      • Note your website information.



    3. Go back to Webex Engage portal.
      • Click on Assets find the Asset that is related to you ID.
      • Click on edit it and then on Installation tab.
      • Copy the HTML code for your chat.



    4. Open up Glitch website settings
      • Click on index.html page
      • Scroll down until you see </body> and paste the HTML code of your chat before </body> tag



    5. On Glitch portal at the bottom bar click on Preview
      • You should see the test website and your chat is loaded on the right bottom section.



    Task 7. Upload and configure Live Chat with Dialogflow CX flow.

    1. Download the flow using the link below.
      https://cisco.box.com/s/u6e76z3llxy4ijvka27vduby13moiwtu
    2. Open Webex Connect portal
      • Go to Services.
      • Select your Service and click on Flows.
      • Select to create new flow and name is as ChatDialogflowCX.
      • Chose Method - Upload a flow.
      • Then find the flow which you downloaded in the previous step and select it.
      • Finally click on Create.



    3. Once the flow is created you will see Configure Mobile & Web App Event window. Here click on Save to go to the flow.



    4. Update the flow with the APPID of your Asset which you must have saved in a notepad earlier or you can find it in the Webex Connect Portal Assets>Apps.
      • Go back to the flow
      • Open up Settings by clicking gear icon on the top
      • Click on Custom Variables.
      • Paste the appid you just copied next to appID Variable
      • Save the change.



    5. Set FlowID in Resolve Conversation node.
      • Go to Resolve Conversation node and fill in Flow Id field with flowId value copied from the address bar of web browser tab.
      • Save the change.



    6. Configure Dialogflow CX block.
      • Open up Dialogflow CX settings and select you Virtual Agent (Look for your ID) from the list. Save the change.



      • If you don’t see you Virtual Agent in the list, please cycle the project by selecting some other project and select back CL2024AMS and it should be updated.



    7. Open the first Receive node
      • Select the Form Template “CL_LTRCCT_3002_Template” and save it.



    8. Open up second Receive node and save it as well.



    9. Click on Make Live on top right corner -> Select the Application/Asset that we have created and click Make Live.



    10. Wait until the flow is Live.



    11. Open up Glitch website.
      • Find the project you created earlier and preview the website in a New Window.





    Task 8. Test and understand the flow of the Agent Handoff.

    1. Start the chat.
      • Provide your name and the phone number that is related to your account.
      • Ask to talk to and agent and then type Sales or Technical Support.
      • Your agent is configured for both of these queues.



    2. Login as the agent and become available. You should receive chat on the Agent Desktop.



    3. Understand how the Webex Connect flow is configured for the Agent Handoff.
      • Open Dialogflow CX block in your Webex Connect flow.
      • Under Output Variables this block you can see variable with name intentDisplayName.
      • Once an intent is meet in the dialogflow it will be stored in this variable.



    4. Close Dialogflow CX block and open the next to it Branch Block.
      • You can see there are two branches configured.
      • If the intent is Technical_Support then the interaction will got out of the Branch1.
      • If the intent is Sales, the interaction will go out of the Branch2.





    5. Understand who how request from the user goes to Dialogflow CX.
      • Open up Branch block one more time. You will see option “None of the above”



      • If the intent doesn’t configure to go to any specific branch it will come out from this None of the above branch and will stay in the loop with Dialogflow for continues conversation.



    6. Start new chat and ask some general questions.
      • You will see conversation stays within Dialogflow.



    Task 9. Test and understand the Balance Look up flow.

    On this diagram you can see the high-level overview on the data flow from Chat window to the data source and back.



    1. Open up your Webex Connect portal. Under the Tools section open Templates.



    2. Open CL_LTRCCT_3002_Template



    3. 3(Read Only). This template is configured to request Name and Phone number before you start the chat. (Please don’t do any changes with this template as it all users Webex Connect Flows.)



    4. (Read Only). Go to your Webex Connect Flow and click on the gear on the right top corner.
      • Select Customer Variables, scroll down and you will see that custom variable with name PhoneNumber was created and the default value is null.



    5. (Read Only). Open up the first Receive node. You can see that this node is configured with the template CL_LTRCCT_3002_Template that you have reviewed earlier.



    6. (Read Only). While in the Receive block click on Transition Actions on the top.
      • You can see that the custom Variable PhoneNumber is configured to assign the value from the chat template PhoneNumber field.



    7. (Read Only). Go Back to the flow
      • Click on Dialogflow CX block, there is Query Parameter JSON Object configured to create session variable on the Dialogflow CX side and assign it the value that is collected from the template.
        {"parameters": {"PhoneNumber":"$(PhoneNumber)"}}



    8. As it was configured in the Lab 2 with Telephony Channel.
      • This session parameter variable is used as the parameter for the API call to the data source to retrieve the balance information for the specific account.



    9. Open up chat, in the template provide the number which is related to your user account and request to know the balance.



    Congratulations! You completed the lab.

    Known Problem

    TAC is actively working with BU team on addressing an issue where the Entry Fulfillment message is not printing on the Chat Bubble from the next page after the Transition.

    For you to understand better the problem, if you request Balance and receive a response you don't see Entry Fulfillment from the Any More Questions? page. For this lab setup, it is supposed to print "Do you have any more questions?" message.





    However, the interaction is actually moved to the next page and to ask more questions you need to respond "Yes" to continue the conversation.





    You have successfully completed all the tasks of the lab, congratulations!

    If you were not able to complete any of the exercises in time or if you want to use your student user to further explore, access to the tenant with your student user will be available until June 15th.

    Lastly, please remember to fill out the session survey!