In a data-driven world it's always important to remember the importance of qualitative research. In fact, while analyzing large sets of data can help us explain the "What" behind a certain phenomenon, it is very rarely sufficient to explain also the "Why" that phenomenon happens in the first place, which is where qualitative research shines.

Surveys are still one of the best ways to gather all the information from your target audience and you can use many tools to implement them in the format that best fits your needs.

One of the problems of these tools though is that it's not always easy to gather video answers, which are becoming more and more the go-to format for qualitative research. In this article we will show you how you can use Pipe Video Recorder in your Qualtrics forms and add multiple video recorders to your surveys and save the video answers along with the rest of your survey's responses.

Table of Contents

  1. Requirements
  2. Add your first video recorder to a Qualtrics survey
  3. Add two more video recorder questions to the survey
  4. Use Qualtrics’ Embedded Data to collect the URLs of the video answers
  5. Using Pipe’s payload option to send the ResponseID to Pipe

Requirements

To follow this guide you will need an account with:

Although Qualtrics provides a free account, to follow this guide you will need to be able to add some Javascript to your survey, which is a paid feature.

If you have a paid Qualtrics account then keep reading, otherwise if you are not willing to pay for it and you are interested in other tools for creating a survey, visit our integrations page for the full list of alternative tools. We have written guides for all of them, so feel free to choose the one that best fits your needs.

Add your first video recorder to a Qualtrics survey

To start click on the Create New Project blue button on the right and select Survey. After choosing the name of your survey, click on Get Started and you will be sent to the survey's editor. For the purpose of this tutorial I will use a blank form, but feel free to use a template if that is better for you.

Create a new Survey in Qualtrics


Now that we have our survey, we'll need to add the Pipe Video Recorder Client. To do that, in your survey's editor click on Look and Feel button, go to General and edit the Header of the page. In the popup that will appear click on the Source button and add the following piece of code.

Adding the Pipe Video Recorder Client in the Header

Back in the Look and Feel Modal go to the Style section and add the following link in the External CSS field: https://cdn.addpipe.com/2.0/pipe.css.  

Now we can go back to the survey editor and add a Descriptive Text Field using the Create a New Question button. After adding it, click on the element and make sure to select the HTML View to add your question's text and the following code.

Adding the first Survey's question

This is the HTML div element that we’ll replace later on, through JavaScript, with the actual recording client. Here’s my HTML View after adding some <br> white-space too:

Next, let’s add the JavaScript. Click on the cog wheel of your recently added question and click on Add JavaScript

In the modal that shows up paste the following code:

Now in the code above you need to replace 3 parts:

  1. ACCOUNT_HASH with the account hash found in your account page
  2. ENVIRONMENT_ID with the alphanumeric environment id found at in your environments page
  3. DIV_QUESTION_ID with The <div> id used before (question0)

Once you’re done with the replacements click on Save.

Here’s how my code looked:

Final JS code 

You should now see the video recorder in your survey preview. All videos recorded with it will be available in the Pipe account area’s Recordings section.

Add two more video recorder questions to the survey

To add more recorders you will have to basically repeat what we did in the previous section as many times as needed for the number of video answers you want to get in your survey. For our survey, we'll add 2 more Descriptive Text questions, each with their own descriptive title. In each question switch to HTML View and add the actual question text and the DIV element to be replaced with the video recorder. I have added the followings:

With the questions’ up you’ll have to add the JS code we used before and place it inside each questions’ JS field.

Don’t forget to replace the  ACCOUNT_HASH,  ENVIRONMENT_ID  and DIV_QUESTION_ID with the proper values in the JS code. Our ids this time are question1 and question2.

Use Qualtrics’ Embedded Data to collect the URLs of the video answers

In the survey flow section, you can add objects known as Embedded Data, then assign them values using JS code. We will use these objects to store the URLs of the video answers and save them along with all the other survey's responses.

To add an Embedded Data element click on Survey Flow and select Add a New Element Here. From the list that will show up choose Embedded Data and give it a name to identify it in your survey responses.

I’ve named mine “question0_video_url”.

Make sure to not set a value for it as we’ll set one dynamically. You can go ahead and add one Embedded Data element for each video recorder in the survey. Should you need additional info about Embedded data elements you can find the official Qualtrics documentation at this link. With your new element added, click Save Flow in the bottom right.

adding an embedded data element in your survey

Now let’s add the JS code that populates our new Embedded Data element with a value. Click on the cog wheel of your 1st question and click on Add JavaScript: you should see your previously added JS code.

In the JS code: replace the line

with

The above code makes use of Pipe’s JS Events API. It is quite hefty because it covers all 3 possible scenarios:

  1. record from desktop webcam
  2. desktop upload
  3. mobile upload

In each scenario we populate the Embedded Data element with the final URL to the newly recorded/uploaded recording.

In the above code, make sure to replace:

  1. The ACCOUNT_HASH with the correct value from your account.
  2. If you’ve used a different name for your embedded data element, replace  question0_video_url in the code above with the name you chose.

Now that the video recorder is in the survey, you may want to make the video answer mandatory. To do that, you can add the following JS lines to your JS input field to prevent the user from moving forward in the survey before recording a video:

With the changes above, the code now activates the NEXT button only after the user records a video/audio file through the webcam. If you want to be covered for the other 2 scenarios (desktop upload or mobile upload) you’ll have to add the respective event functions and add the qobj.showNextButton(); line to each one of them.

Using Pipe’s payload option to send the ResponseID to Pipe

Now that we have the video URLs in the Qualtrics backend there’s still one thing we can do. Pipe offers a management area for all recordings and APIs which allow us further integrations. It would be nice if we could attach some data - like the ResponseID - to each recording, so that in the Pipe dashboard - or through the Pipe APIs - we can distinguish all videos coming from different survey's responses.

To attach the ResponseID to each recording we’ll have to edit a bit the JS code we used before. Namely, you’ll have to edit this line:

And add the payload property and give it the value of ${e://Field/ResponseID}. Here’s my code after adding it:

Here’s the ResponseID shown in the Pipe account area’s list of recordings:


We are done!

Please let us know what you think about the Pipe Video Recorder and if you have any questions don’t hesitate to drop us an email at hello@addpipe.com. We’ll be happy to help you!