Embedding Voxpopme in Decipher

Voxpopme Help Team UK -

This article gives a step by step guide on how to embed Voxpopme into the Decipher platform. 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.

First, 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.

decipher1.png

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

<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

Javascript

Head to the Build tab at the top of the page and select View XML
Build_-_XML.png

When on this page, click into the code and find the question number of where you’ve added the video question page. In this example it's Q19.

Once this has been located, add the following embed code in above your question wording.

<style mode="after" name="respview.client.js" with="[Decipher Question ID]"><![CDATA[
<script>
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];
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> <checkbox
label="[Decipher Question ID]"
optional="1">
<title>Video Question
<div class="vpm-capture-widget"></div>
</title>
<row label="r1">I'm having technical difficulties or would no longer like to record</row>
</checkbox>

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.

Replace the [Project ID] with the unique Project ID for your Voxpopme video project. This may have been provided to you by a member of the Voxpopme team or this is also available in the Voxpopme portal. To access this ID in the portal select your Project and use the Responses drop-down to select Summary. Be sure to remove the brackets and keep the quotation marks.

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 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).

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})

Language

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.

Testing

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.

Screen_Shot_2018-12-05_at_11.10.10.png

 

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:

Screen_Shot_2018-12-05_at_11.10.52.png

 

Recommended Options

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:

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

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.

 

 

 

 

 

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.