Embedding a Google Doc

Community Member
4 4 980

Note: There are easier ways to embed a Google Document, but I found that the other options caused problems: the document would be too small, would not update (or very slow to update), and/or it was hard to navigate. The steps below are more extensive, but the result was worth it.

Embedding A Google Document

1. Get the share link from the google doc

2. On Canvas Page, click to insert media

3. Paste the share link, but change the last part of the link 
CHANGE /edit?usp=sharing TO  /preview?pli=1
*Note = this is what puts the document into preview mode and show up on the page correctly. 

4. Change the dimensions
*Note = I recommend width = 100% Height = 600

5. Click Okay

6. Click HTML Editor

7. Adjust code 
change video to iframe, delete controls, extra bracket, and source
*Note = The document will not show up without these changes

Example:

CHANGE 

<p><video width="100%" height="600" controls="controls">
<source src="https://yourgoogledocshareaddress/preview?pli=1" /></video></p>

TO

<p><iframe width="100%" height="600" src="https://yourgoogledocshareaddress/preview?pli=1" /></iframe></p>

8. Save

Example of how a document will appear using these steps:

315830_Screen Shot 2019-06-21 at 8.47.04 PM.png

4 Comments
Learner II

Has anyone else played with the Google Assignments Canvas LTI Integration? It does a fantastic job of embedding a Google Doc with absolutely zero coding in the HTML view. 

Here's a picture of a playground course with an embedded google doc as the course syllabus:

Google Assignments Embed Example

Community Member

?Yes, our teachers love it.

Joani Kay

Technology Coordinator

Mountain Brook High School

3650 Bethune Drive

Mountain Brook, AL 35223

205-414-3800

Community Member

Yes- I love that it makes it easy for students to submit and that it loads a student copy directly onto the assignment page! 

My OP was prior to a lot of tools that Canvas has now added (including the embed using external tools option). I posted because, at the time, I was needing to find a way to publish a copy of a google doc (non-assignment related) that would automatically update as I made changes on the google doc (and still be as easy to navigate as what you posted above). Coding, at the time, was the only way that I found to make it embed the way I wanted. 

I have not needed to post a live google doc since the time of my OP. Does the LTI update automatically when a change is made to the google doc?

Community Advocate
Community Advocate

ajonker@mckinneyisd.net, #google cloud assignment‌ makes a copy of the original file from you Google Drive.  Therefore, if a teacher makes a change to the file the change will affect the cloud assignment document that students receive as long as they have not accessed the assignment yet.  Once the student access the assignment, a copy of the file is made and placed in the student's Google Drive. That is the file that the student works on in the assignment.  Students can make edits in Canvas or open the file in their google Drive.  The file does need to be submitted from the assignment page though.