*For more demos & PoCs like this, check out our Collab Toolbox.
All contents are licensed under the MIT license. Please see license for details.
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 usecases, but are not Official Cisco Webex Branded demos.
Please contact the CCEP team at ccep@cisco.com for questions.
Click to open the video!
Reduce Agent & Supervisor Effort
Increase Customer Satisfaction Levels
Create Data To Drive Outbound Campaigns
Install & Configure Postman Collection
| Change Title | Date | Details |
|---|---|---|
| Abstract OAuth Flow | 2/16/24 | Abstracted OAuth token function into its own subflow, called from parent flows. Much simpler OAuth configuration across multiple flows. |
This document outlines the solution for a payment collection flow within Webex. Some customers currently use an outbound dialler to make outbound calls to clients and make payment demands. The efficiency of these solutions can be improved due to low call answer rates by the consumer who needs to pay, and high effort requirements for the Agents and Supervisors to set up and execute the campaigns.
This solution has three aims:
- Reduce Agent & Supervisor effort by completely, or partially automating some of the collections.
- Increase customer satisfaction levels by offering the ability to pay at a convenient time for them.
- Create data about which customers have not paid to drive later outbound calling campaigns for agents to execute.
- Inject information into the JDS history stream to assist agents in better handling customer interactions.
The flow is described in the below flow chart:
This is achieved by kicking off a Webex Connect flow which can be invoked by a webhook. This flow will request payment from the customer by SMS, giving them the opportunity to pay with no interaction from any agent.
Many people today do not answer calls from numbers they do not recognise. When they do answer, it may not be a good time for them to complete a payment. Being asked to complete a payment while on the phone to an agent at a bad time can greatly increase stress levels in what may already a stressful situation for the consumer. Ignoring those calls and later receiving final demands elevates stress even further.
Using SMS to drive payments allows people to pay when it is convenient for them. They are made aware of the demand in a non time-sensitive manner and can choose to pay at a more convenient time. This lowers consumer stress levels.
If the consumer chooses not to pay at this time, the flow will add them to a list with the relevant details. This can subsequently be used to drive an outbound calling campaign, or to kick off several other processes depending on the tools in use by the customer. Many integrations can be created to adjust this behaviour, but creating a list is a good way to show the customer the concept. The Acqueon outbound dialler solution has an API that we could use to directly build campaigns from this flow.
These flows also utilise the injection of JDS events into the history stream for a given user. This results in the agent being able to see payment demands being sent to a user, what their responses were, and any payments that have been made directly within the agent desktop. This could decrease average handle times and increase satisfaction for the consumer, giving them the sense that the contact centre agent really knows all about them.
The following pre-requisites should be in place before attempting configuration:
- An SMS asset in your Webex connect tenant capable of sending and receiving messages. Details on Customer Engagement Portal
- Postman set up to initiate the flow.
- Understanding of OAuth for Webex API executions.
- Mockapi.io account set up to be later configured to receive contacts for the subsequent outbound calling campaign.
- JDS Enabled WxCC Tenant (US Available, EU Roadmap mid 2024).
- JDS capable WxCC Agent Desktop Layout that supports inbound/outbound calling.
- glitch.com account.
This solution requires a few variables to be populated across different systems. The table below can be used to store this info. This guide is available for download in the Github repository in word format so you can edit it. Note the names of the variable may deviate slightly across systems, so multiple names are included to assist identification. DO NOT SHARE ANY OF THE FOLLOWING INFORMATION WITH ANYONE, ENSURE IT IS STORED SECURELY.
| Variable Name(s) | Variable Value | Relevant Section |
|---|---|---|
| Client ID Client_id.JDS | From Create Oauth Section | |
| Client Secret Client_sectet.JDS | From Create Oauth Section | |
| OAuth Auth URL OauthURL | From Create Oauth Section | |
| Redirect URI | From Create Oauth Section | |
| Project ID Workspaceid JDSProjectID <<PROJECTID>> | From Install Postman Section From Desktop Layout | |
| Org ID Orgid.JDS <<ORGID>> | From Install Postman Section From Desktop Layout | |
| MockAPIID | From MockAPI Section | |
| PaymentDue Webhook URL | From Due Flow Configuration | |
| GlitchLink | From Due Flow Configuration | |
| Webhook.site URL ReqCatcherURL | From Due Flow Configuration | |
| PaymentConfirmed Webhook URL | From Confirmed Flow Configuration | |
| QuickSMS Webhook URL | From QuickSMS Configuration |
An OAuth token is required to perform API operations for JDS event injection and other functionalities.
Important Note: This demo relies upon having a token store set up, as OAuth tokens created may only last for a few hours. Using a token store will eliminate the need to manually populate a new OAuth token in each flow every 12 hours, but requires set up of its own. Set up a token store using the tutorial video to automatically manage the tokens from flows. If you choose not to use a token store, the appropriate changes to manually populate tokens will be listed where relevant.
- Go to https://developer.webex-cx.com/ and log in using an administrator account.
- Click “My Webex Apps” from the sub menu in the top right, then select “Create a new app”.
- Configure your integration as follows.**
**
| Field | Value |
|---|---|
| Integration Name | PaymentDemand |
| Description | Integration to support SMS payment demand from Connect |
| Redirect URI | https://admin.webex.com/ |
| Scopes | Select All |
- You will be presented with a screen of information. Go to the required information table and fill out the relevant fields with the info displayed on the screen.
The postman collection has several functionalities. Download it from the Git Repo. This collection uses JDS API samples by Arunabh Bhattacharjee and Barry McLellan located here.
-
Open Postman, choose File -> Import
-
Load the file “CCEP Payment Collection.postman_collection.json”
-
Log into Control Hub. Select the “Customer Journey Data” Tab, and copy your project ID. Populate it, and your Org ID in the Required Info Table.
-
Go back to Postman. Select the collection you just imported and go to the Variables screen. Populate all the fields using info from the Required Info Table. except for MockAPIID, baseURL & identity, these will be used later. **SAVE THE COLLECTION.
** -
Click on the Authorization tab. Scroll down to the “Configure new token” area. The fields should be pre-populated to reference the variables you just set up.
Scroll to the bottom and select “Get New Access Token”. You will be asked to authenticate, and then accept the integration.
-
On success, You will be presented with the token details. Select “Use this token”. Feel free to close this screen for now. If the token fails, check the postman log to see why and re-try. Clearing cookies before choosing “Get new access token” can help.
-
Open the “JDS” Section of the collection and open the “Get History Stream” request. Now just click “Send” and you should receive a 200OK and get some kind of data. Do not proceed until you have a 200OK.
You will need to create a MockAPI account to act as the “Receiver” for the users that chose not to pay the SMS demand. It will contain the details of all the consumers that need to be added to any outbound calling campaign the customer chooses to run.
-
Go to https://mockapi.io/ and create an account.
-
Create a new project called WXCC.
-
Open your new project and copy out the code part of the API endpoint. Populate this in the Required Info Table, and in the postman variables screen we populated earlier under MockAPIID.
-
Create a New Resource called “collections”
Note the name is case sensitive and the solution will fail to function properly if it is named anything else. Your endpoint URL must be similar to https://your_endpoint_code.mockapi.io/collections Give the collection schema settings as follows:
-
Click somewhere in grey bar with a 0 to create some records using faker.js, then click the Data button to see the created data.
-
Now run the “Get Records” request from Postman. Ensure you see data.
Feel free to test the add record and delete record requests from Postman as well. The delete record request works by referencing the ID of the record to delete in the request URL, so you will need to populate it:
https://{{MockAPIID}}.mockapi.io/collections/1
Will delete record ID 1 from the following output:
{
"FirstName": "Manuel",
"LastName": "Tremblay",
"PhoneNo": "832-409-8902 x4241",
"id": "1"
},
{
"FirstName": "Delphia",
"LastName": "Borer",
"PhoneNo": "294-438-6214 x7685",
"id": "2"
},
{
"FirstName": "Estella",
"LastName": "Howell",
"PhoneNo": "247.249.1126 x4669",
"id": "3"
},
Next, we will modify the provided agent desktop layout to work with your instance of Webex Contact Centre. There are a few changes required to get each feature working. Download the file “CCEP_Payment_Collection_Layout.json” from the Git repository and open in your favourite code editor. Visual Studio Code is free and recommended.
The JDS Widget is important in this use case, as it shows the history of payments and text messages made by the user, in addition to calls.
Find the following section around line 61 of the layout file and replace <<PROJECTID>> with the project ID and <<ORGID>> with the info from the required info table. Do the same again at around line 321 (The info appears in two places, once for the “in call” panel area widget, and again for the out of call, nav bar area widget):
"comp": "customer-journey-widget",
"script": "https://cjaas.cisco.com/widgets/customer-journey-9.0.0.js",
"attributes": {
"base-url": "https://api-jds.prod-useast1.ciscowxdap.com",
"logs-on": "true",
"project-id": "<<PROJECTID>>",
"live-stream": "true",
"icon-data-path": "https://amazon-connect-104c098076f3.s3.eu-central-1.amazonaws.com/WxCC-JDS/icons_v3.json"
},
"properties": {
"interactionData": "$STORE.agentContact.taskSelected",
"bearerToken": "$STORE.auth.accessToken",
"organizationId": "<<ORGID>>"
Now upload your desktop layout to WxCC and assign it to an agent you want to test with.
The next step is to create the flows within Webex. There are three flows to implement: One flow that retrieves a valid OAuth token, a Payment Due Workflow and Payment Confirmed Workflow.
-
Log into Connect and create a new service called “PaymentCollection”.
-
Go to Flows and create a flow. Name it GetOAuthToken and upload the CCEP_GetOAuthToken.workflow file.
-
A configuration page will appear titled “Configure Webhook”. Choose the box for “Create new event”, name it “CCEP_GetOAuthToken” and populate the sample input with the below JSON. Click the Parse button, then click Save.
{
"hook": "null"
}
-
Click the cog in the top right and open the custom variables page. If you are using the token service mentioned earlier, populate the Token-Service-URL and x-token-passphrase. If you are not using the token service, populate the StaticToken with a valid OAuth token using the next two steps, and remember to change it every 12 hours. Do not populate the JDSToken Variable Save and publish the workflow, and skip the next two steps if you are using a token store.
-
Go to postman, click the “CCEP Payment Collection” collection, and then the Authorization tab. In the “Current Token” area, notice that the token expiry time is listed. If it is before your demo will happen, make sure to refresh the token at a time that gives you a valid token for the demo. Next, click the drop-down, and then manage tokens.
-
Choose your “payment Collection” token, copy out the access token, and paste it into the “StaticToken” custom variable field within Webex Connect. Ensure you do not have any whitespace or carriage returns as part of the pasted string. Now save the custom variables in Webex Connect, save the flow, and make live.
-
Log into Connect and open the service “PaymentCollection”.
-
Go to Flows and create a flow. Name it PaymentDue and upload the CCEP_PaymentDue.workflow file.
-
A configuration page will appear titled “Configure Webhook”. Choose the box for “Create new event”, name it “CCEP_Paymentdue” and populate the sample input with the below JSON. Click the Parse button, copy the webhook URL into the required info table. Click save.
{"MobNum": "+447571",
"FirstName": "Carl",
"LastName": "Newton",
"PaymentDue": "€198",
"DueDate": "1/1/2024",
"RefNum": "1234"
}
-
Now double click all the SMS nodes (There are four) and select the desired “From Number” of the SMS asset within Webex Connect. Choose save.
-
Now double click the Receive node and choose the same number from the drop-down list. Set the keyword as *
-
Next, we will set up some debugging so we can see the flow working. Open a new tab to https://webhook.site/ and copy out the Unique URL. Populate it in the required info table. You can create your own nodes within the flows we will set up to send debugging information to webhook.site in order to troubleshoot the flows if they are not working correctly.
-
There is a Glitch site that has some back-end code we need to use here. We will configure fully later, for now, open https://glitch.com/edit/#!/swift-eight-cat and click the remix button. You will receive a new URL. Copy *Only* the site identifier into the required info table (E.g swift-eight-cat.glitch.me)
-
Now click the settings cog in the top right of the Webex Connect flow builder. Go to the “Custom variables” tab. Populate all the fields except for JDSToken from the required info table. and leave the page open.
-
Double click the second node in the flow "Call Flow" and set the workflow name to the OAuth flow you created earlier. Node type should be --All-- and the Node Name should be something like "Configure Webhook-2". Save the flow, and make live.
-
Open Postman and select the “Init RequestPayment” request. Ensure the type is “POST” and the address is your webhook from the flow we imported earlier. Go to the “Body” Tab and populate the fields with your relevant info. Make sure to include a number that can receive SMS. In the below example, a “business SMS” enabled sandbox Webex account is used. When presenting to customers, it is more impactful to share a mobile phone screen into a meeting; but be mindful of international SMS charges. Click save and send the request. See below for a screenshot of the request, and the 200OK response from Webex Connect.
-
Monitor your endpoint, you should receive a text corresponding to the information you provided in the body of the Postman request.
-
Reply with some random words. You should receive a text asking you to reply yes or no. Next, reply with the word “No”
-
Now check your mockAPI DB. You should see an entry for this user in the DB. This is what you would present to the customer as a list to drive an outbound calling campaign if a customer choses not to pay the SMS based demand. Note that there is also an Acqueon API that could be used to directly build campaigns with no customer interaction here.
-
Now, check your agent desktop, choose the JDS widget, and enter the number of the consumer. In this example, +12099641260. You should see the full stream of inbound and outbound SMS between connect and the user. If you do not, check your debugging using webhook.site or similar, troubleshoot and re-test. In this case, any time an agent speaks to a customer, the JDS widget would automatically load this full history.
-
Open your “Payment Collection” service in Webex Connect.
-
Go to Flows and create a flow. Name it PaymentConfirmed and upload the CCEP_PaymentConfirmed.workflow file.
-
A configuration page will appear titled “Configure Webhook”. Choose the box for “Create new event”, name it “CCEP_PaymentConfirmed” and populate the sample input with the below JSON. Click the Parse button, copy the webhook URL into the required info table. And then click save.
{
"waId": "12099641260"
}
-
Open the SMS Node and change the “From Number” to your SMS Number. Open the "Call Flow" Node and set the details to call your OAuth Token flow.
-
Open the custom variables and populate all the fields from the required info table. Do not populate the JDSToken field
-
Save and publish the flow.
-
Open your Glitch site and select the script.js file. Around line 33, you will see a statement like below. Change the address to the webhook for the paymentconfirmed flow.
url: 'https://hooks.us.webexconnect.io/events/85P18MBEYD',
-
We are now ready to test this part of the flow. Start your Postman “Init Paymentrequest” and reply yes to the text message.
-
You will receive a payment link. Open this in a browser. Fill out any details for the card numbers etc, this is a mock payment system. Submit the details and observe that the status changes to paid.
-
Your consumer should receive a text message confirming payment.
-
Observe in the agent desktop that the confirmed payment is showing in the JDS history.
The quick SMS function allows you to send an SMS to the person you are currently speaking with. The message can be free text or come from a list of pre-defined responses on a drop-down menu. Any texts that are sent will be injected into the JDS Event stream.
-
Open Webex Connect and create a new flow under the service you created.
-
Choose to upload a flow. Name it “CCEP_QuickSMS” and drop in the CCEP_QuickSMS.workflow file from the github link.
Choose to create a new event, name it “CCEP_QuickSMS” and enter the following JSON. Click Parse, Copy out the Webhook URL, Populate it in the required info table and save the Webhook Node.
{"Number": "12099641260",
"Text": "dsgdsg"
}
-
Double click the SMS Node and change the “From number” to the correct one. Save the node. Double click the "Call Flow" Node and point it at your OAuth Token flow.
-
Open the custom variables screen from the cog in the top right and populate them all from the required info table. Do not populate the JDSToken variable
-
Save the flow and make live.
-
Open your Agent Desktop layout in your chosen code editor, and find and replace the text <<GLTICHID>> with your GlitchID From the required info table.
-
Change the text <<SMSSENDFLOW>> that populates the triggerTextSendURL to be your Webhook URL that you just created. You guessed it, you can find it in the required info table.
-
Update the desktop layout in Webex Contact Center and refresh your agent desktop.
- Call into your queue and speak to an agent.
- Click on the “Quick message” section in the panel area.
- Type your message and click send. You can also choose to send a message from the drop-down list, but you may have to click it twice due to a bug.
- Switch back to the “Customer Experience Journey” section of the agents view. Confirm the outbound SMS is seen in the JDS history.
- Switch to the customer device and ensure the SMS is received.
