Embed a Guides lesson inside a Canvas Course

Published: 5 October, 2021
Share:

Many of our clients are using Canvas Guides to build their own training modules inside Canvas. We think this is a great idea since our product is changing so quickly. By embedding lessons in your course with iFrames, you can be sure that our most recent documentation is available to your learners. You can also link to the Guides in Modules.

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!

0 Comments

Leave us your comments

Related Information

Assign an assignment to a course section

When creating or editing an assignment, you can assign an assignment to a specific course section. Y...

How does Canvas work as a supplement to face-to-face courses?

Canvas provides tools that supplement face-to-face courses by providing additional information onlin...

Accept an invitation to join a Canvas course as an instructor

If you are using Canvas through your institution, you will most likely already have a Canvas account...