Configuring web surveys after web chat (Genesys Cloud web chat v2)
Configuring Web Surveys After Web Chat (Genesys Cloud Web Chat v1).
To present a web survey to a customer after a web chat in Genesys Cloud, you will need to take the following steps:
- Modify the Genesys Cloud Web Chat Javascript code on the webpage that initiates the chat request.
- Include the Mindful Feedback Web Survey Widget JavaScript on the page(s).
- Configure a WebChatService.started event handler to store the Genesys Conversation ID as a cookie or other form of local storage.
- Configure a WebChatService.ended event handler to load the Mindful survey via the Web Survey Widget.
- Configure Genesys Cloud polling in Mindful Feedback to associate the web survey with the Genesys Cloud conversation.
Consult the remainder of this article for more information on each of these requirements.
Genesys Cloud Web Chat Client Code Sample
The following code excerpt comes from the sample Javascript code, provided by Genesys, for establishing a web chat request to Genesys Cloud from a webpage.
The additional elements below are required for the automatic display of Mindful Feedback web surveys after a web chat has ended.
You can save the example HTML in this article as a working example of the Genesys Cloud integration.
Before deploying the file, update the values of the following placeholders:
- YOUR_DEPLOYMENTKEY_HERE
- YOUR_ORGGUID_HERE
- YOUR_QUEUENAME_HERE
- YOUR_DEFAULT_WEB_SURVEY_URL_HERE
You can find the required values for these placeholders at Settings > Customer Settings > Integrations > Configure Genesys Cloud > WebChat Demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Genesys Cloud WebChat Demo</title>
</head>
<body>
<script src="https://apps.mypurecloud.com/widgets/9.0/cxbus.min.js" onload="javascript:CXBus.configure({debug:false,pluginsPath:'https://apps.mypurecloud.com/widgets/9.0/plugins/'}); CXBus.loadPlugin('widgets-core');"></script>
<button type="button" id="chat-button-simple" onclick="customPlugin.command('WebChat.open');">Start Chat (simple)</button>
<button type="button" id="chat-button" onclick="customPlugin.command('WebChat.open', getAdvancedConfig());">Start Chat (with data)</button>
<script type="text/javascript">
function getAdvancedConfig() {
return {
form: {
autoSubmit: false,
firstname: 'Praenomen',
lastname: 'Gens',
email: 'praenomen.gens@calidumlitterae.com',
subject: 'Populated from data'
},
formJSON: {
wrapper: '<table></table>',
inputs: [
// Default fields
{
id: 'cx_webchat_form_firstname',
name: 'firstname',
maxlength: '100',
placeholder: 'Required',
label: 'First Name'
},
{
id: 'cx_webchat_form_lastname',
name: 'lastname',
maxlength: '100',
placeholder: 'Required',
label: 'Last Name'
},
{
id: 'cx_webchat_form_email',
name: 'email',
maxlength: '100',
placeholder: 'Optional',
label: 'Email'
},
{
id: 'cx_webchat_form_subject',
name: 'subject',
maxlength: '100',
placeholder: 'Optional',
label: 'Subject'
},
// Custom Fields
{
id: 'custom_field_1',
name: 'customField1',
maxlength: '100',
placeholder: 'Custom Data',
label: 'Custom Field 1',
value: 'My Custom Value'
}
]
}
};
}
</script>
<script type="text/javascript">
window._genesys = {
widgets: {
webchat: {
transport: {
type: 'purecloud-v2-sockets',
dataURL: 'https://api.mypurecloud.com',
deploymentKey : 'YOUR_DEPLOYMENTKEY_HERE',
orgGuid : 'YOUR_ORGGUID_HERE',
interactionData: {
routing: {
targetType: 'QUEUE',
targetAddress: 'YOUR_QUEUENAME_HERE',
priority: 2
}
}
},
userData: {
addressStreet: '64472 Brown Street',
addressCity: 'Lindgrenmouth',
addressPostalCode: '50163-2735',
addressState: 'FL',
phoneNumber: '1-916-892-2045 x293',
phoneType: 'Cell',
customerId: '59606',
// These fields should be provided via advanced configuration
// firstName: 'Praenomen',
// lastName: 'Gens',
// email: 'praenomen.gens@calidumlitterae.com',
// subject: 'Chat subject'
}
}
}
};
const customPlugin = CXBus.registerPlugin('Custom');
</script>
<!-- Additional Mindful Feedback code to show the web survey: -->
<script src="https://surveydynamix.com/js/widgets/sdxWebchatWidget.js"></script>
<script>
let conversation_id = localStorage.getItem('sdx_genesys_conversation_id');
customPlugin.subscribe('WebChatService.started', function (e) {
conversation_id = e.data.data.conversationId;
localStorage.setItem('sdx_genesys_conversation_id', conversation_id);
});
customPlugin.subscribe('WebChatService.ended', function (e) {
SDXSurvey.showSurvey({
"survey_url": "YOUR_DEFAULT_WEB_SURVEY_URL_HERE",
"config": {
"location": "bottom-left"
},
"survey_attributes": {
"respondent_language": "en-US",
"external_ref": conversation_id,
"customer_name": "Alex"
}
});
// Lets remove the conversation ID from local storage, in case the customer starts a new webchat
localStorage.removeItem('sdx_genesys_conversation_id');
// Let's close the survey 3 seconds after it is completed
SDXSurvey.surveyCompleted(function() {
setTimeout(function() {
SDXSurvey.closeSurvey();
}, 3000);
});
});
</script>
</body>
</html>Additional Mindful Feedback JavaScript
The code above mostly consists of example JavaScript from Genesys Cloud, with about 25 extra lines of code at the end for showing the Mindful survey.
Use the following steps to implement the additional required code:
1. Add the Web Survey Widget Script
Include the Web Survey Widget JavaScript file on your website. This widget allows you to render a survey on your webpage, either in one of the corners, in a new tab, or in an element of your choice. If you don't want to rely on a third-party script, you can take the contents of this file and host it locally.
<script src="https://surveydynamix.com/js/widgets/sdxWebchatWidget.js"></script> 2. Check for an Existing Conversation ID
When the page loads, check for an existing Genesys conversation ID in local storage. This will make more sense when we look at the next step, where we place the conversation ID into local storage.
<script> let conversation_id = localStorage.getItem('sdx_genesys_conversation_id'); 3. Store the Conversation ID
Capture the conversation ID from the WebChatService.started event and place it into local storage. This ensures the conversation ID is still available if the user refreshes the page during the web chat. You could alternatively store the conversation ID in a cookie, in the session, or by any other method to ensure it persists through page refreshes.
customPlugin.subscribe('WebChatService.started', function (e) {
conversation_id = e.data.data.conversationId;
localStorage.setItem('sdx_genesys_conversation_id', conversation_id);
});4. Render the Survey When the Chat Session Ends
The WebChatService.ended event will allow you to render a survey onto the page using the Mindful Feedback Web Survey Widget.
Pass the conversation_id variable into the survey_attributes object as the external_ref, so that Mindful Feedback knows which Genesys conversation the survey belongs to. You can then render the survey in an existing element on your page (by element ID) or choose a location option from the Web Survey Widget options.
customPlugin.subscribe('WebChatService.ended', function (e) {
SDXSurvey.showSurvey({
"survey_url": "YOUR_DEFAULT_WEB_SURVEY_URL_HERE",
"config": {
"location": "bottom-left"
},
"survey_attributes": {
"respondent_language": "en-US",
"external_ref": conversation_id,
"customer_name": "Alex"
}
});
// Lets remove the conversation ID from local storage, in case the customer starts a new webchat with a new conversation ID
localStorage.removeItem('sdx_genesys_conversation_id');
// Close the survey 3 seconds after it is completed
SDXSurvey.surveyCompleted(function() {
setTimeout(function() {
SDXSurvey.closeSurvey();
}, 3000);
});
});
</script>Remember to add your survey's Default Web Survey URL above in place of YOUR_DEFAULT_WEB_SURVEY_URL_HERE
The web survey will only contain the attributes passed to it in the URL query string when it first begins. If you want to address the customer by name, present the survey in a specific language or otherwise tailor the behavior/prompts of the survey based on an attribute, you will need to add the relevant attributes to the web survey URL.
That's it for your website configuration! You should have a web survey appearing on your page after a web chat ends. You have passed the Genesys conversation ID to the survey interaction as the external_ref attribute, which will allow you to complete the next step to sync data from Genesys to Mindful.
Configure Genesys Cloud Survey Mapping in Mindful Feedback
After a customer has completed the survey:
- Genesys Cloud will have a conversation record with an ID such as "0812f7d0-834e-11ea-bcdb-0d29ea1301f4"
- Mindful Feedback will have a web survey interaction with an external_ref value that matches the Genesys Conversation ID: "0812f7d0-834e-11ea-bcdb-0d29ea1301f4"
As Mindful polls for new Genesys Cloud conversations, a survey mapping defined for Match Only mode will sync data from the conversation into the survey using a match on "id" = "external_ref".
Use the following steps to configure the survey mapping:
Quick access: Settings > Customer Settings > Integrations > Genesys Cloud
- On the Genesys Cloud tab, click Configure Genesys Cloud.
- On the Configure Genesys Cloud page (Configure Polling tab), scroll down to the Survey Mappings section.
- Click Add Survey Mapping.
- Complete the survey mapping as seen in the example below:
- Description: Enter a description for the survey mapping.
- Survey: Select the survey to which the mapping will apply.
- Conditions: No conditions are needed for this mapping.
- Survey Parameters: Select the Type and Value for all attributes required for the selected survey.
- In the Match Conversations With Existing Survey Interactions section, configure the fields as shown in the example below:
- Mode: Match Only
- Conversation attribute: id
- Existing conversation attribute: External Reference
