Using Google Docs for dynamic Canvas content

Stef_retired
Instructure Alumni
Instructure Alumni
74
170460

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.

Google-publish-embed-code.png

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:

Google-publish-embed-code-in-Canvas-HTML-editor.png

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

Google-publish-embed-code-pre-edit.png

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:

Google-published-view-post-edit.png

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.

74 Comments
johnmartin
Community Champion

The document looks much better when embedded if you replace the default "Publish" URL with the URL in the browser.

Bonus Hint: change the last bit of your Google doc link to adjust how it looks: "https://docs.google.com/document/d/1Tz_KuiU7ewnys12PdK8l1aLCWAeCWu5PfhwlfYbiqlw/pub?embedded=true" =default

"https://docs.google.com/document/d/1Tz_KuiU7ewnys12PdK8l1aLCWAeCWu5PfhwlfYbiqlw/preview" = no toolbar, margins

https://docs.google.com/document/d/1Tz_KuiU7ewnys12PdK8l1aLCWAeCWu5PfhwlfYbiqlw/edit” = edit mode

https://docs.google.com/document/d/1Tz_KuiU7ewnys12PdK8l1aLCWAeCWu5PfhwlfYbiqlw/copy” = for links — whoever clicks it gets their own copy of the doc in their personal Google Drive (great for worksheets!).

hochmucr
Community Participant

Google Apps LTI -Try it out, it works great and makes embedding of Google Apps much easier.

Google Apps LTI

Description:

This Google App integration, created by Instructure, has five main points of interoperability that promote great teaching and learning:

1) Single sign-on: use your Canvas login to sign into Google (in process)

2) Google Drive embedding and linking: easily embed documents from your Google Drive anywhere you use the Rich Content Editor

3) Google Docs as Assignments:

• Students can submit Google Docs as Assignments

• Teachers can use a Google Doc to give an Assignment, and send a copy of that document to each assigned student

• Teachers can grade submitted student assignments in Speedgrader by editing or annotating the Google Doc

4) Google Drive Collaborations: students can use Google Docs, Sheets, or Slides for a Canvas Collaboration

5) Modules: Teachers can link to a live Google Files in their Canvas Modules

GideonWilliams
Community Champion

Miles better than Office365 integration

traciebosket
Community Champion

Woah! Your tip: 

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

worked like a charm!. I have been struggling with embedding GoogleApps with correct dimentions for years. I can't believe it was that simple.

Thanks stefaniesanders‌ !

traciebosket
Community Champion

The problem we ran into is that our students' email addresses are Google accounts, so they are not able to view anything embedded from Office 365

richardp
Community Explorer

Hello Stafanie

 

I have followed your instructions to embed a google doc to a Canvas page as per your instructions: Using Google docs for dynamic Canvas content. It is working fine thank you, however, the page (Canvas) displays the google doc along with the google Doc tool bars (along the top) which I don’t want.  Is it possible to embed the document without the Google docs menu/tool bars, please?

 

Best Rick

Stef_retired
Instructure Alumni
Instructure Alumni
Author

 @richardp , this process is still working fine for me; in other words, I'm not able to replicate what you described. To recap, I selected File > Publish to the web, toggled the modal to Embed, harvested the embed code, pasted the code into the HTML Editor on a new Canvas page, added width and height parameters, and saved. The Google-native toolbars do not display on the page, and a viewer cannot tell that it is in fact an embedded Google Doc.

themidiman
Community Champion

Hopefully adding some constructive content to this thread here:

We've been exploring the Google Assignments integration with Canvas. The LTI include a RCE icon that does Google Document embedding without the Google Docs tool bar. The product is still a beta, but it shows a lot of promise.

johnmartin
Community Champion

Rick, The document looks much better when embedded if you replace the default "Publish" URL with the URL in the browser. Then change the last bit of your Google doc link to adjust how it looks: "https://docs.google.com/document/d/1Tz_KuiU7ewnys12PdK8l1aLCWAeCWu5PfhwlfYbiqlw/pub?embedded=true" =default view includes toolbar and editing options — great for sign-up sheets, etc.

"https://docs.google.com/document/d/1Tz_KuiU7ewnys12PdK8l1aLCWAeCWu5PfhwlfYbiqlw/preview" = no toolbar, margins. A great option for read-only documents.

richardp
Community Explorer

Hello Stefanie,

Many thanks for your response. I followed your instructions to the letter . The attached screenshot shows my document surrounded by the toolbars. I'm afraid I don't understand why its displaying this way.

Rick

Stef_retired
Instructure Alumni
Instructure Alumni
Author

 @richardp , I'm not seeing an attached screenshot. I notice that John Martin kindly offered some tips below, and I hope those will help; however, I didn't have to make those edits to the code to successfully and seamlessly embed the doc. 

To be clear, you're not trying to iframe the URL, are you? I am copying the embed code to the HTML Editor to achieve this.

Stef_retired
Instructure Alumni
Instructure Alumni
Author

Also,  @richardp , have you published the GDoc before attempting the code embed in Canvas?

richardp
Community Explorer

Hmmm! I can’t remember, I’ll check. Presumably it makes a difference?

Thank you Rick

Stef_retired
Instructure Alumni
Instructure Alumni
Author

Yes,  @richardp , the GDoc must be published to the web to complete the process and be visible to others.

richardp
Community Explorer

