Google Docs: Embedding Tricks for Canvas (and other systems)

there’s the official way to publish google Docs, and it works with various degrees of success. Depending on the system, it may strip out width and height defaults, or other small details that make the content look good. I’d like to share some alternate methods.

 

This is Monday’s schedule for a course design bootcamp I help run, and here’s the HTML iframe embed code:

<iframe src="https://docs.google.com/document/d/1Vo9AY5VI-Ck8SNMCaRJntDN5jL09zYoW7hcBwK0sQ0w/pub?embedded=true" width="100%" height="1200"></iframe>

Ignoring that, for this post in WordPress, I changed the width from 100%, (Canvas renders: “100%” nicely in a flexible width that looks good on computer and mobile devices. Here in WordPress, not so much; so I set a fixed width of 600).

Also note that it is not editable. I used Google’s “Publish to the Web” command to get this code. You should be able to click the How did I embed this Google document in Canvas? link within the embedded google Doc to see detailed instructions on how to do this.

Here is Tuesday’s schedule, and code:

<p><span>Schedule:&nbsp;</span><a id="" class="" title="Day 1: Empathize and Define (Monday, June 6)" href="/courses/7/pages/day-1-empathize-and-define-monday-june-6" target="" data-api-endpoint="https://canvas.wisc.edu/api/v1/courses/7/pages/day-1-empathize-and-define-monday-june-6" data-api-returntype="Page">Monday</a><span>, </span><a id="" class="" title="Day 2: Ideate and Design (Tuesday, June 7)" href="/courses/7/pages/day-2-ideate-and-design-tuesday-june-7" target="" data-api-endpoint="https://canvas.wisc.edu/api/v1/courses/7/pages/day-2-ideate-and-design-tuesday-june-7" data-api-returntype="Page">Tuesday</a><span>, </span><a id="" class="" title="Day 3: Build (Wednesday, June 8)" href="/courses/7/pages/day-3-build-wednesday-june-8" target="" data-api-endpoint="https://canvas.wisc.edu/api/v1/courses/7/pages/day-3-build-wednesday-june-8" data-api-returntype="Page">Wednesday</a><span>,</span><span> </span><a id="" class="" title="Day 4: Refine and Present (Thursday, June 9)" href="/courses/7/pages/day-4-refine-and-present-thursday-june-9" target="" data-api-endpoint="https://canvas.wisc.edu/api/v1/courses/7/pages/day-4-refine-and-present-thursday-june-9" data-api-returntype="Page">Thursday</a></p>
<p><iframe src="https://docs.google.com/document/d/1w844NkcyFJXSe-QYI9MzGa1KMqKha4gDkllYKehx-SM/edit" width="100%" height="1200"></iframe></p>

Note that this one has editing/suggesting/commenting options. Again, the link How did I embed this differently? should give clear instructions on how to do this in Canvas.

There’s a nice post in the Canvas Community on this as well.

Leave a Reply

Your email address will not be published. Required fields are marked *

*