Embedding Voxpopme into your survey

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

First set up the survey question you would like to add your video question to and include the following -

<div class="vpm-capture-widget"></div>

Next, you will need to add in the Javascript code, copy the embed code below as Javascript into your survey platform -

var vpm_widget_config = {
    project_id: "[Project ID]",
    additional_data: {
	'first_name': '[first_name]',
	'Age': '[Age]',
	'NPS': '[NPS]'
    },
    settings: {
	locale: "[Language]"
    },
    disable_next_button: function() {
	// Insert disable 'Next' button function appropriate to your survey platform here
    },
    enable_next_button: function() {
	// Insert enable 'Next' button function appropriate to your survey platform here
    }
};
!function(a,b,c,d){function e(){var a=b.createElement(c);a.type="text/javascript",a.async=!0,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");
    document.addEventListener("DOMContentLoaded", function(event) {
    // Replace your_NextButton below with the appropriate function to disable 'Next' button in your survey platform 
    document.getElementById("your_NextButton").style.display = "none";
    // Replace your_checkbox is your survey platform's class for selection a checkbox 
    var checkbox = document.getElementsByClassName("your_checkbox")[0];
    checkbox.onchange = function(){
        if (checkbox.checked){
            // Insert enable 'Next' button function appropriate to your survey platform here
        } else {
            // Insert disable 'Next' button function appropriate to your survey platform here
        }
    }
});

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 Voxpopme portal. To set this 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.

• Replace the Javascript comments noted within the embed code with the appropriate functions for hiding and showing the 'Next' button, as well as the checkbox selection within your survey platform. This will ensure respondents cannot skip past recording without uploading a response, and that they are able to move smoothly through the survey if they have any technical difficulties.

Step 4: Appending Data

You can pass through additional data to the Voxpopme Portal. At minimum we recommend passing through a unique identifier so the survey results can be tied to the videos captured. The embed code above includes appended data capture title 'additional_data'/ The name of the variable is shown on the left-hand side in single quotation marks. The appropriate merge codes will then need to be added to the right in single quotation marks. Pass through as much additional data as you would like to the Voxpopme platform. To add a new piece of additional data you will need to add a comma at the end of last additional data line. 

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