Using Google Docs for dynamic Canvas content

[Stef_retired]

If you create a document in Google Drive, you can click on File > Publish to the Web > Publish to generate a link or embed code. The embed code can be used anywhere in Canvas where the Rich Content Editor is available to you (switching views to the HTML Editor). Whatever changes you make in your Google Docs will automatically update in your Canvas course(s).

I've created a sample Google Doc. This is how the embed code for this document appears in Google Drive.

Notice that the embed code Google generates for the document does not incorporate width and height parameters. If you use this code "as is," the Canvas Rich Text Editor will automatically assign width and height parameters to the code, and your code will now look like this:

--but for almost every practical purpose, those parameters are too small. This is what this HTML generates on the finished Canvas page.

So after harvesting the code from Google, and before completing the edits to your Canvas page, you can add width and height parameters in the HTML view of the Rich Content Editor. I changed the width parameter to "100%" and the height parameter to "600" to create a page that looks like this:

Some users find that the easiest way to embed a Google Doc is to ignore the embed link from Google entirely. All a user needs to do is to obtain the share link (accessed by clicking in the upper right hand corner of the Google Doc view) to add an External URL to a Module. Paste the share link in and you'll have an editable Google Doc as long as the permissions you've set on the doc allow for it.

If you want to embed the link in a page or an assignment, use the following code in the HTML Editor:

<iframe src="SHARE LINK URL GOES HERE" width="100%" height="600"></iframe>

Use cases:

• Course content: A few years ago I was working with a department chair to co-design two courses that would be taught in over a hundred online, hybrid/blended, and face-to-face sections. He wanted to ensure that the course content across all of those sections was tightly controlled. We decided to use Google Docs to create the content that would be delivered in Canvas. Only the department chair has privileges for the content in Google Drive. We created courses that embedded dozens of Google Docs in Canvas Pages, Assignments, and Modules. The department chair assumes ongoing responsibility for notifying his faculty members if and when he makes changes to the master content.
• Create an editable spreadsheet with the setting, "anyone with link" can edit, then add the share link of the Google sheet to a module as a URL item. This brings up the Google sheet inside of Canvas, in a frame as part of the module progression. If the same spreadsheet is embedded into a Canvas Page or Assignment using the HTML Editor view of the Rich Content Editor, even if the sheet is shared so that "anyone with link" can edit, students will only be able to view--not edit--the data. The Canvas Guide walks through the steps here: How do I embed a dynamic Google document into the Rich Content Editor?
• Create your syllabus as a Google Doc, paste its published HTML code into the Edit Syllabus Description HTML Editor view of the Rich Content Editor, and then if you ever make adjustments to that syllabus in Google Docs (changing dates, adding or subtracting readings, adjusting your grading scale) these changes will automatically update within Canvas.
• Post a collaborative document in Canvas--for example, a class-built glossary on a shared Google Doc. Paste its code into a content page and as students update the Doc, the page will update.
• Use Google Forms to generate a survey. I recently created a simple, two-question form that polled my course participants on their office hour preferences. The first question in the form had them select their names from a drop-down I populated in the form; the second question gave them a list of time slots from which to choose. You can send the form to your students as a link, or incorporate it into a module as a URL, or harvest the embed code and embed it in a page--whichever presentation modality works best with your course delivery.
• Suggest your own use cases!

I'm including links to the Google Docs editors Help Center and the Publish a document, spreadsheet, presentation, or drawing section of that help center for ready reference.

