How to Embed a Website into Canvas

We are able to embed most web pages into Canvas. There are exceptions to this that we’ll run across. For instance,  Adobe Spark Pages will not embed. (However, there is a workaround for that as we’ve added the Adobe Spark LTI to Canvas).  In time, we will discover other websites that do not work. Whether it is embeddable or not is in the control of the web-designer. However, the steps shown below in the video will work for the vast majority of websites.

The iframe editor that I used in the video below is here.

Why embed the website? Sometimes it is just easier for all parties involved if the material sits right in Canvas. Besides, it looks better than a link.

 

IORAD and Google/ Canvas Integrations

This post serves two purposes.

  1. We want to feature IORAD. If you want to make a simple step by step interactive instructions for students as seen below, use the IORAD extension. You’ll see that you will actually click through the steps. Is there an easier way to show how to do something? click “Start” below.
  2. Our other purpose is to show how easy it is to embed a Google Doc right into Canvas. Alex Pearson also posted a video on how to do this as well.

 

8 STEPS

 


1

In the RCE, Go to far right of the tool bar and click the three dots 

Step 1 image


2

Click the plug in icon

Step 2 image


3

Scroll down and click Google Drive

Step 3 image


4

This now looks a lot like the Google interface. Click Select file

Step 4 image


5

choose and click the google doc you wish to embed in Canvas.

Step 5 image


6

Click Add

Step 6 image


7

Click Attach

Step 7 image


8

Scroll down and that’s it. You’re done.

Step 8 image

Here’s an interactive tutorial

https://www.iorad.com/player/1678064/How-to-Add-a-Google-Doc-to-new-Rich-Content-Editor

 

To make your own IORAD, get the Chrome Extension. (and watch the tutorial)