Mindful Feedback and Digital Feedback

This section shows how to integrate Mindful Feedback with Digital Feedback. The example use case presents a Mindful Feedback Scheduler widget to website visitors based on their responses to a Digital web survey. When the intended value is selected and the form is submitted, a Mindful Feedback Scheduler widget is triggered.

The high level configuration steps are:

  1. Create a Digital survey, publish it and add the embed script to the site
  2. Create a modal window for a Mindful Feedback Scheduler widget and add the embed script to the site
  3. Capture Submitted Form events to identify the Digital value that triggers Mindful Feedback widget
  4. Add logic to the website to display Mindful Feedback based on Digital rating

Prerequisites

To complete this process, the following prerequisites must be met:

  • Medallia Digital account
  • Mindful Feedback account
  • A fully configured Call Target
  • A Scheduler widget associated with the Call Target

In this example a Mindful Feedback widget is triggered if the submitted Digital feedback has a low rating score. The Digital event name used is MDigital_Submit_Feedback. The payload of this event includes:

  • Form_Type
  • Form_ID
  • Feedback UUID
  • Content

Additional events can be used for the Mindful Feedback callback trigger. See the list at Digital custom events.

Configure Digital survey form

First, create a survey form in the Digital Command Center and ensure it includes a rating question. Publish the survey and add the Digital embed code to your site.

Identify Rating Question Variable

When a visitor submits feedback, the Submitted Feedback Event MDigital_Submit_Feedback contains an array with the values for each question in the survey form. We need to identify the rating question that should trigger Mindful Feedback from the values in the Digital feedback event. This example shows how to use the Google Chrome developer console to identify the rating question. Most other browsers provide a similar way to view the Digital feedback event.

  1. Add event listeners to capture the submitted feedback events. Sample code to be added to your webpage:

    // SAMPLE CODE ONLY

<script type="text/javascript">

window.addEventListener('MDigital_Submit_Feedback', function(mdEvent) {
  var mdEvent = mdEvent;
  var mdDetail = mdEvent.detail;
  var mdData = mdEvent.detail.Content;
  console.log("This is mdEvent", mdEvent);
  console.log("This is mdDetail",mdDetail);
  console.log("This is mdData",mdData);
});

<script>

  2. Go to your site and trigger the Digital survey. Open the developer console in your browser. Submit a survey response.

    Survey form being filled

  3. Observe in the console logs the payload for mdData. The sequence correlates with the order the questions are displayed on the survey form.

    Feedback event in developer console

  4. In our example, the rating question is the second question so mdData[1].value contains the value chosen when submitting the feedback form.

    Value identified in feedback event

Display Mindful Feedback Scheduler Widget

Create a new Mindful Feedback Scheduler widget that can be embedded into a modal window. Add the Mindful Feedback embed code to your webpage. For detailed instructions to configure a new widget see the Mindful documentation.

Mindful embed code

Deploy Mindful Feedback Widget in a Modal

In this example, the Mindful Feedback widget is deployed in a modal.

  1. Create a suitable modal by adding this code to the <body> of your webpage: 

    // SAMPLE CODE ONLY

<!-- Begin - Mindful Digital -->
<div id="mindfulModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<-- REPLACE VHT PARAMETERS WITH VALUES FROM YOUR WIDGET EMBED CODE -->
<div class="vht-widget-intent" data-vht-organization-id="a63e66dc8fe995e7" data-vht-widget-id="7569e9ee0c25ac34f95eb30ccd3520a9"></div>
</div>
</div>

<style>
/* The Modal (background) */
.modal {
display: block; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(102,102,102,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 50px auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
max-width: 448px; /* Could be more or less, depending on screen size */
box-shadow: rgba(64, 64, 74, 0.56) 8px 10px 58px 2px;
}

/* The Close Button */
.close {
position: relative;
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
z-index: 10;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>

    Ensure the value of the data-vht-organization-id and data-vht-widget-id parameters are replaced with the values from your widget embed code. Note that for now, we set display: block; on the .modal class to enable us to troubleshoot the modal and widget deployment. This is optional and can be removed later.

  2. Hide the Mindful Feedback callback modal by default by modifying the display: style of the modal created above:

    <style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(102,102,102,0.4); /* Black w/ opacity */
}

  3. Extend the script that writes the submitted feedback to the console to conditionally display the Mindful Feedback Callback widget instead of the Digital Thank you page when the customer’s feedback is negative:

    // SAMPLE CODE ONLY 
< Begin - Medallia Digital -->
<script type="text/javascript">

window.addEventListener('MDigital_Submit_Feedback', function(mdEvent) {
var mdEvent = mdEvent;
var mdDetail = mdEvent.detail;
var mdData = mdEvent.detail.Content;
console.log("This is mdEvent", mdEvent);
console.log("This is mdDetail",mdDetail);
console.log("This is mdData",mdData);


<!-- If rating score is lower than 6 –>
if(mdData[2].value < 6) {
KAMPYLE_ONSITE_SDK.closeForm(mdDetail.Form_ID); // Close the Medallia Digital feedback form
vhtConversationBridgeClient.initializeWidgets(); // Make sure Mindful Digital widget is in the newly initialized state
document.getElementById("mindfulModal").style.display = "block"; // Display the Mindful Callback Modal
}
});

</script>

<script type="text/javascript" src="<replace_with_property_embed_code" async>
</script> // Medallia Digital Form
<!-- End - Medallia Digital -->

User Flow

Once the above steps are completed, if a visitor submits Digital feedback that is lower than the set score (6 in the example provided), a Mindful Feedback callback widget is displayed.

Mindful callback widget displayed