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.
To follow this tutorial you will need an account with:
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.
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.
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.
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.
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.
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.
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.
In the description field add something that will help you identify the Pipe Video Recorder. I have used First Video Recorder.
Now you will need to make some changes to the code you just pasted.
This is how the original embed code looks like:
This is how it will be once you remove the opening and closing script tag
Replace this line of the 2.0 JS embed code
With the following code
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:
and its id is: sgE-90289760-1-4-element.
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
Finally, replace this line of code:
With the following code:
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:
- New recording made with the camera or microphone using the desktop recorder.
- Existing recording uploaded through the desktop recorder.
- 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!
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.
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:
- Add a Text/Media element to tell your users what to do
- Add a Hidden Value Action (from the Actions options)
- Find the Hidden Value Action HTML ID in the survey’s preview page
I have renamed them like this:
- Hidden Value Action: Second Video Recorder Answer
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.
- Change every occurrence of the word “first” in the code with the word “second”.
This is how my code for the 2nd recorder looks like after I made the changes.
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:
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:
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 email@example.com. We’ll be happy to help you!