Viewing non-SCORM Articulate Storyline modules in an iFrame in Canvas

Articulate® Storyline modules may be published as SCORM objects or non-SCORM (web) objects. SCORM objects are discussed elsewhere. Currently by default, non-SCORM Storyline objects open in a small window in Canvas, with the option to download the .story file (which won’t do anything if downloaded, as all the supporting files will be missing). If you want to cause the non-SCORM object to open in an iFrame, all that is required is a simple tweak to the HTML code on the relevant Canvas Page.

  1. Create a Canvas Page from which to display your Storyline object.
  2. From your newly created Page, upload the zipped Storyline (non-SCORM) object to the Files repository in Canvas. When asked if you want Canvas to Extract the files from the archive, choose “Extract.”
  3. Place your cursor in the Rich Content Editor, then go to the Files repository and look for the “story_html5.html” file. Hyperlink to the page you are creating by clicking on it.


4. Click on the HTML editor (not Rich Content Editor).
5. Copy and make note of the link after href= but before the ? in the link. You’ll need this in a moment.


6. Delete the complete HTML text showing on the Page, and replace with the following code:

<p><iframe src=”URL LINK” width=”980″ height=”658″ ></iframe></p>

7. Paste the previously copied URL into “URL LINK” src=”________” (remember the quotes – these are important).


8. So the final result should look something like this: 

9. Hit save!

10. Your Storyline object will open in an iFrame sized at 980 x 658 pixels!

– Joseph Anthony, PhD, and Kitty Wang, Canvas Tech Rover