Embedding Voxpopme in Qualtrics

Voxpopme help team -

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

  1. First off, add in the question you'd like to ask respondents as a text description. Screen_Shot_2017-09-26_at_11.20.47.png
  2. Switch to the HTML view, and copy in the below:
    <div class="vpm-capture-widget"></div>
  3. Next, you will need to add in the Javascript embed code. Select the ‘Cog’ icon on the left-hand side of the question, and then select ‘Add Javascript’. Screen_Shot_2017-09-26_at_11.29.28.png Copy the embed code below intro the Javascript box:
    var vpm_widget_config;
    Qualtrics.SurveyEngine.addOnload(function (){
    var qualtricsThis = this;
    setTimeout(function(){ document.getElementById('NextButton').style.display = 'none' }, 1000);
    document.getElementById('NextButton').style.display = 'none';
    vpm_widget_config = {
        project_id: "[project-id]",
        additional_data: {
            'Test': '[Test]'
        settings: {
            locale: "en_GB"
        disable_next_button: function() {
            document.getElementById('NextButton').style.display = 'none';
        enable_next_button: function() {
            document.getElementById('NextButton').style.display = 'block';
    var vpm = document.createElement('script'); vpm.type = 'text/javascript'; vpm.async = false;
    vpm.src = 'https://capture.voxpopme.net/javascripts/app.js';
  4. Replace the Project ID with the Project 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.
  5. 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.
  6. 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 should be added on the right.
  7. When passing through the unique identifier in Qualtrics, you will need to use the Survey Flow to insert Embedded Data. Set the Custom Value to your unique identifier, Qualtrics will then provide the merge code you will need to include in the embed code. Simply replace the area in the square brackets shown in the embed code above with the appropriate merge code for Qualtrics, for example 'Respid' would be '${e://Field/respid}'.
  8. 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 '${q://QID2/ChoiceGroup/SelectedChoicesTextEntry}'.
  9. Save your Javascript.
  10. The embed code will disable the 'Next' button within the survey until the respondent has successfully uploaded a video response. Therefore, for users that may have technical difficulty or change their mind, include an 'I'm having technical difficulty or would no longer like to record' checkbox underneath the capture widget.
  11. On the checkbox question, you will need to include a separate snippet of Javascript that will enable the 'Next' button if the respondent selects the technical difficulty checkbox. To include this, select the 'Cog' icon on this question and select 'Add Javascript', then paste in this Javascript:Screen_Shot_2017-09-26_at_11.35.38.png
        this.questionclick = function(event,element){
            if (element.type == 'checkbox'){
                if (element.checked){
                } else {
  12. Save your Javascript and test through your survey. Ensure the 'Next' button is appropriately disabled/enabled, and that the additional data is being passed through successfully to the portal. 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.