Embedding Voxpopme in Confirmit - Classic

This article gives a simple 5 step guide on how to embed Voxpopme into the Confirmit 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 survey

Now armed with your Voxpopme Project ID and Confirmit survey you are ready to incorporate the Voxpopme embed code.

First set up the survey page you would like to add your video question to.

The below html script tag will need to be added around the javascript before being added into your survey page - this is highlighted in green below.

Add the Javascript embed code in to a Text box on the page you would like the capture widget to appear on.


Copy and paste in the whole embed code and html tag, below:

<div class="vpm-capture-widget"></div>
<script type="text/javascript">
var vpm_widget_config = {
    project_id: "[Project ID]",
    additional_data: {
        "first_name": "[first_name]",
        "Age": "[Age]",
        "RespID": "[RespID]"
    },
    settings: {
        locale: "[Language]"
    },
    disable_next_button: function() {
        document.getElementById('forwardbutton').style.display = 'none';
    },
    enable_next_button: function() {
        document.getElementById('forwardbutton').style.display = 'block';
    }
};
document.addEventListener("DOMContentLoaded", function(event) {
   document.getElementById("forwardbutton").style.display = "none";

   // Replace 'input' with the class name of the checkbox in your survey
   var checkbox = document.getElementsByClassName('input')[0];
   checkbox.onchange = function(){
       // Replace QuestionReference with the Question Reference specific to the checkbox question on the video question page
       if(document.getElementById('QuestionReference').getAttribute('checked')) {
           document.getElementById('forwardbutton').style.display = 'block';
       } else {
           document.getElementById('forwardbutton').style.display = 'none';
       }
   };
});

!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>

Note - if you have set up technical difficulties as Multiple choice instead of single choice 

If you have set up the survey in this way the JavaScript will need to be adjusted, if you view the source code of your survey you will find the names you need as follows -

In this example the checkbox is named nv1a_1 and the checklabel is named nv1a_1_label so you would need to change the JavaScript to replace this section of the JavaScript above -

// Replace 'input' with the class name of the checkbox in your survey 
var checkbox = document.getElementsByClassName('input')[0]; 
checkbox.onchange = function(){ 
    // Replace QuestionReference with the Question Reference specific to the checkbox question on the video question page 
    if(document.getElementById('QuestionReference').getAttribute('checked')) {           
        document.getElementById('forwardbutton').style.display = 'block'; 
    } else {   
        document.getElementById('forwardbutton').style.display = 'none'; 
    } 
};

with the following -

   var checkbox = document.getElementById('nv1a_1');
   checkbox.onclick = function(){ 
       document.getElementById('forwardbutton').style.display = 'inline-block';    
   };
   var checklabel = document.getElementsByClassName('answerlabel')[0];
   checklabel.onclick = function(){
       document.getElementById('forwardbutton').style.display = 'inline-block';      
   };

Any questions reach out to your usual Voxpopme contact who will be happy to help!

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.

• [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

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 RespID). 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, this will need to be replaced with the appropriate merge codes for your survey. For example the merge code for Respid in Confirmit may look like this '^f('RespID’)^'.

Simply replace the square brackets shown in the embed code above with the appropriate merge code for Confirmit.

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.

Save the edits to your Javascript in the text box. 

Step 5: Publish & 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 click the additional data button (see screenshot below). The additional data will show up beneath each response’s transcript.

 

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

Technical Difficulties

Because the embed code will disable the 'Next' button within the survey until the respondent has successfully uploaded a video response, we recommend adding a technical difficulties option in case a respondent is unable to record a video or decides they no longer wish to record. Follow the instructions below to include this option:

We recommend adding in a checkbox question below the capture widget that states "I'm having technical difficulty or would no longer like to record". This should re-route the respondent to a text open-end question, allowing the respondent to move smoothly through the survey.

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.

Changing the Recording Time

By default, the widget allows respondents to record responses between 15 and 60 seconds. To change the minimum and maximum recording time capture widget please check with your contact at Voxpopme.

Practical tips for higher conversion rates

Read our document for tips on how to gain higher conversion rates.

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.