How to create qualitative surveys with video responses using Alchemer and Pipe Video Recorder

Alessio -

In 2017 we published our first tutorial on how to create qualitative surveys with video responses using the 1.0 version of the Pipe Video Recorder embed code and SurveyGizmo. Since then many things have changed. SurveyGizmo rebranded to Alchemer in October 2020 and we released the 2.0 version of the Pipe Recorder embed code, which introduced the possibility to embed more than one recorder in forms and  surveys.

In this tutorial we will show you how to use our new 2.0 embed code in Alchemer surveys.

Requirements

To follow this tutorial you will need an account with:

We will need to use JavaScript Actions, Hidden fields and be able to access the HTML/CSS editor in our Alchemer survey, which are paid features. The minimum plan required to get access to those features is the Professional plan ($149/month), which you can use for free for the first 7 days.

Pipe offers a 14 days free trial, signing up takes just 1 minute and no credit card is required.

Create a new form

Once you have your Alchemer account ready, click on the Create a Survey button at the top of the page.

Create a Survey on Alchemer

You will be asked to either use a template or create a blank survey. I chose the blank survey option. Choose a name for your survey and then click on the Start Building button.

Give a name to your survey on Alchemer

Adding the Pipe 2.0 JS embed code to your form

The first thing we need to do is to add the first part of the Pipe 2.0 JS embed code in the head of the survey’s page.You can find the Pipe 2.0 JS embed code in your Pipe account area.

Go to https://addpipe.com/embed and scroll down to the bottom of the page. On the right side there is a section containing the various embed codes. Click on the 2.0 JS tab and copy the first part of the 2.0 JS embed code.

Copying the first part of the Pipe 2.0 JS embed code


Back to the Alchemer editor, click on the STYLE tab at the top, scroll down the page and click on the </> HTML/CSS Editor button located at the lower right. This feature requires a Collaborator license or higher.

HTML/CSS Editor in Alchemer

In the modal that will be opened click on the CUSTOM <HEAD> tab and paste the first part of the Pipe 2.0 JS embed code you copied before. This is how your custom head should look like.

Pasting the first part of the Pipe 2.0JS embed code in the Alchemer HTML/CSS Editor

Once you are done, click on the Save Changes button.

Adding the Pipe recorders to your Alchemer Survey

Back to the BUILD tab of the Alchemer editor we can start to add the fields needed to display the Pipe Video Recorder.

First let’s add a Text/Media element to the form, so that we can provide instructions to the users. Here you can write anything that makes sense for your video question. I have written “Tell us something about yourself”.

The second element we need is a hidden field, which will be used to store the url of the recording and save it along with the rest of your survey’s answers.

To add the hidden field you will need to click the Add New Action button. In the modal that will appear choose the Hidden Value element by clicking the +Add button.

Adding a Hidden Value to your Alchemer Survey

Give it a name that will make it easy to link each video question to each video URL I have renamed mine First Video Recorder Answer. When you are done click on the Save Action button at the bottom of the modal.

The third element is a JavaScript Action. In this element we will place the second part of the 2.0 JS embed code.

Click the Add New Action button again. In the modal that will be opened scroll down and click the +Add button corresponding to the JavaScript element.  

Adding a JavaScript Action to your Alchemer survey 

In the description field add something that will help you identify the Pipe Video Recorder. I have used First Video Recorder.

In the <script type="text/javascript"> field add the second part of the 2.0 JS embed code which you will find at the bottom of the embed page in your Pipe account area.

Copying the second part of the Pipe 2.0JS embed code

Now you will need to make some changes to the code you just pasted.

The first change is to remove the opening and closing script tag from the embed code since it will be used inside a Javascript editor.

This is how the original embed code looks like:

<div id="custom-id"></div>
<script type="text/javascript">
var pipeParams = {size:{width:640,height:390}, qualityurl:"avq/360p.xml", accountHash:"e46b2e13d3f9942f1a691b00c", eid:"RmSu", mrt:120};
PipeSDK.insert("custom-id",pipeParams,function(recorderObject){});
</script>

This is how it will be once you remove the opening and closing script tag

<div id="custom-id"></div>

