Embed Qualtrics survey via iframe WITH content responsive height

Feb 11, 2021

I'm trying to embed an Qualtrics survey via iframe (which is easy to do). What's not so easy is getting the iframe to be responsive to the survey content length (which changes). I can manually adjust the height so that the survey fits, but when the survey is submitted text is displayed that is much shorter in length, requiring the user to scroll a whole heck of a lot to continue through the content. I'd like to iframe to adjust when the survey is submitted/the content within the iframe shortens. 

One solution I've been trying involves adding the id parent_frame to the embed code in Rise. Looks like: |<iframe src=" https://surveyurl.com" id="parent-iframe"></iframe>|

I get a message that the code is not a legit iframe code. This option would also require me to add the java below to the Qualtrics survey. 

|<script type="text/javascript">
$(document).ready(function() {
$("#parent-iframe", window.parent.document).height(document.body.scrollHeight);
});
</script>|

Any thoughts on how best to accomplish this?

Thank you!

1 Reply