Configuring web surveys after Genesys Web Messenger

To present a web survey to a customer after a Messenger conversation in Genesys Cloud, you will need to take the following steps:

Modify the Javascript code on the webpage that initiates the Messenger conversation.
- Include a link to the Mindful Feedback Web Messenger Survey Widget JavaScript on the page(s).
- Initialize the widget, passing in your survey's Default Web Survey URL, the criteria for the survey prompt to appear, and any other information you want associated with the survey interaction.
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 Messenger Client Code Sample

The following code excerpt includes the sample Javascript code, provided by Genesys, for establishing a Messenger request to Genesys Cloud from a webpage. It also includes the JavaScript required for the Mindful integration.

Note:

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_ENVIRONMENT_HERE
YOUR_DEFAULT_WEB_SURVEY_URL_HERE

You can find your deployment key in the Genesys Cloud UI at Admin > Message > Messenger deployments.

You can find your Default Web Survey URL in the General tab, in the Survey Settings section.

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <h1>Welcome!</h1>
    </div>

    <!-- Genesys Cloud Web Messenger JavaScript -->
    <script type="text/javascript" charset="utf-8">
        (function(g, e, n, es, ys) {
            g['_genesysJs'] = e;
            g[e] = g[e] || function() {
                (g[e].q = g[e].q || []).push(arguments)
            };
            g[e].t = 1 * new Date();
            g[e].c = es;
            ys = document.createElement('script');
            ys.async = 1;
            ys.src = n;
            ys.charset = 'utf-8';
            document.head.appendChild(ys);
        })(window, 'Genesys', 'https://apps.mypurecloud.com/genesys-bootstrap/genesys.min.js', {
            environment: 'YOUR_ENVIRONMENT_HERE', // eg. use1
            deploymentId: 'YOUR_DEPLOYMENTKEY_HERE'
        });
    </script>
    
    <!-- Mindful Feedback integration JavaScript -->
    <script src="https://surveydynamix.com/js/widgets/sdxGCWebMessagingWidget.js"></script>
    <script>
        SDXWebMessengerSurvey.showSurvey({
            "survey_url": "YOUR_DEFAULT_WEB_SURVEY_URL_HERE",
            "trigger_type": "message_count",
            "minimum_messages": 4,
            "survey_attributes": {
                "customer_name": "John Doe",
                "respondent_language": "en-US"
            }
        });
    </script>
</body>

The above code consists of two main blocks. The first block is based on the Genesys example JavaScript for configuring web messaging on your website. The second block contains the JavaScript required to offer surveys to customers.

If you already have web messaging enabled on your website, you should only need the second block, under .

The above example would render a prompt after four messages ("minimum_messages": 4) have been exchanged between the agent and the customer, as in the following example:

Screen capture of sample web messaging conversation with survey prompt

Trigger the Survey Prompt

The example above will show the survey prompt after four messages have been exchanged. This is configured with the trigger_type and minimum_messages attributes. You can alternatively set the trigger_type to text and provide a trigger_text attribute, which will show the survey prompt when the agent sends a message that includes the trigger_text. For example:

<!-- Mindful Feedback integration JavaScript -->
<script src="https://surveydynamix.com/js/widgets/sdxGCWebMessagingWidget.js"></script>
<script>
 &nbsp; &nbsp;SDXWebMessengerSurvey.showSurvey({
 &nbsp; &nbsp; &nbsp; &nbsp;"survey_url": "YOUR_DEFAULT_WEB_SURVEY_URL_HERE",
 &nbsp; &nbsp; &nbsp; &nbsp;"trigger_type": "text",
 &nbsp; &nbsp; &nbsp; &nbsp;"trigger_text": "is there anything else i can help you with today?"
 &nbsp; &nbsp;});
</script>

Customize the Mindful Feedback Integration

You can use the config object to change the prompt to suit your own branding. You can also pass additional data into the survey interaction using the survey_attributes object.

As an example, the following code uses the config object to change colors and text while using the survey_attributes object to set a language and origin URL:

<!-- Mindful Feedback integration JavaScript -->
<script src="https://surveydynamix.com/js/widgets/sdxGCWebMessagingWidget.js"></script>
<script>
    SDXWebMessengerSurvey.showSurvey({
        "survey_url": "YOUR_DEFAULT_WEB_SURVEY_URL_HERE",
        "minimum_messages": 4,
        "config": {
            "survey_prompt_text_color": "white",
            "survey_prompt_background_color": "blue",
            "survey_prompt_text": "Help us improve by taking a quick survey.",
            "survey_prompt_button_text": "Let's go!",
            "survey_prompt_rejection_text": "Not right now"
        },
        "survey_attributes": {
            "respondent_language": "es-ES",
            "web_messenger_origin_url": window.location.href
        }
    });
</script>

The result of these changes can be seen below:

Screen capture of sample web messaging conversation with survey prompt

Configure Additional Options

There are more options that can be configured in the SDX Web Messenger Widget via the config object.


Config Option	Allowed values	Default	Description
location	top-right, bottom-left, new-tab, #my-element-id	new-tab	The location where the survey will be displayed
show_exit_button	true, false	true	If false, the customer will not have the option to close the survey. This only applies to surveys being shown in the corner. If you are showing a survey in a specific element or new tab, this will not apply.
skip_greeting	true, false	false	If true, the survey greeting will be skipped and the survey will start with the first question.
minimum_messages	integer	10	The number of messages that must be exchanged in the conversation before the survey prompt will appear
survey_prompt_text_color	A valid CSS color	black	The color of the text in the survey prompt
survey_prompt_background_color	A valid CSS color	#F8EA6E (a shade of yellow)	The background color of the survey prompt
survey_prompt_text	Text no more than 100 characters	Let us know how your experience with chat support is going.	The text of the survey prompt
survey_prompt_button_text	Text no more than 15 characters	Take survey	The text of the take survey button
survey_prompt_rejection_text	Text no more than 15 characters	No thanks	The text of the do not take survey button

That's it for your website configuration! With this configuration in place, you should have a web survey prompt appearing on your webpage after a certain number of messages have been exchanged. The Mindful Feedback plugin will automatically pass the Genesys customer journey 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 a Customer Journey 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's Customer Journey ID: "0812f7d0-834e-11ea-bcdb-0d29ea1301f4"

As Mindful Feedback 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 "webMessengerJourneyId" = "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 Interactionssection, configure the fields as shown in the example below:
- Mode: Match Only
- Conversation attribute: webMessengerJourneyId
- Existing conversation attribute: External Reference

Screen capture of Survey mappings page with Match Conversations with Existing Survey Interactions section highlighted