Canvas Tips: Embedding a Randomizer in Canvas

---

My Favorite Canvas Tips

---

Canvas does not let you just copy-and-paste javascript into a Page, which is very frustrating compared to the way I can just copy-and-paste javsacripts into a blog post.

The way to get around that is for the javascript to sit inside an HTML page (a webpage), which you can then insert into a Canvas Page using something called "iframe" which is used for all kinds of embedding. If you have ever embedded a YouTube video, you've used iframe to do that. In the same way that YouTube gives you the iframe embed code to use, I've prepared iframe code for you to use to embed any of my javascript randomizers in Canvas. You can see all the randomizers here: Laura's Widget Warehouse.

So, for example, if you want to use the random Mindset Cats, here is the iframe code:

<iframe src="https://widgets.lauragibbs.net/canvas/gmcatsjava.html" width="450" height="800"></iframe>

As you can see, with the iframe you have to specify the width and height of the iframe space, which is not optimal for layout, but it works.

So, if you want to add those Cats to any Canvas Page, or a Discussion Broad prompt, anywhere you see the Canvas editor, you can do that by clicking on the "insert media" button (bottom row, second from left), and then pasting the iframe code into the embed tab of that media dialogue box:

Presto: CATS!

This is the same process you can use for any kind of embedding where the website gives you an iframe type of embedding code, like NPR for example. You can include an audio NPR story in the same way; here's how you can see the iframe embed code for an NPR piece: Manhattan is a Lenape Word.

And here it is embedded in the blog post; you can embed just the same way in a Canvas Page!