Exercise - Embed a survey on a website

  • 20 minutes

Exercise 1: Embed a survey on a webpage

In this exercise, you create a project with a survey and then embed the survey on a webpage.

Note

If you do not have access to a website that you can edit, go through as many steps as possible.

Task 1: Create a new project

In this task, you create a new project with a survey.

  1. Go to Microsoft Customer Voice and sign in with your credentials.

  2. Select Get Started.

    Customer Voice open to the Home tab with the Get Started button highlighted.

  3. Select the Blank project option.

    Several project templates listed along with the Blank template, which is highhlighted.

  4. Select the Next button to continue.

  5. From the Where would you like to create your project? screen, determine which location to add your project to. Select the See all environments link.

    You can use the default location, select from recent locations, or see all environments. An arrow points to See all environments.

  6. The All environments screen shows a list of all Microsoft Dataverse environments that you have access to. Select the environment that you are using to complete this exercise and then select the Select and close button.

    In the All environments list, an environment is selected and an arrow points to the Select and close button.

  7. Select the Create button. If you are unable to select the button, confirm by using the previous step and then make sure that you have one location selected.

    The default environment is selected, and an arrow points to the Create button.

  8. From the navigation menu, select All Projects.

    From the Home tab, an arrow points to the navigation menu All Projects tab.

  9. Find your new project from the list and then select the ellipsis (...) next to its name.

    In the My projects list, New project is selected, and an arrow points to the ellipsis button next to it.

  10. Select Rename from the menu.

    The ellipsis button is selected, and in the dropdown menu, an arrow points to Rename.

  11. Enter Product Information Request as the new name and then select Rename.

    In the Rename Project dialog, the name is changed to Product Information Request.

  12. After the project has been renamed, double-click the project to open it from the list.

  13. Select the ellipsis (...) next to the survey.

    In the navigation pane, under Product Information Request, Survey 1 is selected, and an arrow points to the ellipsis button next to it.

  14. Select Rename.

    The ellipsis button is selected, and in the menu that appears, an arrow points to Rename.

  15. Enter Website Product Request as the new survey name and then select Rename.

    In the Rename your survey dialog, the name is changed to Website Product Request, and an arrow points to the Rename button.

  16. Select the New Survey title.

    In the Premium Support Survey design view, an arrow points to the New Survey title.

  17. Enter Product Request as a Title.

  18. Select + Add new.

    With the title entered as Product Request, an arrow points to the Add new button.

  19. Select a text question, enter First Name as the question, and then turn on the Required option. Select Add new.

    With First Name entered as the first question, an arrow points to the Required option, which is toggled on.

  20. Select a text question, enter Last Name as the question, and then turn on the Required option. Select Add new.

  21. Select a text question, enter Email as the question, and then turn on the Required option. Select the ellipsis (...) and then select Restrictions.

    With Email entered as the third question, the ellipsis button is selected and an arrow points to the Restrictions option in the menu.

  22. Select the Restrictions drop-down menu, select Email, and then select Add new.

    The Restrictions dropdown shows options for Number, Email, and Custom, and an arrow points to the Email restriction.

  23. Select a text question and enter Comments as the question text. Turn on the Long answer option, and make sure that the Required option is turned off.

    With Comments entered as the fourth question, an arrow points to the Long answer option, which is toggled on.

  24. Stay within your project.

Task 2: Create variables for the survey

In this task, you add a new variable to be used when embedding the survey into a website.

  1. From the Design tab of your survey, select Customization, then Personalization.

    In design view of the Website Product Request survey, an arrow points to the customization menu to the right.

  2. Select Variables.

    In the Customization menu, an arrow points to Variables.

  3. Hover your mouse over the locale variable and then select the Delete icon to remove it.

    In the list of variables, the locale variable is selected and an arrow points to the Delete button.

  4. Select Delete again to confirm that you want to remove the variable.

  5. Select Add variable.

    Below the list of variables, an arrow points to Add variable.

  6. Enter ProductPage for the variable name and then select Save.

    With the new variable name set to ProductPage, an arrow points to the Save button.

  7. When the One variable added indication appears, select Close.

    A notification reads One variable added, and an arrow points to the Close button.

  8. Stay within the survey.

Task 3: Prepare and add the embedded code

In this task, you prepare the code that is needed to embed the survey onto your website and then you add the code to a webpage.

  1. From the survey, select the Send tab and then select Embed.

    On the Website Product Request survey Send tab, under Choose how to send the survey, the Embed option is highlighted.

  2. In the Choose an embed format section, keep the Inline option selected and then select Copy.

    On Send > Embedding, under Choose an embed format, Inline is selected and highlighted. Below the Embedded code box, an arrow points to the Copy button.

  3. Open Notepad (or any other text editor on your workstation), and then right-click and select Paste to add the code to your file. You can save this file for your records, if you want.

    An instance of Notepad shows the pasted embedding code.

  4. Add the following text to the bottom of the file that you created in the previous step. This text is used to set the First Name as Lead, the Last Name as Capture, and the ProductPage as Product A.

     <script>
 window.addEventListener('load', function () {
 renderSurvey("surveyDiv","Lead","Capture","Product A");
 }, false);
 </script>

  5. Above the script, add the following text:

    <center>
<div id="surveyDiv" style="height: 700px; width:600px; margin-left:auto; margin-right:auto">

  6. At the bottom of the file, add the following text:

    </div>
</center>

  7. The entire script should now look like the following figure.

    The instance of Notepad showing the edited code.

  8. If you have access to a website and can add this code to a page, sign in to your website and add the script to your webpage.

    The survey is displayed on the webpage, as shown in the following figure.

    Embedded survey shows Request More Information, Product Request, and the four questions along with a Submit button.

  9. Complete the survey by adding John as the First Name, Smith as the Last Name, john@test.com as the Email, and Please could you send me a brochure for this product? in the Comments column.

  10. Select Submit.

    With values supplied for the four questions highlighted, and arrow points to the Submit button.

Task 4: Review the submitted variable values

In this task, you will review the variable values that were passed through from the embedded survey into the survey response that was submitted at the end of Task 3.

  1. Open Dynamics 365 Customer Voice and go to the survey that you used to embed into your website.

  2. Select the Website Product Request report.

    In design view of the Website Product Request survey report, under Reports in the navigation pane, an arrow points to the Website Product Request report.

  3. You should see the response that you submitted in Task 3. If you do not yet see it, wait a few moments and then refresh the screen.

    The report shows the total responses as 1, and shows the values submitted in the latest responses for each question.

  4. Select the Respondents menu to the right of the screen.

    To the right of the report, an arrow points to the Respondents menu.

  5. Double-click the Anonymous response in the All respondents list.

    In the Respondents dialog, under All respondents, an arrow points to the Anonymous respondent.n"}

  6. Select the Personalized data tab.

    On the Response tab of the Anonymous respondent dialog, an arrow points to the Personalized data tab.

    You should now see the three values that were passed through in the embed code that was added to the webpage on your website.

    The Personalized data tab shows the values passed through: First name is Lead, Last name is Capture, and ProductPage is Product A.