Embed Customer Voice Survey in PowerApps Portal.

This blog will explain how you can embed survey created in Customer Voice in PowerApps Portal.

Follow Below steps to achieve this:

Steps to get the Embed code of Survey:

Open the survey you want to embed.

Go to Send tab.

Select Embed code.

Select Inline in choose an embed format option.

Optionally you can add variables based on your requirement. (this is optional)

Copy the Embedded code.

Steps for embedding survey in PowerApps Portal

Go to PowerApps portal studio
Select the webpage (page) on which you want to embed the survey.

Go to Source Code Editor and add the below code.

<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; padding: 8px; margin: 0px; text-align: left; min-height: 100px;">
  <div id="surveyDiv" class="container" style="display: flex; flex-wrap: wrap; width: 850px; height: 1250px;">
    <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;"></div>
  </div>
</div>

///REPLACE BELOW CODE WITH YOUR EMBED CODE WHICH YOU COPIED FROM CUSTOMER VOICE///

<script src="https://mfcdeu.azureedge.net/mfpeeu/Embed.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="https://mfpeu.azureedge.net/mfpweu/Embed.css">

<script type="text/javascript">
  function renderSurvey(parentElementId, FirstName, LastName, locale, companyname) {
    var se = new SurveyEmbed("b0Xhs4NxNUymifJ5gLZ7_NN9RBg5PVUYzM0c1UzZBWFZNRC4u", "https://customervoice.microsoft.com/", "https://mfpembedcdnweu.azureedge.net/mfeu/", "true");
    var context = {
      "First Name": FirstName,
      "Last Name": LastName,
      "locale": locale,
      "companyname": companyname,
    };
    se.renderInline(parentElementId, context);
  }
</script>

Copy and paste this code on your webpage make sure you replace the script with your code which you copied from customer voice.

NOTE:

You must create a parent div container with the ID surveyDiv on the webpage where you want to display the survey.
The minimum width and height of the parent div container must be 350 pixels and 480 pixels respectively.
This div container displays the survey on the webpage.

After adding the code click on Browse Website It will redirect you to the portal page.

The page will be blank you won’t see anything.

We have to add the method which will load the survey when page loads.

Click on Edit.

Go to Option and add the below JavaScript code and click on save.


 window.addEventListener('load', function() {
      renderSurvey("surveyDiv", '{{user.firstname}}', '{{user.lastname}}', '{{user.emailaddress1}}', '{{user.parentcustomerid.name}}');
    }, false);

NOTE:

The preceding method calls the renderSurvey function and passes the required values accordingly.
Here we are passing logged-in user’s first name, last name, email address, and company name in renderSurvey function.
We are using liquid code to retrieve the logged-in user details.
For example, if we want to get the logged-in user’s first name we have to use the below liquid code: ‘{{user. firstname}}’