Opening a webpage within Canvas

[rfrankel]

Is there a way to open a webpage within Canvas, as opposed to it launching in a new tab?

We have some course pages in Google Sites and we are trying to copy over the material into Canvas. In the meantime, I figured we can at least link to the pages from within Canvas, but I want it to open in the Canvas frame.

Also, as I mentioned in a previous post, if anyone knows of a Canvas freelancer to help move course materials into Canvas, please let me know.

Thanks

[kona · Accepted solution]

Yes, you can do this either directly from the Modules - it's actually the default when you add an external URL - see How do I link to an external URL in Modules?

OR, if you want to embed your page directly in a Canvas page you can use iFrames. I'm not an expert at all (actually did it myself for the first time checking this), but it was pretty easy to do.

• I went to the security settings for my google site and allowed embedding - see the following Google Sites - Allow Site Embedding (in iframes) - Intranets, Websites, Google Sites, Apps & Office ...
• I then went to the page I wanted to add it to in Canvas, clicked the HTML editor and entered the following code: <iframe src="Google Sites URL goes here" width="100%" height="600"></iframe>
• I then clicked the save button and my Google site was there and working perfectly.

[kona]

In regards to moving course material over you may want to post something over in the Instructional Designers​ group! They're a pretty amazing group!

[Stef_retired]

Or perhaps,  @rfrankel  , you could post your request for a freelancer in the I Heart Pandas​ Jobs Board ?

[awilliams]

 @rfrankel ​, you should check out stefaniesanders​ great blog post about Using Google Docs for dynamic Canvas content​. Don't let the title fool you, much of the information will still apply to your situation and the conversation surrounding that blog post is pretty incredible. If that doesn't help let us know and we can help you out from wherever you are at that point.

[bgibson]

As I've mentioned elsewhere, you can embed a WordPress site using an iframe and it displays very well.  I switched to the "Scratchpad" Theme on a WordPress.com site and it loads within a Canvas page almost perfectly.  WordPress provides a clean look, and all the navigation works.  WP themes are also dumb down automatically based upon the device on which you are viewing it, so both the WP pages and the Canvas interface looks good on a PC, tablet, or smartphone.

[dramos]

I have a somewhat related question. I have created a Canvas page inside a course, then uploaded a simple html page (a folder with an index and image with internal Canvas links) in a Canvas file folder. I then used an iframe to launch the webpage within the page. The html page launches but not by itself as intended, instead it is contained within a Canvas page for courses with all of the menus and such. Here is the iframe code.

<p><iframe src="/courses/3127/files/178570/download?wrap=1" width="100%" height="760" data-api-endpoint="https://tecglobal.instructure.com/api/v1/courses/3127/files/178570" data-api-returntype="File"></iframe></p>

I am a newbie to html and to Canvas, and would appreciate any help or direction. Thanks.

[dramos]

By trial and error I got the desired outcome by entering   /files/178570/download   into the following iframe template

<p><iframe style="display: block; margin-left: auto; margin-right: auto;" src="ENTERLINKHERE" width="100%" height="760"></iframe></p>

After saving, Canvas generated the following iframe:

<p><iframe style="display: block; margin-left: auto; margin-right: auto;" src="/courses/3127/files/178570/download" width="100%" height="760" data-api-endpoint="https://company.com/api/v1/courses/3127/files/178570" data-api-returntype="File"></iframe></p>

Hope I didn't waste anyone's time. Thanks.