Embedding Voxpopme in Survey Gizmo

Voxpopme Help Team UK -

This article gives a step by step guide on how to embed Voxpopme into the Survey Gizmo 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, add your question you would like to capture video responses for and include the following - 

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

Screen_Shot_2018-12-07_at_14.43.17.png

Javascript

Next, you will need to add in the Javascript code. Add an Action and choose Javascript Action

Screen_Shot_2018-12-07_at_14.28.51.png

Copy the embed code below into the Javascript box, make sure to replace [project-id] with the Project ID from your 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.

var vpm_widget_config = {
    project_id: "[project-id]",
additional_data : {
'RespondentID':'[url("RespondentID"]'
}, settings: { locale: "en_GB" }, disable_next_button: function() { document.querySelectorAll("#sg_NextButton, #sg_SubmitButton")[0].style.display = "none"; }, enable_next_button: function() { document.querySelectorAll("#sg_NextButton, #sg_SubmitButton")[0].style.display = "inline-block"; } }; document.addEventListener("DOMContentLoaded", function(event) { document.querySelectorAll("#sg_NextButton, #sg_SubmitButton")[0].style.display = "none"; var checkbox = document.getElementsByClassName("sg-input-checkbox")[0]; checkbox.onchange = function(){ if (checkbox.checked){ document.querySelectorAll("#sg_NextButton, #sg_SubmitButton")[0].style.display = "inline-block"; } else { document.querySelectorAll("#sg_NextButton, #sg_SubmitButton")[0].style.display = "none"; }; }; }); !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");

Appending Data

1. You will need to capture the user's unique identifier on the first page of the survey. To do this, select Add New Action, then select Hidden Value. 

Name the Hidden Value with the appropriate value for your survey, if you're using the Voxpopme panel this will be uid. If not, the panel partner will provide this detail. 

Below Populate with the following, select Insert Merge Code.

Select URL Variable URL from the merge code drop-downlist,then select the green Insert button.

Replace the xxx in [url("xxx")] to unique identifier, for example uid/pid/rid (this will be case sensitive).

Select Save Action

2. Ensure you are passing 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 titled ‘additional_data’. The name of the variable is shown on the left-hand side in single quotation marks. The appropriate piped text for passing through additional data within the survey is on the right in single quotation marks. The RespondantID is already included as additional data in the example Javascript above. 

3. Additional Survey Variables: 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. If you are looking to pass through previous survey answers to the portal, first off save the Javascript embed code. 

  • Select the Customize tab, and ensure you have selected Show the Following - 'Question IDs'
  • On the bottom right-hand corner of each question you will be able to see the ID for the question. You will need to use these to pull through the survey answers selected to the Voxpopme portal. 
  • Make a note of the IDs you would like to pull through to the portal, then use the following format (and replace the IDs) to merge the correct question.
  • Edit the Javascript embed code, and add the additional data required to the embed code as shown below (ensure there is a backward slash before each double quotation mark " within the merge variable).
    additional_data: {
      'Age''[question("value"), id="6"]',
      'Gender''[question("value"), id="11"]',
      'Shopper''[question("value"), id="14"]',
      'RespondentID''[url("RespondentID")]',
      'hometown_location_city''[url("hometown_location_city")]',
      'hometown_location_country''United Kingdom'
    }
  • Select Save.

Languages

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:

1. Add a checkbox question underneath the capture widget so that respondents have the ability to unselect the answer if they change their mind. Include only one answer choice with the text 'I'm having technical difficulty or would no longer like to record' or something similar.

Screen_Shot_2018-12-07_at_14.29.12.png

 

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

Your complete question will now look something like this with your question, javascript action, and checkbox question - 

Screen_Shot_2018-12-07_at_14.32.59.png

Checking the Project Quota

If you would like to prevent the respondent from seeing the video question once the video quota has been met, follow the instructions in the following link: Checking the quota

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.