var pipeParams = {size:{width:640,height:390}, qualityurl:"avq/360p.xml", accountHash:"e43f990d82ca342f1a691b00c", eid:"RmSv", mrt:120};
PipeSDK.insert("custom-id",pipeParams,function(recorderObject){});

Now, we need to replace the first line of the 2.0 JS embed with the to JavaScript equivalent (since we’re in a JS script editor).

Replace this line of the 2.0 JS embed code

<div id="custom-id"></div>

With the following code

var firstRecorderDiv = document.createElement("DIV");

firstRecorderDiv.setAttribute("id", "first-recorder")

Click on the Save Action button and then click on the Preview button to get access to the survey’s preview.

In the preview page we will need to find the hidden element we added previously and copy its HTML ID. To do that, right click on the text you added in the survey and select Inspect.

You will see the HTML of the page popping-up. Find the HTML input with the type “hidden” and copy its id. In my case the input is this:

<input class="" type="hidden" name="sgE-90289760-1-4" id="sgE-90289760-1-4-element" value="">

and its id is: sgE-90289760-1-4-element.

Finding the HTML ID of the Hidden Value in your Alchemer survey

Go back to the Javascript Action in your Alchemer editor and add the following code after the code you previously changed. This code will actually add the Pipe recorder to the page.

var firstRecorderAnswer = document.getElementById("YOUR-HIDDEN-FIELD-ID")

firstRecorderAnswer.parentNode.insertBefore(firstRecorderDiv, firstRecorderAnswer.nextSibling)

Replace the string "YOUR-HIDDEN-FIELD-ID" with your actual id you just copied in the preview page. This is how my code looks like by now

var firstRecorderAnswer = document.getElementById("sgE-90289760-1-4-element")

firstRecorderAnswer.parentNode.insertBefore(firstRecorderDiv, firstRecorderAnswer.nextSibling)

Finally, replace this line of code:

 PipeSDK.insert("custom-id",pipeParams,function(recorderObject){});

With the following code:

PipeSDK.insert("first-recorder",pipeParams,function(recorderObject){

	let accountHash = "YOUR-ACCOUNT-HASH";
	let formFieldId = "YOUR-HIDDEN-FIELD-ID";

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

        //onSaveOK is part of the desktop recorder's JS events API (recording from camera or screen)

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

    };
    recorderObject.onVideoUploadSuccess = function(recorderId, filename,filetype,videoId,audioOnly,location){
        //onVideoUploadSuccess is part of the native mobile recorder's JS events API (upload new or existing recording)

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

    };
    recorderObject.onDesktopVideoUploadSuccess = function(recorderId, filename, filetype, videoId, audioOnly, location){
        //onDesktopVideoUploadSuccess is part of the desktop recorder's JS events API (upload existing file from desktop) 

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

    };
});

In the pasted code replace the following placeholders:

  • YOUR_ACCOUNT_HASH string with your real account hash, which you'll find in your Pipe account area under Account.
  • YOUR-HIDDEN-FIELD-ID with the actual HTML ID of your Hidden field which we've identified above (sgE-90289760-1-4-element in my case).

The JS code above covers 3 situations:

  1. New recording made with the camera or microphone using the desktop recorder.
  2. Existing recording uploaded through the desktop recorder.
  3. New or existing recording uploaded through the mobile (native) recorder.

We are done! This is how my code looks like after I made all the changes. Click on the Save Action button and let’s test if the Pipe Recorder is on the page!

var firstRecorderDiv = document.createElement("DIV");

firstRecorderDiv.setAttribute("id", "first-recorder")

var firstRecorderAnswer = document.getElementById("sgE-90289760-1-4-element")

firstRecorderAnswer.parentNode.insertBefore(firstRecorderDiv, firstRecorderAnswer.nextSibling)

var pipeParams = {size:{width:640,height:390}, qualityurl:"avq/360p.xml", accountHash:"e46b2e13d32f1a691b00c", eid:"Rmv", mrt:120};

