How do I embed a guide in a Canvas course?

In the community, you can copy an embed code of a guide to paste in your Canvas course page.

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. 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: You can only embed guides in Canvas courses. Embedding on other sites is not supported.

Copy Embed Code in Community

In the community, at the end of the guide, click the Embed this Guide button [1].

To copy the embed code, click the Copy Code button [2].

Note: You can only embed guides in Canvas courses. Embedding on other sites is not supported.

Open Pages

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

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 guide.

Switch Views

Click the HTML Editor icon.

Enter Embed Code

Paste the previously copied embed code into the Rich Content Editor.

Example of embed code:

<div style="overflow: hidden;">
<iframe style="width: 100%; height: 800px; margin-top: -260px;" src="CanvasGuideURL"></iframe>
</div>

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 changes from gray to green [2].

View Embedded Guide

When you open the page in Canvas, it may take a moment to load the content.