How to add audio and video responses to Nfield surveys, using Pipe

7 April 2022

If you’d like to incorporate audio and video responses within Nfield surveys, you can do this by integrating Pipe’s recording platform. Below is an example of how this feature might be useful.

Before you start

Incorporating Pipe into Nfield surveys requires specific technical expertise. You’ll need someone who is

Experienced in JavaScript & CSS
Experienced in using Nfield themes and familiar with its documentation.

Gather your resources

Setting up Pipe

Choose a suitable price plan.
Sign up and sign in to Pipe.
In the main screen, set up your recorder (see below)

Note: You should set the display size according to the device your respondents will use. It is also possible to make the sizing responsive to a range of device screens. Please refer to Pipe’s own instructions for this.

Click [Generate Embed Code].
Go to the “Add it to your website” box (see below) and find the JavaScript code in the 2.0 JS tab.

Save the values shown for AccountHash and EID (found at the bottom of the “Add it to your website” box). These will be needed later.
By default, audio recording in mobile devices requires a recorder app which respondents may not have. To change to inline recorder,

go to the settings icon next to the Production dropdown box.

tick the following boxes to use the inline recorder.

Now click [Save environment] button at the bottom of the page to save the settings.

Script setup

Here is an example of ODIN script that will show an audio recorder and a video recorder. You can also download the script here. See beneath for explanations.

Adds the theme name.
Sets a font that is a bit hidden to hide the payload setting
If working on a specified-respondents survey, each original respondent key is used for mapping the recordings.
If working on an anonymous survey, this generates a random number which is saved as SecondRespondentKey in the sample table and used to map the recordings.

Note: The higher the random number, the lower the chance of the duplicate SecondRespondentKey being made. You should therefore check this or decide which recordings to pick in the data processing part.

The theme recognizes “addpipe=true” in UIOPTIONS as an instruction to insert an audio recorder.
The hidden font is now used to hide the text in that line. And it uses [payload=(respondentkey)q(question number)] to pass this information form the script to the recorder.
The theme recognizes “Addpipev=true” in UIOPTIONS as an instruction to insert a video recorder.
Completion of the survey question is acknowledged.

Note: Once each recording is uploaded to Pipe, you might want to add *BACK to prevent re-recording or do a check on re-recordings (spotted by same payload).

Theme setup

Open nfield.theme.js with a text editor e.g. Notepad++.
Find the following identifiers in nfield.theme.js. The first instance is for the audio recorder and the second instance is for the video recorder.

accountHash:" YourAccountHash", eid:"YourEID"

Replace YourAccountHash and YourEID with the JavaScript values previously generated in Pipe. (See step 5 in Setting up Pipe.)
Update other parameters according to values generated by your JavaScript.
Zip it and upload to Nfield Manager in the usual way.

Check recording functionality

Click the link to your survey.
As soon as you land on a recording page, your browser will ask for permissions to use your microphone and/or camera as relevant. Click “Allow”.

Test running the surveys and make some recordings.
Go to Pipe, where these should appear in the recording tab, and check the payload value.

Storage setup

Go to the settings icon next to the Production dropdown box.
Check its Region settings.

Note: These recordings will be out of scope of Nfield. You should therefore be aware of the location where the data is stored, along with any different security and compliance levels.

Go to the Storage tab and select Your storage.
Consider the options for storing in an alternative environment to that provided by Pipe.

Mapping Payload to Filename

It would be too labor intensive to click every individual record to find the payload information (respondent key and question id) to rename its recording file. But you can automate this task by using a webhook to send the payload and file name to trigger file renaming (optimally in batches). Please refer to the Pipe Webhook documentation for how to use their webhook. Alternatively, you can program something yourself or use other codeless automation tools, such as Microsoft Power Automate, to do the work.

We hope you find these instructions useful. Please feel free to share your feedback with us.

About us