In today’s post, I’ll show you how you can embed your published Storyline and Captivate courses into any webpage using iframes, which is a very simple HTML code. If you can copy and paste, you can do this, I promise!
You encounter iframes all the time without knowing it. Iframes are just “frames” that feature content hosted elsewhere. They are especially useful when featuring elearning content. Ever embed a YouTube video into another webpage? That was probably an iframe.
Iframes will work with self-hosted WordPress sites (like this site), or with Weebly, or Wix, or WordPress.com, or anyplace else where you can create free or cheap websites. It may not work in closed systems, like Learning Management Systems that require a login and discourage embedding outside content.
Use iframes when you want a published course to be part of a larger webpage. You’ll often want to do this when you are creating your elearning portfolio, for instance. It’s really nice to embed your courses so users can instantly interact with them, rather than giving them a link and forcing them to open it in a new tab or window.
You do have to have your elearning content hosted somewhere (I strongly recommend Google Cloud Storage (free!), and even offer directions on how to set it up.)
When you do embed your courses into a page, I strongly suggest providing an additional link to the full-screen version of the course, so that users have the option to get the full experience.
Here’s an example of an iframe showcasing my Keyword Generator, created with Storyline, followed by a link to view the course full-screen:
Ready? Directions below!
Where are your courses hosted?
Your courses need to live somewhere. The trouble with free websites like Weebly, Wix, or WordPress.com is that they allow you to put all the photos you want onto your site, but you can’t load your Storyline or Captivate courses onto their servers.
The solution – free hosting like Google Cloud Storage! Once you get your courses hosted and they’re available to the public, make note of the URL of the course you want to embed.
Behold the iframe
An iframe is just very simple HTML code that you can use to embed your course into another webpage. Here’s the code:
<iframe src=”http://yourURLhere.com”></iframe>
You can customize your iframe by resizing it with the width and height attributes (numbers are in pixels):
<iframe src=”http://yourURLhere.com” width=500 height=400></iframe>
All you have to do is replace the URL of the iframe code with your own URL, then go into the HTML editing mode of your webpage.
In WordPress, this is the Text tab.
In Weebly, this is the Embed Code element.
You may also see a symbol in your button toolbar like </> – this usually opens HTML editing mode.
Paste the iframe code, with your own URL inserted, into the HTML code of your webpage. Be sure to paste it in the page where you want it to appear. To ensure you get it in the right spot, you may want to type EMBEDHERE into the text view, then when you open the HTML editing mode, paste the iframe code over EMBEDHERE.
These directions as a video
Watch me embed a Storyline course from Google Cloud Storage into an iframe in my blog post: