Embedding Voxpopme in Decipher

This article gives a simple 5 step guide on how to embed Voxpopme into the Decipher platform. 

Step 1: Voxpopme Project creation

All new projects require a project to be created through the Voxpopme Portal. Please see our document How to set up your Embed project in the Portal if you would like to complete this step first or keep reading if you have been sent the Javascript already by your Voxpopme Project Manager.

Step 2: Insert Voxpopme embed code into your Decipher survey

Now armed with your Voxpopme Project ID and Decipher survey you are ready to incorporate the Voxpopme embed code. The embed code has been designed for easy integration and requires only slight modification once embedded.

Create your question, eg. Multi-select which contains your Question, Instruction and one row showing Technical Difficulties text. Set minimum responses required to 0 when setting up this question.

Add your capture widget code to the Question by clicking on the Source Code

Add your code <div class="vpm-capture-widget"></div> as follows 

To embed navigate to the “Build” tab at the top of your Decipher survey and click on "More Tools" and select “Edit XML”.

On the “View XML” screen navigate to the location in the survey where the Embed will be introduced to respondents and insert the following code between the questions the video capture is to appear. In this example it's Q87 - this is how the XML will look before editing - 

Add the following JavaScript above the question -

<style mode="after" name="respview.client.js" with="[Question Label]"><![CDATA[
<script>

  var vpm_widget_config = {
      project_id: "[Project ID]",
      additional_data: {
          'Respondent ID': '${RespID}',
          'Age': '${Q3.selected.text}',
          'NPS': '${Q5.selected.text}'
      },
      settings: {
          locale: "[Language]"
      },
      disable_next_button: function() {
          document.querySelectorAll("#btn_continue, #btn_finish")[0].style.display = "none";
          document.querySelectorAll("#btn_continue, #btn_finish")[0].setAttribute("disabled", true);
      },
      enable_next_button: function() {
          document.querySelectorAll("#btn_continue, #btn_finish")[0].style.display = "block";
          document.querySelectorAll("#btn_continue, #btn_finish")[0].removeAttribute("disabled");
      }
  };

document.addEventListener("DOMContentLoaded", function(event) {
  document.querySelectorAll("#btn_continue, #btn_finish")[0].style.display = "none";
  document.querySelectorAll("#btn_continue, #btn_finish")[0].setAttribute("disabled", true);
  var checkbox = document.getElementsByClassName("input checkbox")[0];
  checkbox.onchange = function(){
      if (checkbox.checked){
          document.querySelectorAll("#btn_continue, #btn_finish")[0].style.display = "block";
          document.querySelectorAll("#btn_continue, #btn_finish")[0].removeAttribute("disabled");
      } else {
          document.querySelectorAll("#btn_continue, #btn_finish")[0].style.display = "none";
          document.querySelectorAll("#btn_continue, #btn_finish")[0].setAttribute("disabled", true);
      }
  }
});

!function(a,b,c,d){function e(){var a=b.createElement(c);
a.type="text/javascript",a.src=d;var e=b.getElementsByTagName(c)[0];
e.parentNode.insertBefore(a,e)}a.attachEvent?a.attachEvent("onload",e):a.addEventListener("load",e,!1)}
(window,document,"script","https://capture.voxpopme.net/main.js");
</script>
]]></style>

It will now look something like this - 

Now when you Preview your question you will see the capture widget in the survey which looks like this -

Step 3: Customize the embed code

The Embed Javascript requires modifications to meet your project specifications. The fields requiring changes are highlighted above. When replacing a field, remember to remove the brackets. Details on the variables that require customization are explained below.

• [Question Label] - The “Question Label” corresponds the question number used in your questionnaire. The “Question Label” is referenced to twice in the embed code. Both locations require update and it’s important that the label used matches. To set your question label, replace [Question Label] with the corresponding label from your questionnaire. In our example it's "Q87"
• [Project ID] - the “Project ID” allows the capture widget to sync videos captured with the appropriate project in the your Voxpopme portal. To set your project id, replace the [Project ID] with the unique Project ID for your Voxpopme video project, eg. project_id: "2cdaf2b8f505682a10c602d56abe5b5a". See “Step 1” (above) if you don’t have your “Project ID”.
• [Language] - setting the country code will assure we have the right language for each video captured. This is important for transcriptions and translations. Voxpopme supports over 40 languages. The languages we support and their codes can be found here.

To set your language, insert the appropriate country code between the “ “ where [Language] is found. See below for an example.

Step 4: Appending Data

Appending data allows variables captured through your Decipher survey to be passed through into your Voxpopme project. Additional data can be used to identify respondents, filter videos, and add captions to the showreels you create in the Voxpopme portal. Appending data is optional, but at the very least we strongly suggest Respondent ID is passed through.

To append data, find the location in the embed code where “additional_data:” is specified. Any variables you wish to add should be added on the lines below. Example below.

      additional_data: {

          'Respondent ID': '${RespID}’,

          'Age': '${Q3.selected.text}',

          'NPS': ''${Q5.selected.text}',

Variables require you follow a specific format. Everything to the left of the “:” is the label shown under your Voxpopme project. Everything to the right is the identifier pulled from Decipher. All new variables require a “,” separator.

          'Respondent ID': '${RespID}’,

Step 5: Publish & Test

The last step is to save the changes made and test. While testing the video capture and additional data passthrough for your survey, be sure to say “testing” in your video or cover your camera. This will let our QA team know to decline the video. Below are instructions on how to view the additional data in the portal, and how to see declined test videos to confirm data has passed through correctly.

View additional data in portal: To view the additional data in the project, click into your project, and you’ll see the additional data will show up beneath each response’s transcript. Example below.

View Declined Videos: If your test video is awaiting approval, you can skip this step and use the instructions above to view the additional data. If you don’t see your test video, it was likely declined by our QA team, which prevents the video from being sent for transcription. You can see these videos by using the Filter and setting Declined to True. See screenshot below:

Additional Information

• Ensure you get the best possible video participation

Review this document for tips on introducing the video question in your survey, along with recommended wording for opt-in language, recording instructions, incentivizing the respondent, and more. Following these tips will help maximize video participation and quality.

• Changing the Recording Time

By default, the embed code widget allows respondents to record responses between 15 and 60 seconds. 15 seconds is the minimum length allowed and 60 seconds the maximum. If you wish to change this setting please contact your Voxpopme Project Manager.

FAQ

Q: What if I have multiple languages in my study?

A: When expecting responses multiple languages users will need to embed multiple instances of the capture widget (one for each language). Branching in the survey can be used to serve up the right respondents with the corresponding language. The same Project ID can be used, this will assure all responses fall under the respective project in the Voxpopme portal.

Q: Can I append data that is captured after the video question?

A: Yes. For seeing instructions on passing through variables that have been captured after the video embed please see here.

Q: Is there a limit to the number of additional variables I pass through?

A: No. You can pass through as many variables as needed. We recommend passing through a unique ID, along with any data that will be useful for filtering/sorting videos, captioning your showreels, or generally assist with your analysis.