[Note: Need help with HTML? Read snugent​'s awesome blog, Rich Content Editor HTML Cheatsheet]

Thanks to  @clong , Deactivated user, Matt Nagel,  @aaron_bannasch , and sraleigh, among others, for their generous contributions to the body of knowledge from which I derived the resources for this blog. The terms and links used in this document are believed to be accurate as of April 23, 2015; of course, because of the dynamic nature of Canvas, terms can and will change, and I am counting upon the sharp eyes of my fellow community members to point out any anomalies as they transpire. Thanks to everyone for your contributions that make this a better resource.

[kona]

Wow! This is extremely helpful! Thank  you for sharing!

[G_Petruzella]

Yes stefaniesanders! I love this - it has so many useful applications - a couple I can think of:

1. Embed a Google Slide Show in the instructions for a complex Assignment, so that students get an automatic set of screenshots to walk them through the process.
2. Embed a Google Form when all you need is a quick "poll"-type response (until the Canvas Poll app gets more fully integrated, anyway... 🙂 .

[Chris_Hofer]

This is great information!  I'm going to bookmark it so I can reference it later if any of our faculty want to know how to do this!  Thanks Stefanie!!!

[u0291895]

Here is a course on using HTML and integrating Google Docs in pages. It's a year old, but hopefully still helpful.

Canvas and Google Drive/HTML

[Stef_retired]

u0291895, I have SO bookmarked that course! Thanks!

[awilliams]

With all the necessary disclaimers for using good design principles, most especially accessibility, I will add this same process can be used to embed webpages and an entire website hosted in Google Drive. This includes CSS, JS and assets. See Host webpages with Drive - Drive Help for more information.

[sraleigh]

stefaniesanders​: Thanks for posting this very useful information. I think most (all?) instances of RTEs say now say "HTML editor" instead of "Switch Views".

[Stef_retired]

Thank you so much, sraleigh for pointing that out. I've edited the blog to reflect that (it will now briefly disappear so it can be re-approved), and I've also added a disclaimer that the nomenclature is considered accurate as of 4/23/2015. Because of the dynamic nature of Canvas, the specific terms used in instructions for this or any task can become outdated quickly, so I'm hopeful that with the help of the community, we can keep these blogs and community-created documents up to date.

[tom_gibbons]

This is a great guide. I've been doing this for a while with forms, especially. I use embedded forms to gather immediate feedback on a content item or assignment, or as a quick way for students to request assignment topics from a list (I embed the viewable responses, too, so everyone can see what's left).

One thing that I do to offset the form content from the rest of the page is add a style="border: 1px solid black;" to the embed code and kick the width back to 99%.

I also like Google Slides (Presentations/whatever they're calling it now) for the easily-accessed table of contents in the embedded presenter.

I'm not sure how accessible all of this is for people using assistive technology, though. Anyone know how these frame-ins behave?

[rfrankel]

This is very helpful. Can the same concept be applied to Microsoft's OneDrive?

[Stef_retired]

 @rfrankel ​, I don't have access to Microsoft's OneDrive, so I'm not able to provide a solution that I've tested myself. I can direct you to this Microsoft how-to page: Embed Office documents and PDF files on a website.

Perhaps someone who has hands-on experience with OneDrive can weigh in on this.

[awilliams]

 @rfrankel ​, this worked fine when I tested it. With the doc open in OneDrive, click on the 3 horizontal dots in the top right of the toolbar, then click "Embed" to get the code. Then paste that in the html editor in your Canvas page and voila. This worked with docs and ppts but I couldn't find an embed option for an xls. Update: You can get the embed codes by right-clicking on the file from within OneDrive. This will also give the embed code for an xls.

I'm perplexed though, I was sure this sort of thing would be blocked by the browsers as "insecure content." Anyone know why it isn't?

[john_morris]

Nicely done! I started using this technique to provide updates in an online MBA capstone course that is project based. I have 5 students enrolled and each one has a unique project -- both in terms of objectives and scope -- the only thing that is consistent between them is schedule. They all have to be done at the end of the quarter and all have to submit a presentation to a graduate faculty committee followed by an oral exam. Project checkpoints are optional and final report out is mandatory. I was frustrated keeping everyone on the "same page" until I ran across this. Now, I have a Google Sheet embedded on the homepage for the course that is dynamically updated and -- without violating FERPA rules -- shows individual students when they are behind their classmates in terms of getting things scheduled. Also, by adding my graduate faculty committee as TAs on the course, they can see the "class dashboard" whenever they are curious.

[rfrankel]

Thanks stefaniesanders​ and Adam. I had actually tried it with OneDrive and it worked. I just wanted to be sure there wasn't some issue or reason to use Google Drive as opposed to OneDrive.

However, I did notice that Google Drive gives you the option to republish to keep the content dynamic. OneDrive doesn't seem to give the option and it seems you can only keep it dynamic.

[scottdennis]

One thing I love this hack for is when you want some users to access content via the LMS and other people to access the same content from outside the LMS.  For instance when I worked at the college we wanted the nursing students to be able to find info in their LMS course whereas the clinicians at the local hospital went straight to the google docs.

[mike4017]

I am new to Canvas and this community ----- the google drive integration looks great.   Quick question:  I assume that students are also capable of creating this same integration?    For instance lab data and other class information for groups...

[scottdennis]

Hello mike4017​

You can control in your course whether students are allowed to edit pages.  If they are allowed to, then, yes, they can employ this technique.

[awilliams]

mike4017​, Yep, they sure can. The most common place students have access to the Rich Text Editor is in discussions, and I just tested to confirm this works fine even in discussions. For pages, you can allow students to have edit rights on a page (See screen shot below), or you can create groups where they will already have the ability to create and edit to pages.

[BSS]

Thank you for all the helpful information. I just wanted to add that you can also change the dimensions of the iframe by going back to the Rich Content Editor and dragging the boundaries out to the size that you want. That's a little faster if you have something that you don't want to have scroll bars on.

[achiao]

This is great! Thank you.

You can also add Google items into a Module by using the "External URL" and pasting the google shared link. This iframes in the whole Google experience including the menu items. Want students to collaborate on a Google Slide Deck and stay in Canvas? You can use the External URL and paste the google shared link that allows students to view and edit! Want students to make a copy of the item into their own Google Folder and then work on their own copy? Use the External URL and paste a google shared link and instruct students to go to File and Make a Copy.

[awilliams]

Deactivated user​, what happens for you when you click on "Present" within that iframe? For me I just get a black screen.

[achiao]

Hi Adam. Unfortunately, the same happens to me too :smileycry: I refreshed and it went back to the iframed Google Slide Deck.

If you are planning to just present a Google Slide Deck, I recommend you use the method that Stefanie outlined with the embed code.

[Stef_retired]

Here are @rmurchshafer2 ​'s excellent directions on how to embed a sign-up sheet in a page using Google Sheets. He created a video that demonstrates the process: Embed interactive spreadsheet in Canvas - YouTube

[mike4017]

thanks very much to all that replied.....I am a little late in getting back into this discussion group....

[applem]

I followed the directions on embedding a Google sheet with an External URL, but cannot get it to work within the Canvas app. Students can view the sheet, but not edit it. You can click to open the sheet in Safari, but still cannot edit. If students access Canvas using the Chrome browser on the iPad, they have the ability to edit the shared sheet.

[GideonWilliams]

​Embedding from Google and Onedrive are lifesavers especially as editing changes can be done at source without having to remove the links. This works really well for items like powerpoints and embedded forms in Google. It also works brilliantly for class science practicals with embedded excel/Google spreadsheets.

MY concern is that many iframes are not good with responsive design so will not look the same on different devices. Has anyone checked with this?

I Use an awful lot of embedded resources in my work from different web2 sites. This curated list might be of some use to those looking for other features

Web2.0 Tools for Staff and Students | Scoop.it

[Stef_retired]

 @rfrankel , here's a link to snugent​'s comprehensive discussion of Embedding OneDrive Documents in Canvas .

[kmeeusen]

u0291895​:

I would love it if you could post your entire iFrame module into the Canvas Hacks Demo Course, or enroll me as a teacher in yours so that I can do it. I would promise not to muck anything up:smileysilly:

[u0291895]

Sure. I'm happy to add you, what's your email address?

Also, I added a link at the top of the course homepage so you can download it.

It's not a live course, it's just in my old online portfolio. (ignore the aesthetics of the course )

[u0291895]

 @tom_gibbons ​, that's a good question. While I haven't tested this, I found a teacher's website that recommends using Google Presentations. However, he doesn't mention the impact of iframing the presentation.

One thing I love about using Google apps in my courses is I only have to update the information in one place. When I am using the same presentation in several courses this is a real time saver.

[kmeeusen]

kelley.meeusen@cptc.edu

Thanks, bunches!

[kmeeusen]

u0291895​

Love Google Presentations. It is so much easier to embed media in Google than in PowerPoint, and the publish to web features assures that everything works when embedded in Canvas.

[u0291895]

done.

[tom_gibbons]

u0291895​ The answer is that accessibility for Google Docs iframes works (mostly)! I had test pages, but didn't have opportunity to run through them with a screenreader emulator until a few weeks ago. Here's the breakdown:

Docs: the full doc is rendered, including headings, lists, etc.

Forms: the form is rendered with appropriate tags indicating required items and the active or inactive state of choices.

Presentations: Not rendered inline, but provides instructions about how to access an accessible equivalent

Sheets: Uh. I didn't check. Math is hard.

[dkesler]

Great info here! I manage my syllabus using Excel, so I was hoping to be able to embed a single cell within an assignment in Canvas. That cell would have a line of text in it, such as "Read 2.1-2.4 and do problems #51-62."  I can embed from OneDrive ok, but it take about ten seconds for it to show up in Canvas while it only takes one second for the same amount of info to arrive from the Google sheet. So it looks like I have to move my syllabus into a Google sheet. As much as it pains me to lose the ability to insert/delete a cell and have things shift down/up automatically, it's better that I don't get speed-demon kids saying, "I checked the assignment and it was blank!" simply because OneDrive wasn't quick enough.

Are you having faster results when you embed from OneDrive or from Google docs? Is there some cooperation between Canvas and Google drive that isn't there between Canvas and OneDrive?

Glad to be here!

-Drew

[kmeeusen]

Thanks, Tom!

[jonathan_carlyo]

We have begun to use this as a way to embed type-sets from languages other than English, like Japanese and Arabic. Thanks, stefaniesanders​, for this post; I also learned a lot from this this InstructureCon Presentation by JR Ginex-Orinion.

[m_adkison]

Useful information to add to my toolbox!

[emily_moore]

This may very well have solved one of our most annoying course headaches! Thank you stefaniesanders​!

[Stef_retired]

While this technique may already have been covered upthread, I thought it worthwhile to post the link to  @jperkins ​'s excellent instructions for creating a Google Doc template that students can use for their assignment submissions: Distribute a Google Doc Worksheet via Canvas 

[jperkins]

And if you have interest in viewing more things that you can do with Google, I'm trying to make one large resource page on using Google in Canvas. If you have any additional use cases, let me know and I'll include it in that document! Using Google in Canvas​

[rorjuela]

Hello everyone:

Use the power of google drive installing Ads-ons before or during a shared document.

For example install the add-ons to their students perform graphics

Your students can create graphics if they have the plug-in installed on your google drive.

Do not publish. Sharing also can restrict access to only the domains of your school.

Result on Canvas

You can for example install a Ads-ons to sent notifications to students.

And many other accessories of Google Drive.

[hochmucr]

This thread contains many good ideas and resources for the marriage of Canvas and Google Docs.

[hochmucr]

Here is a quick video describing how one can embed a Google Slide presentation, starting at a specific slide:

Embed Google Slides Starting at a Specific Slide - YouTube

[jjulius]

I think this is an awesome approach for many reasons. Here is one more variation on embedding that I think is great if you are just embedding content and not an interactive Google doc.

Rather than getting the embed code by publishing the Google doc, get the sharing URL, but then replace the final part of the URL (generally /edit?usp=sharing) with /preview?pli=1

I find the result better because

• it preserves the formatting of the Google doc more consistently.
• it presents the Google doc on the Canvas page more distinctly (surrounded by a gray frame rather than just bleeding into the white)
• if the Google doc contains hyperlinks, the behavior is much better - clicked links are opened in new tabs rather than within the iframe.

By the way, this URL-change is great for sharing Google docs in general when all you want recipients to do is to see the content. It removes all of the Google doc toolbars but preserves the document-like formatting.

[Stef_retired]

 @jeneen_hill ​ had some questions about how to embed a Google Slide deck in a Canvas page so that the slides automatically advance, and the ever-resourceful Deactivated user​ came to the rescue with a video that explains how to do that.

[jal18]

Love this. Thank you!

[Stef_retired]

For those of you interested in exchanging your Google tips and tricks with other teachers, or who want to pick up some new ideas,  @tmercer ​'s CanvasLIVE​ Twitter chat #Canvas4Elem: Getting Googley with Canvas is coming up this week, on Tuesday, October 11, 2016. Please RSVP if you plan to attend--and if you're interested, but your schedule doesn't allow you to participate in the live tweeting, RSVP anyway to receive notifications of comments to the event.

[Stef_retired]

CanvasLIVE​ has launched a series of presentations on the new Google Apps LTI, and you'll find the complete lineup of events here. (And we'll promote each individual event in this space as its date approaches.) RSVP “yes” to an event if you will be there--and if you’re interested, but your schedule doesn’t allow you to attend in real time, RSVP "no" or "maybe" to receive all event updates. Your RSVP ensures that you will receive a notification should the event be cancelled or changed.

[Stef_retired]

The next installment in the CanvasLIVE‌ series on the Google Apps LTI is coming up on Friday, February 3, 2017: Google LTI Series: Accessing Your Assets. Click on the event link to RSVP “yes” if you will be there--and if you’re interested, but your schedule doesn’t allow you to attend in real time, RSVP "no" or "maybe" to receive all event updates. Your RSVP ensures that you will receive a notification should the event be cancelled or changed.