Community Groups are officially here!
We've released Groups, a new feature that enables us to connect community members of similar industries and interests in a shared, private space. You can check out all of the details here, including information about who can join, how to join, and what Groups are currently offered. Please leave your feedback through this Community Groups Feedback Survey.

Loading a survey with an embedded I-Frame.

Nuhbe
Nuhbe montrealCommunity Member Qubie ✭
edited April 2020 in Integrations

Hello,

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


Qualtrics.SurveyEngine.addOnload(function()

{

jQuery("#Header").html('<iframe allowfullscreen="" src="INSERT WEB URL HERE" style="width:100%;height:100vh;"></iframe>');

});


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


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:


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?

Best Answer

  • TJUH_Kai
    TJUH_Kai Philadelphia, PACommunity Member, Qualtrics Brand Admin Guru ✭✭
    Accepted Answer

    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:
    1. Click to the HTML view

    Just 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 <div id="IFrameDiv"></div>, then in your jQuery code, you need to update to:

    jQuery("#IFrameDiv").html('<iframe allowfullscreen="" src="INSERT WEB URL HERE" style="width:100%;height:100vh;"></iframe>');
    

    the # sign before the IFrameDiv is a way to tell jQuery that it's looking for the id attribute's value.

Answers

  • TJUH_Kai
    TJUH_Kai Philadelphia, PACommunity Member, Qualtrics Brand Admin Guru ✭✭

    I think the iframe is set at where the "#Header" is.

    I would suggest you to create a <div id="Header"></div> 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 <div id="Header"></div> above the "1. How satisfy are you with your experience?"

  • Nuhbe
    Nuhbe montrealCommunity Member Qubie ✭

    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 <div id="Header"></div> 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.

  • Nuhbe
    Nuhbe montrealCommunity Member Qubie ✭

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