Loading a survey with an embedded I-Frame. | XM Community
Skip to main content

Hello,
I recently created a survey with an embedded I-frame using the following code:

Qualtrics.SurveyEngine.addOnload(function()
{
jQuery("#Header").html('');
});

See print-screen below to check how I set it up in my block:
Code setup.jpg

The I-Frame works just fine when I'm using the Preview functionality in Qualtrics, but I have an issue when participants load the page using an anonymous link.
In the block where the I-frame is embedded, the page will load at the wrong "hight": it will load directly at the first question, rather than loading at the very top of the page. See the print-screen below:
Iframe load.JPG
This is exactly how the page will load: not at the top, not at the bottom; somewhat in the middle, where the questions are.
The way I setup my block, I was expecting the "Lets get started" section to appear on top of the I-frame section, but it's not the case.
Is there a way to make the page load at the top?



I think the iframe is set at where the "#Header" is.
I would suggest you to create a

in Question 1's title, where you put "1. How satisfy are you with your experience?", edit that, go to HTML view, and put the above the "1. How satisfy are you with your experience?"

Hello TJUH_Kai , and thank you for replying.
Just so everyone know, I am very new to Qualtrics, and don't know much about coding HTML.
When you say create a

in Question 1's title, I'm not sure what it is or what you mean..., and I'm not sure how to go about it.

ok, let me give you step by step instruction.

  1. You know how to modify the "1. How satisfied are you with your experience?" string, right? Click on that and you can edit it.

  2. Then you will see this view:

  3. edit_title.jpgClick to the HTML view

html_title.jpgJust remember the value of id "Header" should match the "#Header" in your JavaScript. That's how jQuery find the matching element in the HTML. If you want to rename it to
, then in your jQuery code, you need to update to:
jQuery("#IFrameDiv").html('');
the # sign before the IFrameDiv is a way to tell jQuery that it's looking for the id attribute's value.

Thank you very much TJUH_Kai for the crash course! It works perfectly now.

Leave a Reply


Terms & Conditions