> ## Content Index > Fetch the complete content index at: https://blog.addpipe.com/llms.txt > Use this file to discover other available public pages before exploring further. # How To Create Qualitative Surveys With Video Responses Using Alchemer and Pipe Video Recorder - URL: https://blog.addpipe.com/qualitative-surveys-video-responses-pipe-video-recorder-alchemer/ - Published: 2020-12-03T12:12:46.000Z - Updated: 2026-05-21T08:14:10.000Z - Author: Alessio - Tags: Alchemer, Tutorials, #Import 2026-05-22 13:18 *This tutorial has been tested and updated in January 2026 to make sure it still works.* In 2017, we published our first tutorial on [how to create qualitative surveys with video responses](https://www.alchemer.com/resources/blog/create-qualitative-surveys-with-video-responses/) using the 1.0 version of the [Pipe video recorder](https://addpipe.com/video-recorder) and SurveyGizmo. Since then, many things have changed. [SurveyGizmo rebranded to Alchemer](https://www.alchemer.com/surveygizmo-is-now-alchemer/) in October 2020, and we released the [2.0 version of the Pipe Recorder embed code](https://blog.addpipe.com/new-pipe-embed-code-v2-0-is-released-in-beta/), which introduced the possibility to embed more than one recorder in forms and surveys. In this tutorial, we will show you how to collect one or more video answers to your Alchemer survey using the using the Pipe video recorder and the 2.0 embed code. ## Requirements To follow this tutorial you will need an account with: - [Alchemer](https://www.alchemer.com/) - [Pipe](https://addpipe.com/) In Alchemer, we will need to use JavaScript Actions, Hidden fields, and be able to access the HTML/CSS editor, which are paid features. The minimum plan required to get access to those features is the Professional plan which you can use for free for the first 7 days (and $165/month or $1075/year afterwards). Pipe offers a 14-day 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](https://blog.addpipe.com/content/images/2022/02/image11.png) 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](https://blog.addpipe.com/content/images/2022/02/image9-2.png) 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 embed code in your [Pipe account area](https://dashboard.addpipe.com). Go to 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](https://blog.addpipe.com/content/images/2022/02/image12-1.png) Copying the first part of the Pipe 2.0 JS embed code Back in 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](https://blog.addpipe.com/content/images/2022/02/image13.png) HTML/CSS Editor in Alchemer In the modal that will be opened, click on the **CUSTOM ** 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. ![Pasting the first part of the Pipe 2.0JS embed code in the Alchemer HTML/CSS Editor](https://blog.addpipe.com/content/images/2022/02/image3.png) 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](https://addpipe.com/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”**. Switch the editor to *Full Mode* by clicking the 3 horizontal dots, then switch to *Source* and , under the text add the following HTML snippet: `

`. Later on, this `div` will contain the video recorder. Here's how it should look: ![](https://blog.addpipe.com/content/images/2026/01/Alchemer-Text-Media-Question-View-Source.png) The second survey 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 is included with the Alchemer Professional plan. ![Adding a Hidden Value to your Alchemer Survey](https://blog.addpipe.com/content/images/2022/02/image1.png) 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.** Give it a (placeholder ) value too. I've used **placeholder URL**. 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 ](https://blog.addpipe.com/content/images/2022/02/image5.png) Adding a JavaScript Action to your Alchemer survey In the description field add something that will help you identify the [Pipe Video Recorder](https://addpipe.com/video-recorder). I have used **First Video Recorder.** In the ` ``` This is how it will be once you remove the above elements: ```JavaScript var pipeParams = {size:{width:640,height:390}, qualityurl:"avq/360p.xml", accountHash:"PIPE-ACCOUNT-HASH", eid:"RmSv", mrt:120}; PipeSDK.insert("custom-id",pipeParams,function(recorderObject){}); ``` Recommendation: change the width value from `640` to `'100%'` . It will look better on mobile devices. Don't forget to save your changes by clicking on the **Save Action** button. ### Getting the recording URL Click on the **Preview** button to get access to the survey’s preview. Note: while in **Preview**, **Fire Actions** needs to be turned on for the recording client to show up. 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 HTML code for the input is: ```JavaScript ``` and its id is: `sgE-90289760-1-4-element`. ![Finding the HTML ID of the Hidden Value in your Alchemer survey](https://blog.addpipe.com/content/images/2022/02/image2.png) Finding the HTML ID of the Hidden Value in your Alchemer survey Go back to the JavaScript Action in your Alchemer editor and replace this line of code: ```JavaScript PipeSDK.insert("custom-id",pipeParams,function(recorderObject){}); ``` With the following code: ```JavaScript PipeSDK.insert("custom-id",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 main recorder. 2. Existing recording uploaded through the main recorder. 3. New or existing recording uploaded through the mobile (native) recorder (legacy 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!** ```JavaScript var pipeParams = {size:{width:'100%',height:390}, qualityurl:"avq/360p.xml", accountHash:"PIPE-ACCOUNT-HASH", eid:"Rmv", mrt:120}; PipeSDK.insert("custom-id",pipeParams,function(recorderObject){ let accountHash = "PIPE-ACCOUNT-HASH"; 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](https://addpipe.com/video-recorder) on the survey’s page. ![Testing the integration of the first Pipe recorder](https://blog.addpipe.com/content/images/2022/02/image4.png) 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 steps above: 1. Add a 2nd Text/Media element to hold a) the question to which you need a video answer and b) the `

` element (with a new id) which will hold the actual video recording widget 2. Add a 2nd Hidden Value Action (from the Actions options) 3. Find the Hidden Value Action HTML ID in the survey’s preview page 4. Add a 2nd Javascript Action (from the Actions options) 5. Add the 2.0 JS Embed code in the JavaScript Action editor and edit as necessary. 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. If everything went as expected you should have a page that looks like this: ![Testing the integration of the second Pipe recorder](https://blog.addpipe.com/content/images/2022/02/image6.png) Testing an Alchemer survey set up to collect two video answers **Great Job! Now you can add as many recorders as you like to your survey.** ## Testing your survey From the SHARE tab you can copy the survey URL and send it to a colleague to test or test it in a new browser or incognito window. In the survey, record a video answer and submit 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](https://blog.addpipe.com/content/images/2022/02/image10.png) Survey's responses saved in your Alchemer account **We are done!** **Please let us know what you think about the new** [**Pipe Video Recorder**](https://addpipe.com/video-recorder) **and if you have any questions, don’t hesitate to** [**contact us**](https://addpipe.com/contact/)**. We’ll be happy to help you!**