Many thanks each and everyone for all the help and advice. I have now managed to achieve what I was after. The next step is to create links in the document that will open automatically I have managed to create links from the RCE, however, they will not open automatically. When I create the link I am not given the option to open automatically. Any advice, please?  

johnmartin
Community Champion

Hi  @richardp , I'm not sure what you mean when you say "open automatically" — in a new tab? when clicked on? as a preview on the page? Can you clarify? Thanks!

richardp
Community Explorer

Hello John, apologies for the delay. I have managed to embed a Google doc - minus the toolbar, in a Canvas page to work dynamically. The the content of the Google doc is essentially data copied from a Google sheet which is displayed in tablature/table format. What I am trying to do, and I’m not sure if I will be able to do it is to link the contents of individual cells, say week 1, week 2 etc to say page 1 page 2 etc respectively. When I highlight the contents of a cell and link it, it links the whole table, not the individual cell. I need to find a way of linking cells individually.

Best Rick

johnmartin
Community Champion

Hi Rick,

Creating a table in Docs and embedding it Canvas where the text within table cells is linked to different locations can work, so each link opens individually: 

333067_pastedImage_1.png

Here's the html I used to embed it: 

<p>Table Embed (with links) <iframe src="https://docs.google.com/document/d/1XtfoSNFvZeIR_KHlvEUcCbk6h6urOcWEEY1s3Z6YSbI/preview" width="100%" height="300px"></iframe></p>

Here's the document: table embed - Google Docs 

BUT, what I think you might be asking is whether a link can go to an individual cell within a Google Sheet, rather than to content linked from that cell. If this is the question, I don't know the answer. Sorry!

johnmartin
Community Champion

Thanks JEFHQ12951

Google's inclusion of an Originality checker set off alarms here, as we just signed a contract with Turnitin... 😞 

Is your institution finding any issues with that?

themidiman
Community Champion

Good question, John

Our institution uses the free G-Suite for Education instance. So we're not under a contract with Google per-se. I'm still trying to work out the details with our legal department on that. With Google being Google they provide a deep rabbit-hole of 'freeish' tools that are super innovative but we don't know the risks related to FERPA, etc. if we start advocating the use of Google's suite of edu tools. So currently I cannot comment on any vendor contract issues. 

So we haven't even explored the originality checking capabilities as of yet because of this setback. I will say this about Turnitin...they've been in the game for a really long time and likely have a deep database of sources of information they use in their originality check workflow. It's hard to say where Google might be in this market. Turnitin has a history of buying out their competition (ala Vericite). They also have a history of downtime which at certain times frustrates our faculty because they expect every 3rd party vendor to have the same uptime as Canvas does.  I wonder how they will react if Google's originality check workflow begins to outperform Turnitin's workflow. 

louis_loeffler
Community Member

Hi,

 

First thank you for the great instructions Using Google Docs for dynamic Canvas content.  Unfortunately I believe that technology has marched on and the instructions are not working any longer. At least not to the effect I need or want.

 

When I follow the instructions I am losing the  picture/them at the top of my Google forms.  They form by itself looks like this:

 Google form example

 

Using the tools within Canvas

 Canvas tools

Tools part 2

Gives me the following code:

<div class="container-fluid"><iframe style="width: 800px; height: 600px;" title="Assessment Test of Instructions" src="/courses/223302/external_tools/retrieve?display=borderless&amp;url=https%3A%2F%2Fgoogle-drive-lti-iad-prod.instructure.com%2Flti%2Fcontent-view%2Frce%2F54583981" width="800" height="600" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allow="autoplay *"></iframe></div>

 

And yields the unhappy world

 Google refused to connect image

Using your solution with minor changes since File > Publish to the Web > Publish  Is no longer an option

 

I go to Send ….

Send button

and choose embed

 Send dialog box

 

Altering the width and height like you recommend so the code now is:

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdFLsquN1H1NgapxKKlku8xVVkDPmYZ9whQo75OeXJG6Kjn4Q/viewform?..." width="100%" height="600" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

 

The form is embedded but the theme image has been lost. Any ideas? Thank you in advance for pointing me in any direction.

 

PS – Does it have anything to do with the new version of Google sites? See Google form header image not showing when embedded on google site

themidiman
Community Champion

Regarding the Google Form header image missing, try removing the "?embedded=true" portion of the URL in the iframe src="" attribute. It appears Google assumes the header image isn't needed when embedding it in another page of content.

You don't need the Google LTI to do this...just the embed code from Google can work just as well. 

As I mentioned earlier, the Google Assignments (Formerly Course Kit) is very promising and I hope our institution can start promoting it some day. It is much better than the Google LTI written and maintained by Instructure (for our institution anyway). If anyone is interested in my opinion of why it's better you can DM me. 

Good luck!

johnmartin
Community Champion

Hi  @louis_loeffler , 

The "Publish to Web" option has never been a satisfactory one, imho. I did a quick test comparing the method you used (<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdFLsquN1H1NgapxKKlku8xVVkDPmYZ9whQo75OeXJG6Kjn4Q/viewform?..." width="100%" height="600">

vs a "just use the 'Send Form' link in an iFrame" option (<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfV0l08ADbzCgrOeAyljrL9XSm-ezAaF_0XgV70LGUsLsTSvw/viewform?..." width="100%" height="600">Loading…</iframe> </p>)

The latter version retains the heading.

354268_pastedImage_1.png

MusicTeach
Community Member

I don't know if this post is an older version of coding or something but I tried using this solution just now and it DID NOT WORK.