Embedding Voxpopme into your survey

Voxpopme Help Team UK -

This article gives a step by step guide on how to embed Voxpopme into your survey 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. Follow these step by step instructions, if you run into any issues or have any questions your contact at Voxpopme will be happy to help.

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

There are two essential parts to include on the video question page in your survey, a Javascript element and a HTML element. The guide below will walk you through how to embed both into your platform.

Copy the embed code below as Javascript into your survey platform, on the page you would like to add the capture widget:

var vpm_widget_config = {
    project_id: "[project_id]",
    additional_data: {
	'first_name': '[first_name]',
	'Age': '[Age]',
	'NPS': '[NPS]'
    },
    settings: {
	locale: "en_GB"
    },
    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
        }
    }
});

 

  1. Replace the Project ID with the ID that has been provided to you by a member of the Voxpopme team. This is also available in the Voxpopme portal. To access this ID, head to the portal, select your project and use the Responses drop-down to select Summary, eg. project_id: "2cdaf2b8f505682a10c602d56abe5b5a"
  2. 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.
  3. Save your Javascript. 

Insert a text description on the video question page in your survey, paste the below in:  

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

This will tell the survey platform where to place the video capture widget on the page.   

 

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:

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.

Languages

If you're setting up a non-English language survey, ensure you've changed the Locale code in the Javascript.

Screen_Shot_2019-01-09_at_14.06.49.png

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

 

 

 

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.