How do I embed a Guides lesson inside a Canvas course?

Document created by Canvas Doc Team Employee on Apr 19, 2017Last modified by Canvas Doc Team Employee on Sep 15, 2017
Version 13Show Document
  • View in full screen mode

The existing community (guides.canvaslms.com) doesn't allow embedding.

Content is available for embedding at guides.instructure.com; however, this site will be discontinued at a future date. For referencing content, consider linking lessons from the community into your course content.

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

Open Pages

In Course Navigation, click the Pages link.

View Pages

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

Add Page

Click the Add Page button.

Enter Page Title

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

Switch Views

Click the HTML Editor link.

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 Canvas Guides URL

Copy the URL of the Canvas Guide you wish to embed.

Enter HTTPS iFrame Embed Code (Secure)

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 Canvas Guides URL

Copy the URL of the Canvas Guide you wish to embed.

Enter HTTP iFrame Embed Code (Non-Secure)

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

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

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

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

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

Switch Views

Click the HTML Editor link.

Adjust iFrame Height

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

  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!

You are here
Table of Contents > Introduction > How do I embed a Guides lesson inside a Canvas course?
2 people found this helpful

Attachments

    Outcomes