Embedding a Qualtrics survey in another site

Qualtrics is used widely throughout academia to administer surveys and gather data. It is easy to set up surveys, which automatically look good and the data is stored reliably and is easily exportable.  And it turns out that you can embed Qualtrics surveys in your own web pages to gather data - so when I was faced with a task of recreating a 45 minute series of questionnaires for an online study, I decided to put this to the test.  

5 main benefits of using Qualtrics

  1. No mistakes in storage of data
  2. Can have non coders easily edit questions
  3. Advanced options such as conditional logic, and required questions are all taken care of
  4. No need to build separate infrastructure for accessing data
  5. Less effort needed to style questionnaire

How is it done?

It's very easy, simply add an iframe element in the website with the url pointing to the survey's anonymous link:

<iframe src="https://universityofsussex.eu.qualtrics.com/jfe/form/SV_xxxxxx" 
    title="My questionnaire">
</iframe>

This works amazingly well however you will need to use CSS to adjust the size of the frame. Qualtrics will resize it's elements but it's best to give it as much space as possible.

How do I get rid of the 'Powered by Qualtrics logo'?

This annoying little logo pops up, but you can use a bit of jQuery to remove it (jQuery is served in the Qualtrics iframe, so can be used). Note that qualtrics recommend not removing it, but it doesn't seem to be against their T&Cs. Simply add following jQuery snippet to the header of your survey so it appears on every page. You can edit the header by going to the 'Look and Feel' section of the Qualtrics survey.

<script type="text/javascript">
    Qualtrics.SurveyEngine.addOnReady(function() {
         jQuery('#Plug').attr('style', 'display:none !important');
    });
</script>

How do I link the survey data with the user on my app?

If you need to link the response to the survey with something on your main site, you can do it two ways:

  1. Send in an ID via the URL parameters and store it as a variable in qualtrics
  2. Send the Qualtrics response ID back to your app

I actually decided to do both, since it wasn't apparent to me which would be best for later merging the datafiles.

Setting an ID on Qualtircs via URL parameters

This is as simple as adding ?my_id=xxxx to your URL in the iframe above. Then in Qualtrics, go to your survey, then 'Survey Flow' and add an 'Embedded Data' element and set the name as 'my_id' (or whatever you parameter you use. Do not set a value for this element and you will see it says 'Value will be set from Panel or URL'. Move this new element to the beginning of the survey and it will cause the value of my_id to be stored as a separate variable with the response data.

Sending Qualtrics response ID back

There are probably a few ways to do this, but I just created a little end point on my application which takes an ID, and the Qualtrics response ID from the URL parameters (e.g. www.example.com/qualtrics_response_id.php?my_id=xxxxx&qualtrics_id=xxxxxx). The end point checks the id matches an existing id (the ids long random strings and so are hard to guess) and if so stores the Qualtrics id alongside. It's then a case of getting Qualtrics to make a request. I just added some javascript to the first question and used Qualtric's functionality to pipe in the response ID value:

Qualtrics.SurveyEngine.addOnReady(function() {
    var myID ="${e://Field/my_id}";
    var responseID= "${e://Field/ResponseID}";
    $.ajax('http://www.example.com?my_id=' + myID + '&qualtrics_id=' + responseID);
});

Allowing respondents to continue/retake survey after exiting

If you store a respondent's Qualtrics response ID, you can now add it to the URL string with the parameter ?Q_R= to allow retaking of the survey. When they log back in, the existing questions they filled will be the same. Very handy for 45 minute long series of questionnaires!

Summary

Hopefully this is useful to someone out there, it would normally take me a very small amount of time to set up now, so if you need any help feel free to give me a shout!