Note: Some browsers such as Firefox and Chrome create security restrictions as noted in our general browsers lesson. If you visit a page in your Canvas course with an embedded iFrame that is linked to insecure content, you may see a shield icon in the browser address bar. You can choose to override the security restriction and display the content anyway by clicking the shield icon and then choosing Disable Protection on This Page or Load unsafe script.
Open Pages
In Course Navigation, click the Pages link.
View Pages
Pages is designed to open to the front page for the course, if there is a front page selected. To select a page from the Pages Index, click the View All Pages button.
Add Page
Click the Add Page button.
Enter Page Title
Enter the name of the new page. You may decide to copy and paste the exact title of the Canvas Guides lesson.
Switch Views
Click the HTML Editor icon.
Secure Content
If you wish to prevent web browsers from blocking mixed secure and non-secure content or creating pop-up warnings, you can link to Canvas Guide lessons using secure content.
In regular (unsecured) guide links, the URL begins with http://guides.instructure.com. However, secure content is created by replacing that part of the URL with https://guides.instructure.com.
Copy Canvas Guides URL
Copy the URL of the Canvas Guide you wish to embed.
Enter HTTPS iFrame Embed Code (Secure)
To paste a Canvas Guide as a secure iFrame, replace the beginning of the URL, http://guides.instructure.com [1], with https://guides.instructure.com [2].
<p><iframe src="https://guides.instructure.com/m/67952/l/720334"
width="600" height="3200" style="overflow: hidden;"></iframe></p>
Note: https://guides.instructure.com replaces http://guides.instructure.com/ but everything else in the code snippet stays the same.
Non-Secure Content
Non-secure content may create pop-up warnings. You can link to Canvas Guide lessons using secure content, see the Secure Content steps.
In (unsecured) guide links, the URL begins with http://guides.instructure.com. However, secure content is created by replacing that part of the URL with https://guides.instructure.com.
Copy Canvas Guides URL
Copy the URL of the Canvas Guide you wish to embed.
Enter HTTP iFrame Embed Code (Non-Secure)
To paste a Canvas Guide as an iFrame, copy the iFrame code snippet below, replacing the text CANVASURL with the exact URL of the lesson you wish to embed.
<p><iframe src="CANVASURL-?e=4" width="600" height="3200"
style="overflow: hidden;"></iframe></p>
For instance, if you wanted to embed the lesson titled "Where can I find a list of Canvas terminology?," you would replace the URL as follows:
<p><iframe src="http://guides.instructure.com/m/67952/l/720334-?e=4"
width="600" height="3200" style="overflow: hidden;"></iframe></p>
Save and Publish
If you are ready to publish your page, click the Save & Publish button [1]. If you want to create a draft of your page, click the Save button [2].
Note: If you try to navigate away from a page without saving, you will generate a pop-up warning.
Publish Page
When your page is saved in a draft state, you can return to the page and publish it at any time by clicking the Publish button [1]. The button will change from gray to green [2].
View iFrame Borders and Scrollbars
Depending on the browser you use, you may see some borders and scrollbars around the iFrame area, which is normal.
Adjust iFrame Height
After you view your page, the iFrame may be too long, or not long enough, for the length of the Canvas Guide lesson. To change the height or width, click the Edit button.
Switch Views
Click the HTML Editor icon.
Adjust iFrame Height
Change the number in the height or width area of the embed code to adjust the height or width (in pixels). Then click the Save button at the bottom of the page.
Note: You can also change e=4 to e=3 to expand the lesson in the browser window.
View iFrame of Canvas Guide Lesson
When you open the page in Canvas, it may take a moment to load the content. For a split second, you may see some of the formatting from the original Canvas Guides site. You may need to refresh the page. Once it loads, it will look great!
