The following post was originally written by Octavian Naicu, Founder & Product Manager at Pipe.

This tutorial will show you how to easily create a SurveyGizmo survey that gathers qualitative data using recorded video answers.

With qualitative surveys one asks for comments, feedback, suggestions, and other kinds of responses that can’t be easily classified.

If almost by definition the gathered data is open ended – and thus the richer the response data the better the results – then what better way to gather and interpret qualitative data at scale than with the respondents answering your open ended questions on video?

With most of the emotion being communicated in nonverbal ways, think how much depth and data you’ll be gathering compared to text based responses. Videos will not only capture the spoken content but also facial expressions, changes in tone and inflections in their voice, and body language.

1. Create a New Survey

Login to your SuveyGizmo account and create a new survey.  Give it a name and start building.

Add a new Question of type Textbox to request the name of the user completing the survey and recording the video. Add a new question of type Email to collect the email as well.

Here’s how our survey looks so far:


2. Add The Video Recorder

In SurveyGizmo’s build interface:

  1. Add a new Text/Media element
  2. Click on the Text or Instructions field that shows up
  3. Click on the 3 dots iconQualitativeSurveysVideoResponses2
  4. Then click on SourceQualitativeSurveysVideoResponses3
  5. Now paste the Pipe embed code (you can get it from your Pipe account from the Embed Video Recorder tab)
  6. With the video recorder code pasted in you can add a label to the top, use the label HTML tag so that it’s styled similar to the other labels. We used <label>3. Record your video response</label> .
  7. Leave the type of media as Text / Instructions and click on Save at the bottom right.

Your code should look like this:


Your survey should now contain a video recorder:


Respondents will now be able to type in their name, email, and record a video response using their webcam, to be submitted together with the survey. Now we just have to link the recorded video to the response.

3. Add a (Hidden) Video URL Field

This is where we’ll use SurveyGizmo’s Hidden Value feature (available only with the Standard plan or above). The hidden value will store the video URL when the survey is submitted.

From SurveyGizmo’s build interface:

  1. Add a Hidden Value from the Add New: Action side menu
  2. Give it a name (I used “Video URL”) and save

Now we need to find out the HTML ID of the new hidden value. I found no easier way to do it than inspecting the survey’s HTML code using Chrome’s Developer tools (right click > Inspect) and identifying the hidden input and it’s id:


4. Fill the Video URL with The Actual URL

We’ll use Pipe’s onSaveOk JS function (part of Pipe’s Java Script Desktop Events API) which gives us the name and location of the final mp4 video. We'll use this info to generate the full URL.

The onSaveOk function is called by Pipe after a video is recorded and gives us a lot of information about the new video including:

  • Video name (without extension)
  • Duration, audio and video codecs
  • Device names (camera, microphones) if available
  • Location of the final video and snapshot (if stored by us)

We’ll be extending onSaveOk to:

  1. Generate the absolute URL, including the extension, using the video name and its location.
  2. Populate the hidden video URL field with the actual URL.

To make it work on mobile devices  we’ll also be using Pipe’s onVideoUploadSuccess function (part of Pipe’s Java Script Mobile Events API).

From SurveyGizmo’s build interface:

  1. Add a Java Script element from the Add New: Action side menu
  2. Paste the code below in the JS field after replacing the accountHash and formFieldId values with the real ones



function onSaveOk(streamName, streamDuration, userId, cameraName, micName, recorderId, audioCodec, videoCodec, fileType, videoId, audioOnly, location){

   //onSaveOK is part of the JS desktop events API

   document.getElementById(formFieldId).value = "https://"+location+"/"+accountHash+"/"+streamName+".mp4";


function onVideoUploadSuccess(filename, filetype, videoId, audioOnly, location){

   //onVideoUploadSuccess is part of the JS mobile events API

   document.getElementById(formFieldId).value = "https://"+location+"/"+accountHash+"/"+filename+".mp4";


3. Click on Save Action

The formFieldId value is the id identified in step 3 above.

The accountHash value can be found in your Pipe Account > Settings page:


And… You’re Done!

All survey responses will now contain the URL to the recorded video. In your SurveyGizmo backend, clicking on Results > Individual Responses will bring up the list of responses:


Clicking on each response will bring up all the details including the Video URL:


You can also configure the the list of responses to show the Video URL for each vid by clicking on Customize in the top right.