Sometimes the user would like to paste in some code in a discussion or a wiki page that embeds an interactive element. Canvas (rightly) restricts code pasted into text entry boxes. But these interactive elements can still be used.
Canvas does allow the use of the html IFRAME element.
In this example, I want to show the National Academies Press widget for one of their books.
First, I need to go to the National Academies Press website and get the embed code. Since Canvas will not allow me to paste it directly, I used a text editor and saved the embed code in a text file (named iframestest.html in this example). I then uploaded that text file into my public Dropbox folder.
I need the url (Internet address) for this file.
Now, I need to enter the iframe information in Canvas. The IFRAME element needs to start with <iframe src=” then the url, width and height and ends with >. The closing </iframe> tag is also needed. Syntax is important so notice all the quotation marks and angle symbols! The example widget was small so a width = 200 pixels and a height of 300 pixels worked. You might notice that I changed the http:// to https://. Other widgets would be different sizes.
<iframe src="https://dl.dropbox.com/u/419723/code/iframetest.html"
width="200" height="300"></iframe>
This screen shot shows the iframe element entered in Canvas. For this to work, you must enter the iframe code in the html entry mode rather than the WYSIWYG mode.
This is what the iframe looks like in the WYSIWYG mode of the editor.
