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:

1. Modify the Genesys Cloud Web Chat Javascript code on the webpage that initiates the chat request.
   1. Generate a unique randomly generated UUID and, if needed, set a language variable.
   2. Pass the UUID in the web chat invitation to Genesys Cloud so that it will be attached to the Genesys Cloud conversation.
   3. Configure a chatEnded event handler to load the Mindful Feedback default web survey with the UUID included as a query string parameter. We recommended loading the survey in an iFrame as a best practice.
2. 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, or view the video below.

Interaction Flow

The following diagram provides a high-level overview of the interaction between Mindful Feedback and Genesys Cloud.

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.

<script type="text/javascript">

    $(document).ready(function initializeChat () {

The additional elements below are required for the automatic display of Mindful Feedback web surveys after a web chat has ended.

Generating a UUID

You will need to define a function to generate a unique 16-digit UUID. In our example integration, we have defined the uuidv4 function detailed below. Call this function and assign the returned value to a variable to hold the UUID. In our example, we save the value to a variable named SDX_Ref. This unique ID will become an attribute on the Genesys Cloud conversation.

    // Generate UUID
        function uuidv4() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
        var SDX_Ref = uuidv4();

Define a second variable containing the default web survey URL for the required survey and use the SDX_Ref variable to insert the UUID into the URL string. Other attributes can be passed to the web survey here, as well. For more information, refer to the Default Web Survey URL article.

  var SDX_URL = 'https://demo.surveydynamix.com/webhook/web_survey/123de760-1234-11e9-a7af-12346aa0b2d3?external_ref=' + SDX_Ref + '&respondent_language=en-AU';    

Pass the SDX_external_ref attribute to the Genesys Cloud conversation in the webchat.getConfig().setData function. Here you may be sending other data such as Customer Name, Email etc.

        var chatConfig = {
            // Web chat application URL
            webchatAppUrl: 'https://apps.mypurecloud.com.au/webchat',

            // Web chat service URL
            webchatServiceUrl: 'https://realtime.mypurecloud.com.au:443',

            // Numeric organization ID
            orgId: 9899,

            // Organization name. Replace with your org name.
            orgName: 'mindfulfeedback',

            // Requested agent language skill (Agent must have this language skill to receive chat)
            language: 'English - Written',

            // Requested agent skills (Agent must have these skills to receive chat)
            // skills: ['Computers', 'Printers'],
            // OR
            skills: [],

            // Priority
            priority: 0,

            // Queue Name
            queueName : 'AppFoundry',

            // Target agent email (OPTIONAL)
            agentEmail: '',

            // Whether to show submit button or send message on Enter keypress
            showSubmitButton: true,

            // Log level
            logLevel: 'DEBUG',

            // Locale code
            locale: 'en',

            // Whether to allow reconnects
            reconnectEnabled: true,

            //Allowed reconnect origins
            reconnectOrigins: ['https://example.com', 'https://help.example.com', 'https://shop.example.com'],

            // Logo used within the chat window
            companyLogoSmall: {
                width: 149,
                height: 149,
                url: 'https://dhqbrvplips7x.cloudfront.net/webchat/1.0.23/company-logo-small-9c9fe09b.png'
            },
            // Fallback image used for agent if no agent image is defined in the agent PureCloud profile
            agentAvatar: {
                width: 462,
                height: 462,
                url: 'https://dhqbrvplips7x.cloudfront.net/webchat/1.0.23/agent-e202505f.png'
            },

            // Text displayed with chat window is displayed
            welcomeMessage: 'Thanks for chatting.',

            // CSS class applied to the chat window
            cssClass: 'webchat-frame',

            // Custom style applied to the chat window
            css: {
                width: '50%',
                height: '50%'
            }
        };
        // Required if reconnects are enabled
        window.PURECLOUD_WEBCHAT_FRAME_CONFIG = {
            containerEl: 'chat-container'
        };

        ININ.webchat.create(chatConfig)
                .then(function (webchat) {
                    chatButton.onclick = function () {
                        $("#chat-container").html('');
                        var firstName = document.getElementById('first-name').value;
                        var lastName = document.getElementById('last-name').value;

                        // Use getConfig.setConfigProperty() for any web chat configuration property to dynamically set config values.
                        webchat.getConfig().setData({
                            firstName: firstName,
                            lastName: lastName,
                            SDX_external_ref: SDX_Ref
                            });

If you need to update the configuration later, you can pass a partially filled chatConfig object into the webchat.updateConfig function.

                        //Use the updateConfig function to update batches of properties by passing in a partially filled chatConfig object
                        webchat.updateConfig({
                            locale: 'en',
                            welcomeMessage: 'Welcome to Mindful Feedback WebChat',
                        });

Use the webchat.chatEnded event to raise a function as shown below. In our example, the function calls another function called showSdxSurvey, which is explained further below. This configuration causes the web survey to display when the customer or agent ends the chat session.

                        //Code to run when chat ends.
                        webchat.chatEnded = function () {
                            showSdxSurvey(SDX_URL);
                        };
                        // Alternatively, call webchat.renderPopup here. Note that reconnects do not apply to popup chat.
                        return webchat.renderFrame({
                            containerEl: 'chat-container'
                        });
                    };
                })
                .catch(function (err){
                    console.log(err);
                });
    });

An example of the showSdxSurvey function is shown below. In this example, the function loads the value of the SDX_URL variable into an iFrame named sdx-survey-iframe. It then sets the content of the chat-container to empty.

    function showSdxSurvey(SDX_URL) {
        $("#chat-container").html('');
        var iframe = document.createElement('iframe');
        iframe.setAttribute('id', 'sdx-survey-iframe');
        document.getElementById('chat-container').appendChild(iframe);
        iframe.setAttribute('src', SDX_URL);
        iframe.setAttribute('class','survey-iframe');
    }
</script>

Configure Genesys Cloud Survey Mapping in Mindful Feedback

After a customer has completed the survey:

• Genesys Cloud will have a conversation record with an attribute of context.SDX_external_ref with the value passed into the URL string, such as “0812f7d0-834e-11ea-bcdb-0d29ea1301f4”.
• Mindful Feedback will have a web survey interaction with an external_ref value that matches the context.SDX_external_ref attribute in Genesys Cloud.

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 "context.SDX_external_ref" = "external_ref".

Use the following steps to configure the survey mapping:

Quick access: Settings > Customer Settings > Integrations > Genesys Cloud

1. On the Genesys Cloud tab, click Configure Genesys Cloud.
2. On the Configure Genesys Cloud page (Configure Polling tab), scroll down to the Survey Mappings section.
3. Click Add Survey Mapping.
4. 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.
5. In the Match Conversations With Existing Survey Interactions section, configure the fields as shown in the example below:
   • Mode: Match Only
   • Conversation attribute: <context external ref variable> (for example, context.SDX_external_ref)
   • Existing conversation attribute: External Reference

Next step: Configuring SIP Transfer