Add a survey via web survey widget

You can embed a Mindful Feedback web survey directly on your website or mobile app. This can be useful to conduct a survey after a customer has completed an online self-service function. This article details the process of displaying a web widget, configuring widget options, customizing the styling, and handling events.

Step 1: Include the Widget JavaScript File

Include the following script in the <head> element of an HTML file:

<script src="https://surveydynamix.com/js/widgets/sdxWebchatWidget.js"></script>

This will make Mindful Feedback functions and events available to your own JavaScript code.

Step 2: Display a Basic Web Survey

With the script in place, you can render a web survey via JavaScript wherever you would like. We will cover detailed options later, but for now the following code snippet will render a basic web survey in the bottom-right corner of the page:

SDXSurvey.showSurvey({ "survey_url": "https://surveydynamix.com/webhook/web_survey/12345678-1234-1234-123456789012"});

Note: In the example above, a Default Web Survey URL is being used.

Calling the SDXSurvey.showSurvey function and passing in the survey_url parameter will display a survey similar to the example below:

example survey question

Step 3: Configure Additional Options

The widget accepts additional options to change the survey behavior and pass data to the survey. Consider the more complete example below:

SDXSurvey.showSurvey({"survey_url": "https://surveydynamix.com/webhook/web_survey/12345678-1234-1234-123456789012", 
"config": {"location": "#survey-container", "show_exit_button": false, 
"skip_greeting": true},
"survey_attributes": {"customer_name": "John Doe","respondent_language": "en-US",        "external_ref": "12345678-1234-1234-123456789012"}});

In this example, the SDXSurvey.showSurvey function would render the survey in an element on your webpage with the ID of survey-container. In this case, you would be responsible for making sure the element is large enough to fit the Mindful survey. The function will not change your element but will set the survey to be 100% of the width and height of the element.

The example function will also attach survey attributes (customer_name, respondent_language, and external_ref). You can pass any data in the survey_attributes object and it will be attached to the survey interaction and available through reporting.

The table below shows the allowed values for attributes in the config object.


Config Option	Allowed values	Default	Description
location	top-right, bottom-right, bottom-left, new-tab, #<element ID>	bottom-right	Where the survey will be displayed on the webpage.
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 of the page. If you are showing a survey within a specific element, this will not apply. You can handle closing the survey yourself when the surveyCompleted event is triggered.
skip_greeting	true, false	false	If true, the survey greeting will be skipped and the survey will begin with the first question.

Step 4: Apply Custom Styling

To change how the survey looks, you can edit the Custom CSS inside Mindful Feedback. You can also change the logo in your survey settings under Email & Web.

Step 5: Handle Events

If you need to do something on your website when the user completes the survey, you can listen for the surveyCompleted event and run additional JavaScript.

SDXSurvey.surveyCompleted(function() {console.log("The customer finished the survey.");});

This function will run immediately after the respondent has answered the last question. If you wish to delay the logic, simply wrap your code in a setTimeout function. For example:

SDXSurvey.surveyCompleted(function() {setTimeout(function() {console.log("The customer finished the survey 3 seconds ago. Cool!");
SDXSurvey.closeSurvey(); // close the survey, hiding it from the page    }, 3000);});

Optional: Link a Survey to a Contact-Center Web Chat

You may wish to link a survey to a third-party web chat that has just occurred on your website. You can do so with the external_ref attribute.

Most web chat JavaScript packages make the conversation ID available when the webchat begins or ends. Some contact-center solutions may call this an interaction ID or a task ID. By passing this ID to the survey as the external_ref, you can sync any data from your contact center conversation to Mindful Feedback and attach it to the survey interaction.

Below is an example of linking a Genesys Cloud web chat to a Mindful survey interaction. This example assumes you have already included the Genesys Cloud webchat widget v2 on your page and configured the advanced options to capture Start and End events.

// You may wish to put the conversation ID in a cookie or the session, so that it persists through page refreshes and will still be avialable when the chat finally ends   

let conversation_id;	
customPlugin.subscribe('WebChatService.started', function(e) { 
conversation_id = e.data.data.conversationId;});	
customPlugin.subscribe('WebChatService.ended', function() {SDXSurvey.showSurvey({"survey_url": "https://surveydynamix.com/webhook/web_survey/12345678-1234-1234-123456789012",
"config": {"location": "bottom-left"},"survey_attributes": {"respondent_language": "en-US",           
"external_ref": conversation_id}});});