Content | Navigation |

Embed Qualtrics survey

Unauthenticated Qualtrics surveys from NDSU's Qualtrics instance can be embedded into web pages. Before you begin, double-check that it makes sense to embed the Qualtrics "form" in your CMS page rather than link to the survey. Multi-page surveys often do not make sense within the context of a department webpage, whereas a survey that just looks like a form is suited to being embedded within a department page. Need help getting started using Qualtrics?

Note: Surveys that require NDSU authentication can not be embedded into any web page. You must link to the survey in that case.

You can embed a default survey as-is, but modifying the survey to use a plain white theme and adding a snippet of script will make the survey appear as though it is part of the page. Here's how:

  1. Log in to Qualtrics
  2. Edit the survey you plan to embed
  3. Click Look & Feel
  4. Click Theme North Dakota State University tab
  5. Click the Blank theme box
  6. Click the General tab
  7. Click the edit link under the Header field
  8. Click the Source WYSIWYG button
  9. Paste in the JavaScript code snippet without modification
  10. Click Save twice to get back to the main survey edit page
  11. Click the Distributions tab
  12. Click the +Distribute Survey button
  13. Click the Get a single reusable link button
  14. Copy the provided link (looks like
     https://ndstate.co1.qualtrics.com/jfe/form/FORM_ID )
  15. Log in to CMS
  16. Create a new Qualtrics content element (Form > Qualtrics)
  17. Paste the link address from step #13 into the Form URL field
  18. Save and close; publish as usual

Code snippet

Copy the following code in its entirety, without modification where prompted in step 8 (above). If you don't include it in your Qualtrics survey, the survey frame will not be able to automatically scale to the size of the survey and visitors may need to scroll to see all of the survey fields.

<script type="text/javascript">
Qualtrics.SurveyEngine.addOnload(function() {
    // if not loaded in a frame, no work needed
    try {
        if ( top.document.domain != self.document.domain ) {
            // nothing is needed (action happens on exception from trying to access cross-domain parent)
        }
    }
    catch (e) {
        var domain = '';
        var referrerDomain = document.referrer.split('/')[2];

        // allow use on the production and preview domains (only)
        if (referrerDomain == 'workspaces.ndsu.edu') {
            domain = 'https://workspaces.ndsu.edu';
        }
        else if (referrerDomain == 'www.ndsu.edu') {
            domain = 'https://www.ndsu.edu';
        }


        if (domain != '') {
            // on allowed domains, send a (frame height) message on a 500ms interval
            var intervalVar = setInterval(function() {
                window.top.postMessage(document.body.scrollHeight, domain);
            }, 500);
        }
    }
});

Qualtrics.SurveyEngine.addOnReady(function() {
});

Qualtrics.SurveyEngine.addOnUnload(function() {
    if (typeof intervalVar !== 'undefined') {
        clearInterval(intervalVar);
    }
});
</script>

Example form


Student Focused. Land Grant. Research University.

Follow NDSU
  • Facebook
  • Twitter
  • RSS
  • Google Maps

North Dakota State University
IT Help Desk: +1 (701) 231-8685
Physical address: Quentin Burdick Building 206, 1320 Albrecht Blvd., Fargo, ND 58105
Mailing address: NDSU Dept. 4530 / PO Box 6050 / Fargo, ND 58108-6050
Page manager: Content Management System

Last Updated: Wednesday, July 29, 2020 10:52:32 AM
Privacy Statement