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>

Adding Attributes to a web survey

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.

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