Embed Storyline 360 project in Canvas using iframe

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