CX Qualtrics Embed Guide

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 Project ID by your Voxpopme contact.

Step 2: Insert Voxpopme embed code into your Qualtrics survey

Now armed with your Voxpopme Project ID and Qualtrics survey you are ready to incorporate the Voxpopme embed code. First, add in the question you'd like to ask respondents as a multiple choice question with 2 choices, multiple answers as in the below screenshot.

Type in the question you wish to ask and switch to the HTML view, and copy in the below html code as follows:

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

Change the text for the first checkbox option to “I’m having technical difficulties” and the text for the second checkbox option to “I would like to leave a text comment instead.”

Make each answer option ‘exclusive’ so only one option can be selected by the participant. You can do this by clicking on the answer option and selecting ‘Make answer exclusive’ from the dropdown options.

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

The embed code has been designed for easy integration and requires only slight modification once embedded.

var vpm_widget_config;
Qualtrics.SurveyEngine.addOnReady(function (){
var qualtricsThis = this;
setTimeout(function(){ document.getElementById('NextButton').style.display = 'none' }, 1000);
document.getElementById('NextButton').style.display = 'none';

vpm_widget_config = {
    project_id: "Insert project ID",
    additional_data: {
        'QID': '1',
        'ResponseID': '${e://Field/ResponseID}',
        'NPS': '${q://QID42/ChoiceGroup/SelectedChoices}'
        'ResponseID': '${e://Field/ResponseID}',
        'SurveyID': '${e://Field/SurveyID}'
    },
    settings: {
        locale: "Insert locale",
        min_recording_time: 5,
        max_recording_time: 300
    },
    disable_next_button: function() {
       document.getElementById('NextButton').style.display = 'none';
    },
    enable_next_button: function() {
       document.getElementById('NextButton').style.display = 'inline-block';
    }
};
var vpm = document.createElement('script'); vpm.type = 'text/javascript'; vpm.async = false;
vpm.src = 'https://capture.voxpopme.net/main.js';
document.body.appendChild(vpm);

this.questionclick = function(event,element){
    if (element.type == 'checkbox'){
        if (element.checked){ 
            this.showNextButton();
        } else {
            this.hideNextButton();
        }
    }
}
});

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 your Voxpopme portal. To set your project id, 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.

Step 4: Appending Data

1. Ensure you are passing through the Qualtrics ResponseID and SurveyID fields to the Voxpopme portal 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. QID, ResponseID, Age and Gender are already included as additional data in the example Javascript above. ResponseID is generated by Qualtrics and this code should work for the ResponseID for every project. Note when testing in preview mode Respondent ID is not populated.
2. 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 the last additional data line. If you’re passing through a survey response as additional data, use the same piped text you would use to pipe that response into another survey question. For example '${q://QID2/ChoiceGroup/SelectedChoicesTextEntry}'.

Note 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/ResponseID}'. 

3. 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, 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}'. 

Step 5: Publish & Test

The last step is to save the changes made and test. Don’t forget to publish your changes to the survey before testing. You will not be able to test the Voxpopme widget in ‘Preview’ mode. To test the widget we advise you use the anonymous link option by selecting ‘Distributions’ from the top menu and clicking ‘Anonymous Link.’ You can then copy the link into your browser address bar to test functionality. 

While testing the video capture and additional data passthrough for your survey, be sure to say “testing” in your video or cover your camera. Your video may be declined by our QA team before you have a chance to review, you can still view the videos by using the Filters in the project. Below are instructions on how to see declined test videos to confirm data has passed through correctly.

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:

Additional Information

Technical Difficulties/Video Opt-Out

The embed code will disable the 'Next' button within the survey until the respondent has successfully uploaded a video response, by adding the technical difficulties and leave a text comment options participants will be able to bypass the video widget and proceed to a text open-end box. This has been included in the sample Javascript and is part of the multiple answer question. Make sure Force Response or Request Response Validation is NOT applied. 

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.

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 add the below under the settings portion of the capture widget JavaScript:

min_recording_time: x,

max_recording_time: x

*Note: The JavaScript will read this in seconds, so if you want a maximum record time of 3 minutes you would need to put 180 in place of the “x”.

Practical tips for higher conversion rates

Read our document for tips on how to gain higher conversion rates.

FAQ

Q: What if I have multiple languages in my study?

A: When expecting responses multiple languages users will need to embed multiple instances of the capture widget (one for each language). Branching in the survey can be used to serve up the right respondents with the corresponding language. The same Project ID can be used, this will assure all responses fall under the respective project in the Voxpopme portal.

Q: Can I append data that is captured after the video question?

A: Yes. For seeing instructions on passing through variables that have been captured after the video embed please see here.

Q: Is there a limit to the number of additional variables I pass through?

A: No. You can pass through as many variables as needed. We recommend passing through a unique ID, along with any data that will be useful for filtering/sorting videos, captioning your showreels, or generally assist with your analysis.