Embedding Voxpopme Into Your Survey Platform

Voxpopme help team -

This help article will walk you through how to embed the Voxpopme video capture widget into your survey platform, with a brief overview of the different settings available. Here is an example of the Javascript code to be copied into your survey platform:

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 appropriate to your survey platform here
    },
    enable_next_button: function() {
	// Insert enable next button 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");

 

Within your survey, on the video question page, you will also need to add the below as a text description:

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

This will need to be placed where you would like to capture widget to appear on the survey page. Once this has been copied into your survey platform, there are a couple of required and optional variables. The below will walk you through the options available.

 

Project ID

This is a required field to ensure the video responses you collect are appearing in the right project in the Voxpopme portal. The Project ID is unique to the project set up in the portal. Replace the project_id within the Javascript code with the ID available in the portal. To access the Project ID, head to your project and use the Responses tab to switch to the Summary view, then copy the project ID from the end of the Project Link. The Project ID will be a unique set of letters and numbers. 

 

Capture Type

Capture type determines the type of response you would like to capture through the widget. Below is a list of all the capture types, with a short explanation. 

video-only

The capture widget will only give respondents the option to record a video response through their webcam or front-facing camera. This is the default capture option. 

video-text

The capture widget will initially prompt the respondent to record a video response. If the respondent has any type of technical problem, a pop-up question will ask if they would like to re-try recording a video response or leave a text open-ended response instead. 

audio-only

The capture widget will only give respondents the option to record an audio response. Audio only will only work for respondents who are on a laptop/desktop. 

audio-text

Respondents will be prompted to leave an audio response. If the respondent has any type of technical problem, a pop-up question will ask them if they would like to re-try recording an audio response or leave a text open-ended response instead. 

text-only

The capture widget will only give respondents the option to type out a text response. 

 

Additional Data

We recommend passing through additional data to the Voxpopme portal which will allow you to identify, search and filter your video responses. At a minimum, we suggest passing through a unique identifier for each respondent, like Respondent or Panelist ID. 

You are able to pass through as much additional data as you require in the following way:

additional_data: {
        'first_name': '[first_name]',
        'Age': '[Age]',
        'NPS': '[NPS]'
}

The additional data is added to the embed code in a structured manner. Each row defines a piece of additional data to be passed through to the Voxpopme portal. The left-hand side displays the naming convention for the additional data. You will be able to filter responses by the data you pass through, for example Age. On the right-hand side, you will need to insert how additional data is passed through within your survey platform for each variable. This will be unique to your survey platform, for example in square or curly brackets. A colon separates the naming convention from the additional data identifier. The naming convention and the merge data will need to be displayed within single speech marks, as shown above.

To add further additional data, add a comma and then a new line. You are able to add any other required additional data in the same way. Ensure that there is a limit of one piece of additional data per line. 

 

Settings

Within the Settings section, ensure that you have set the locale of the capture widget. The above is defaulted to English (British). To change the capture widget language, all you will need to do is replace the language code on the right-hand side. Below is a list of the languages that the capture widget is currently available in:

  • English (British) - en_GB
  • English (United States) - en_US
  • Spanish - es_ES
  • Spanish (Mexican) - es_MX
  • French - fr_FR
  • German - de_DE
  • Italian - it_IT
  • Chinese (Simplified) - zh_CN
  • Indonesian - id_ID
  • Japanese - ja_JP
  • South Korean - ko_KR
  • Malaysian - ms_MY
  • Thai - th_TH
  • Tagalog - tl_PH
  • Chinese (Traditional) - zh_TW
  • Polish - pl_PL
  • Turkish - tr_TR
  • Vietnamese - vi_VN
  • Portuguese - pt_PT
  • Swedish - sv_SE
  • Danish - da_DA
  • Arabic - ar_AE
  • Russian - ru_RU
  • Hindi - hi_IN
  • Dutch - nl_NL
  • Norwegian - nb_NO
  • Finnish - fi_FI
  • Slovakian - sk_SK
  • Romanian - ro_RO
  • Bengali - bn_IN
  • Flemish - nl_BE
  • Urdu - ur_IN
  • Tamil - ta_IN

If you require the capture widget in another language, please contact a member of the Voxpopme team. The language code must be within single speech marks. 

 

Disabling The Next Button

As part of our best practices, we recommend disabling the next button on the video record page until the respondent has successfully uploaded their video response. This has been built into the capture widget Javascript code. All you will need to do is replace the parts highlighted with the appropriate function for your survey platform. Below is the snippet from the Javascript that will disable and enable the next button:

        disable_next_button: function() {
          // Insert disable next button appropriate to your survey platform here
        },
        enable_next_button: function() {
            // Insert enable next button appropriate to your survey platform here
}

Replace the above comments with the appropriate functions for disabling and enabling the Next button in your survey. If your video question is on the last page of your survey, the function set as the Submit button. 

Have more questions? Submit a request

0 Comments

Article is closed for comments.