Embedding Voxpopme in Decipher

Voxpopme Help Team UK -

This article is going to give a step by step guide on how to embed Voxpopme into the Decipher platform. 

    1. Head to the page where you would like the video question to appear within your Decipher survey script, and add your question wording in as an Essay question. Make sure to turn OFF the Mandatory option for this question.Essay_question.png
    2. Once you've added your question text, click on the text box and go to the source code for the question and add in the following HTML after your question wording, without the outside quotation marks:  "<div class="vpm-capture-widget"></div>". See image below to see how to access the source code:Screen_Shot_2018-06-26_at_10.31.42_AM.png
    3. Add the ‘I’m having technical difficulties or would no longer like to record’ button as a Row action. Make sure this action is NOT mandatory. Row_action.png
    4. Head to the Build tab at the top of the page and select View XML
    5. When on this page, click into the code and find the question number of where you’ve added the video question page. In this case Q19.
    6. Once this has been located, add the following embed code in above your question wording.
    7. <style mode="after" name="respview.client.js" with="[Decipher Question ID]"><![CDATA[
      var vpm_widget_config = {
      project_id: "[Project ID]",
      additional_data: {
      'first_name': '[first_name]',
      'Age': '[Age]',
      'NPS': '[NPS]'
      settings: {
      locale: "en_US"
      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];
      ]]></style> <checkbox
      label="[Decipher Question ID]"
      <title>Video Question
      <div class="vpm-capture-widget"></div>
      <row label="r1">I'm having technical difficulties or would no longer like to record</row>
    8. Replace the Decipher Question ID, highlighted in green above, with the question ID you would like to give the video question - in this case it would be Q19.
    9. Replace the [Project ID] with the unique Project ID for your Voxpopme video project. This will be supplied by your Voxpopme contact, or alternatively you can access the Project ID in the Voxpopme portal; head to the project and use the Responses drop-down to switch to the Summary view, where the Embed Wizard can be located.
    10. If you're setting up a non-English language survey, ensure you've changed the Locale code. This will notify the system of the language that responses are expected to be in. Check out the list of languages available.
    11. Ensure you are passing through additional data to the Voxpopme portal. We recommend at a minimum passing through a unique identifier for each respondent, like Respondent ID or User ID. Taking a look at the embed code above, you will see an area named 'additional_data'. Within this section, three examples of additional data have been added (First Name, Age and NPS). The name of the variable is shown on the left-hand side. The appropriate merge code for passing through additional data within the survey is added on the right (in the example this is displayed in square brackets, for Decipher this may look like '${RespID} for the unique Respondent ID).
    12. Add in as much additional data as you would like to be passed through to the Voxpopme platform. Previous survey answers can also be passed through to the portal. To add a new piece of additional data you will need to first off add a comma at the end of last additional data line, then add a new line. On the new line, add in the name of the variable in single quotation marks (similar to the example above), next add a colon, and then add in the appropriate merge code for this additional data in single quotation marks. If this is a previous survey answer, the same merge code to pipe through previous survey answers within your survey can be used (for example, within the Decipher platform this may look like '${Q18.selected.text})

If you have any questions, please contact the Voxpopme team. When your survey is ready, share a test link with the Voxpopme team so we can ensure everything is working correctly.

Have more questions? Submit a request


Article is closed for comments.