Embed Storyline 360 project in Canvas using iframe

Nov 09, 2020

I am trying to embed a Storyline 360 project into a Canvas page using an iframe. The project does not need to be linked to the gradebook or tracked for completion. I've tried to embed this project into my Canvas page and it does not load correctly, there is no audio and it looks like there is a grey filter over the slides. Can you please tell me: 1) how you publish files for Canvas if they do not need to be tracked (i.e. web publish vs. LMS publish), and 2) what iframe embed code you use. Thanks for your help. 

6 Replies
Vincent Scoma

Hi Amanda,

Thank you for reaching out! 

While I am not sure about the exact steps to iframe your course into Canvas, I did come across a similar post on publishing Storyline courses. You will want to use the Publish for LMS option when uploading the course. For more details about this workflow, here is the post I am referring to: 

I hope that others in the community can also share what has worked for them! 

Math Notermans

Hi Amanda,

For me the following steps work best.

-Publish as Web ( HTML5 Only, Modern player... a transparant one without anything )
-Save / Download as Zip
-In your Canvas Sandbox go to Files
-Create a new Folder where and how wanted
-Upload ( Drag or choose Upload ) the ZIP into the folder and 'Expand it' upon upload
-When done uploading and unpacking go to the story.html and open it.
-If fine it runs and you see the first page/slide of your course.
-Copy the url you see in the browserbar... especially the number at the end is important.
- A test i just did this is the url:
https://tilburguniversity.instructure.com/courses/7608/files/folder/test?preview=756781
- Close the coursepage
- Make ( or go to ) a page on which you want your course to run

As you can add quite some Html elements and other stuff on the page this all depends on your specific choice and setup. Canvas uses Bootstrap3 and Flexboxes so you can quite precisely layout the page for Desktops and mobiles.

Whatever your choice is...you need an iframe on the page to link to the above url in the files.

- Add the code to add your iframe. Here is as i use it.

<div class="col-xs-6 col-sm-3">
<div class="d-block mb-4 h-100"><iframe class="img-fluid img-thumbnail ef-file-preview-frame ef-file-preview-frame-html attachment-html-iframe&gt;&lt;/iframe&gt;" style="width: 280px; height: 280px; background-color: #ff0000; overflow: hidden;" src="https://tilburguniversity.instructure.com/courses/7608/files/756781/download" data-api-endpoint="https://tilburguniversity.instructure.com/api/v1/courses/7608/files/756781" data-api-returntype="File"></iframe></div>
<div>

Only things i need to change is the number ( 756781 ) of the files i added the Storyline zip too..
And my Storyline file is nicely embedded into my page.

Kind regards,
Math