/
Resizing the iframe for Qualtrics Surveys

Resizing the iframe for Qualtrics Surveys

The instructions below are for integration activities within Qualtrics.

Qualtrics

  • Open your Qualtrics survey.

  • In the left navigation, click the Survey Options icon:

    image-20260311-151128.png

  • Then, choose General from the Options menu:

    image-20260311-151349.png

     

  • Scroll down until you see “New Survey Taking Experience” and take note if the button is toggled to On or Off.

    image-20260311-152128.png

     

  • Now, click the Look and Feel icon within the left navigation:

    image-20260311-152404.png

     

  • Click general, then scroll down to Header, and click edit:

    image-20260311-152532.png
    image-20260311-152651.png

     

  • Click the “source” button in the toolbar:

    image-20260311-152852.png

  • Paste one of the following code snippets into the text area:

    • If the “New Survey Taking Experience” setting is ON:

      • <script type="module" src="https://terracotta-js.s3.us-east-2.amazonaws.com/integrations.resize.qualtrics.js"></script>

    • If the “New Survey Taking Experience” setting is OFF:

      • <script type="text/javascript" src="https://terracotta-js.s3.us-east-2.amazonaws.com/integrations.resize.qualtrics.legacy.js"></script>

  • Click Save, then click Apply.

  • For both, return to Look and Feel via the left navigation, and then click Style:

    image-20260311-153434.png

  • Scroll to Custom CSS, and click “edit”:

    image-20260311-153614.png

  • Paste this code snippet into the editor: html{height:fit-content;}. Click Save, then Apply.

You must republish your survey in order for these changes to take effect.