If you're set on building your survey in Qualtrics but need stable media recording & analytics, you can integrate Phonic into your Qualtrics survey. This tutorial will walk you through how to embed Phonic media recording widgets into Qualtrics.
First Things First
Sign into both your Qualtrics and Phonic accounts. If you don't have a Phonic account, go to Phonic and make one.
Create a Skeleton Survey in Phonic
Create a survey with as many audio questions as you need audio-recorders. In this case two audio questions have been added.
Find Your Survey ID and Question ID
Click Deploy. Now click on your new survey in the main dashboard. We'll start by embedding the first audio recording question into your Qualtrics survey. Click on the first question and take a look at your URL. The url of this example is as follows.
https://app.phonic.ai/surveys/5f5077858c576d48d11857d2/questions/5f5077964f942404412f03a6
Here 5f5077858c576d48d11857d2 is the survey ID and 5f5077964f942404412f03a6 is the question ID.
Over to Qualtrics
It's time to add the first microphone to Qualtrics. Log into Qualtrics, and go to your survey. Go to Look and Feel --> General. Look for the Header text box. Paste the following line of code into the Header text box.
<script type="text/javascript" src="https://api.phonic.ai/phonic-embed.min.js"></script>
Clicking "edit" will open the Qualtrics editor. Avoid pasting the code into the editor as it may alter the text.
Add the First Microphone
Go back to the main survey outline. In the description of the question you'd like to add your first microphone, enter the HTML editor. Find the place you'd like to add the microphone and paste the following. Note that here the surveyid and questionid should be changed to yours.
<phonic-mic
surveyid="YOUR-SURVEY-ID"
questionid="YOUR-QUESTION-ID"
responseid="${e://Field/ResponseID}">
</phonic-mic>
The result should appear as follows in Qualtrics.
To further customize microphone behaviour and appearance, including changing the recording format, size, color and adding additional IDs, check out our full embedding guide.
Add Any Other Microphones
All that's left is to add the above code snippet to any other questions you need. Make sure to change the question ID to match your Phonic skeleton and test that everything works by submitting some test responses.
Qualtrics will erase the microphone HTML if questions are edited in Normal view or if there is no question text above the HTML. This will remove the microphone from your question. Ensure that you have question text and that you edit your questions only in HTML view.
Linking Phonic and Qualtrics using Response ID
The above embedded code attached the Qualtrics response ID to the Phonic response using the following attribute.
responseid="${e://Field/ResponseID}"
This field can be found in Phonic by clicking Filters > Display Options and clicking the "External ID" checkbox. If you click the Export button, and export your data to CSV it is also included as an additional column. This allows you to key your Phonic responses with other questions from the Qualtrics survey.
Make It Mandatory
The default behaviour of the Phonic microphone is optional, meaning respondents can press the "Next" button and continue through the survey without submitting a response. To make the question mandatory, include the attribute platform="qualtrics", which will hide the Next button and use the Phonic Submit button to advance to the next page.
<phonic-mic
surveyid="YOUR-SURVEY-ID"
questionid="YOUR-QUESTION-ID"
responseid="${e://Field/ResponseID}"
platform="qualtrics">
</phonic-mic>