PipeSDK.insert("first-recorder",pipeParams,function(recorderObject){

	let accountHash = "e46b2e13d32f1a691b00c";
	let formFieldId = "sgE-90289760-1-4-element";

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

        //onSaveOK is part of the desktop recorder's JS events API (recording from camera or screen)   
		document.getElementById(formFieldId).value = "https://" + location + "/" + accountHash + "/" + streamName + ".mp4";

        };
        recorderObject.onVideoUploadSuccess = function(recorderId, filename,filetype,videoId,audioOnly,location){
        //onVideoUploadSuccess is part of the native mobile recorder's JS events API (upload new or existing recording)
        document.getElementById(formFieldId).value = "https://" + location + "/" + accountHash + "/" + filename + ".mp4";

        };
        recorderObject.onDesktopVideoUploadSuccess = function(recorderId, filename, filetype, videoId, audioOnly, location){
            //onDesktopVideoUploadSuccess is part of the desktop recorder's JS events API (upload existing file from desktop) 

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

    };
});

Click on the SHARE tab in your Alchemer Editor and click on the View button of the Primary Link section to open the survey page.

If everything worked as expected, you should see the Pipe Video Recorder on the survey’s page.

Testing the integration of the first Pipe recorder

Well done! You have successfully integrated the Pipe Recorder in your Alchemer survey!

Adding more than one video recorder to your Alchemer Survey

To add more than one Pipe recorder to your survey you will need to repeat the same process of the previous step:

  1. Add a Text/Media element to tell your users what to do
  2. Add a Hidden Value Action (from the Actions options)
  3. Find the Hidden Value Action HTML ID in the survey’s preview page
  4. Add a Javascript Action (from the Actions options)
  5. Add the 2.0 JS Embed code in the Javascript Action editor.

Make sure to rename correctly the Hidden Value field and the Javascript action so that you can identify them correctly in the survey editor and in your responses.

I have renamed them like this:

  • Hidden Value Action: Second Video Recorder Answer
  • Javascript Action: Second Video Recorder

Copy the HTML ID of the new Hidden Value Action from the preview page. In this case my ID is: sgE-90289760-1-7-element.

Finally, copy the code in the first Javascript Action and paste it in the new Javascript Action.

Once you have the code in the second Javascript Action make the following changes:

  1. Change every occurrence of the word “first” in the code with the word “second”.
  2. Change the HTML ID value of the Hidden Value Action to the new HTML ID value in every place where you have the old HTML ID from the other Javascript action.

This is how my code for the 2nd recorder  looks like after I made the changes.

var secondRecorderDiv = document.createElement("DIV");

secondRecorderDiv.setAttribute("id", "second-recorder")

var secondRecorderAnswer = document.getElementById("sgE-90289760-1-7-element")

secondRecorderAnswer.parentNode.insertBefore(secondRecorderDiv, secondRecorderAnswer.nextSibling)

var pipeParams = {
  size: {
    width: 640,
    height: 390
  },
  qualityurl: "avq/360p.xml",
  accountHash: "e46b2e13d32f1a691b00c",
  eid: "Rmv",
  mrt: 120
};

PipeSDK.insert("second-recorder", pipeParams, function(recorderObject) {

  let accountHash = "e46b2e13d32f1a691b00c";
  let formFieldId = "sgE-90289760-1-7-element";

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

    //onSaveOK is part of the desktop recorder's JS events API (recording from camera or screen)

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

  };
  recorderObject.onVideoUploadSuccess = function(recorderId, filename, filetype, videoId, audioOnly, location) {
    //onVideoUploadSuccess is part of the native mobile recorder's JS events API (upload new or existing recording)

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

  };
  recorderObject.onDesktopVideoUploadSuccess = function(recorderId, filename, filetype, videoId, audioOnly, location) {
    //onDesktopVideoUploadSuccess is part of the desktop recorder's JS events API (upload existing file from desktop) 

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

  };
});

Once you are done with all the changes, click on the Save Action button and go to the Survey page (refresh it in case it was open). If everything went as expected you should have a page that looks like this:

Testing the integration of the second Pipe recorder

Great Job! Now you can add as many recorders as you like to your survey.

Testing your survey

In the Survey page, record a video using all your Pipe video recorders.

Submit your answers and then check your survey’s entries (which you can find in the Results tab under the Individual Responses option

If everything worked as expected, you should see something like this:

Survey's responses saved in your Alchemer account


We are done!

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