How do I embed a dynamic Google document into the Rich Content Editor?

Canvas recently introduced a new page design called the New Canvas User Interface (UI). Depending on your Canvas view, your page design may vary from the images shown in this lesson. However, the functionality and location of the components remain the same.

You can create a document, slide presentation, or spreadsheet using Google Drive and then embed that document anywhere you can use the Rich Content Editor in Canvas. The Rich Content Editor is used in features that support the editor (Announcements, Assignments, Discussions, Pages, Quizzes, or Syllabus). Any time you edit the Google document, it will be automatically updated in Canvas.

Note: You might notice that some formatting, such as margins or line spacing, is lost when you embed a Google document into your course.

Create Google Document

Create any type of common file using Google Drive to embed it in your course content.

Publish to the Web

Publish to the Web

Open the File menu and select Publish to the web....

If the File menu is minimized, expand the menu by clicking the down arrows next to the edit icon.

Start Publishing

Start Publishing

Make sure that the Automatically republish when changes are made checkbox [1] is selected. Click the Start publishing button [2].

Click OK Button

Click the OK button.

Embed Link

Click the Embed tab.

Copy Embed Code

Copy Embed Code

Copy the text that appears in the Embed Code box. You can easily copy this text by highlighting it and typing Ctrl+C on your Windows keyboard or Command+C on your Mac keyboard.

Log In to Canvas

Log In to Canvas

Log in to Canvas and access your course.

Open HTML Editor in Rich Content Editor

Open HTML Editor in Rich Content Editor

You can make your Google document appear anywhere that uses the Rich Content Editor. Access the Rich Content Editor where you want to show your Google document and click the HTML Editor link.

Paste Embed Code

Paste Embed Code

In the HTML view [1], paste the embed code you copied earlier by clicking in the text box where you want the Google document to appear and typing Ctrl+V (Command+V on a Mac).

To make sure the content appears correctly, switch back to the Visual View by clicking the Rich Content Editor link [2].

Adjust Height and Width

Adjust Height and Width

You may want to change the width of the embedded document. Using the Rich Content Editor, click and drag the embedded document box to the desired width. The height will automatically adjust to the new width of the box.

Adjust Height and Width in HTML Editor

Adjust Height and Width in HTML Editor

You can also adjust the height and width of the frame in the HTML Editor. Adjust the numbers that appear in quotation marks after the words "width" and "height" in your embedded code, as highlighted in the above image. You can also use percentages to change the width and height.

Save Changes

Save Changes

Click the Save button to save any changes to the post made in the Rich Content Editor.

Note: When using the Rich Content Editor in Assignments, Discussions, Pages, and Quizzes, you have the option to Save & Publish. When using the Rich Content Editor in the Syllabus and Discussions pages, the Save button may appear as “Update Syllabus” or “Post Reply”.

View Embedded Google File

View Embedded Google File

View your newly embedded Google document.