How Do I Integrate With Qualtrics?

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 4 audio questions have been added.

Screen Shot 2021-10-06 at 4.19.18 PM

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/615e047e0580017f951a3718/questions/615e0486cffa236759ee23c2

Here 615e047e0580017f951a3718 is the survey ID and 615e0486cffa236759ee23c2 is the question ID.

Screen Shot 2021-10-06 at 4.23.00 PM

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>

Screen Shot 2021-07-20 at 4.03.05 PM

 

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.

Screen Shot 2021-10-07 at 11.15.58 AMIf 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.

Screen Shot 2021-10-07 at 11.15.07 AM

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> 

See what others say about our Qualtrics integration:

Phonic reviews sourced by G2