Embedding Rise courses on websites using iFrame

Jan 19, 2021

Hello,

We are wanting to share some of our courses on our website so that anyone can access them. We have exported the courses for web and embedded them using an iframe. However, because the course lessons are different lengths, our web developers have had to set the height of the page to fit the longest page. This means that some pages have a very large amount of blank white space. In most cases I can get around this by inserting a continue button. However, I cannot insert a continue button on a quiz results slide. This means that users will have to scroll waaaaaaay down through all the blank space (which they are unlikely to realise) in order to get to the automated continue button that allows them to reach the next page.

Ideally, we'd like each lesson height to automatically scale so that it fits the size of each lesson. We've tried a few solutions from here: https://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using

Nothing has worked so far. Has anyone else had this issue and figured out how to solve it?

The other option is to use a scroll bar for the iframe but as there is already one on our website, this is not a good solution.

Thank you.

Ashley

2 Replies

Alyssa Gomez
Staff

over 3 years ago01/19/21 at 9:26 pm (UTC)

Hey Ashley! It sounds like you've already seen our recommendations for embedding published Rise 360 content on a web page, but I wanted to share it just in case.

I'll also open the floor to others in the community who may have additional tips to share with you!

Steve Mansell

1 month ago06/25/24 at 8:15 am (UTC)

We had a number of clients with similar requirements, and for a couple of years we were able to insert code into the top-level RISE html page dynamically that made a few tweaks to the RISE content and also signaled to our wrapper page to let it know how large to make the IFRAME.

Sadly, this stopped working about 6 months ago... with page content not resizing correctly, or jumping around as it was rendered. As a result, we've now successfully developed another approach that inserts the required headers and footers from our site into the RISE content, thus allowing the content to appear as if it is part of the client's site without needing to use an IFRAME.

I won't try to paste content into this editor, but essentially:

We build a collection of all "container" elements in RISE (IDs are "cover" and "page_wrap")
Within each of these we look for the element with ID "cover__header", or "page__header" and pad it sufficiently for our header.
We insert our header as the first child of the container from step 1
We insert our footer as the last child of the container from step 1

This works a treat, but remember that any hyperlinks need to target _top as the content is rendered within an IFRAME anyway - if you're using a SCORM wrapper, that is!

This approach works well with the newer-style RISE content that uses floating controls for next/previous lesson - but you need to ensure your headers and footers don't have similar coloured backgrounds as they can "blend in".