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

qualtrics_integration

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.

phonic_question_screen

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. 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.

Screen Shot 2021-05-11 at 1.46.34 PM

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