WiscWeb - Embed a Google Doc

The following document will walk a user through how to embed a Google Doc within a WiscWeb webpage.

Before you begin

Use a Shared Drive for setup

We recommend that you set up your Google Doc within a Shared Drive. Shared Drives accommodate many editors. Also, if the original owner leaves the University, someone can still have access.

Technical support and resources

Google Docs is covered by the UW-Madison Google Workspace team’s rules and terms of service: UW-Madison Google Workspace - Terms of Service/Use and Privacy Policy.

For help and support using these tools, we recommend the following official Google support documentation:

Step 1: Publish to web

Before you embed your Google Doc link, you will need to make sure it is set up to publish to the web. 

  1. Open the file in Google Docs

  2. At the top, click File > Share > Publish to web

    Display of 'publish to web' setting in Google Doc

  3. In the window that appears, keep the Link tab selected and click Publish


    Text showing the options for publishing to the web, including a blue button that says "Publish"

  4. After selecting Publish, you should see a new pop-up window with a URL of your doc. Copy that URL and save it for the next step. 

    Text showing URL of published Google Sheet

Step 2: Paste Google Doc URL into text block

  1. With the Google Doc URL copied, log in to your WiscWeb site and access the page or post that you want to paste this into

  2. In a Text Area, paste the code that you have copied into the Visual Editor. Your doc should display within a few seconds

    Text Block displaying a Google Doc embedded within it

Accessibility and usability barriers

Content is embedded on the page using an <iframe> HTML element (inline frame), which displays HTML content from another page into the current one. Inline frames can pose accessibility barriers when...

  • the HTML content within the iframe is not accessible.
  • scrolling is disabled for the iframe.
  • the iframe does not scale when the page and its contents are resized.
  • a descriptive title attribute value is not provided for iframes that display content visually different from the rest of the page (like a Google Doc, video player, or survey).
    • Example: <iframe src="docs.google.com/document/id..." title="Google Docs">

The Google Doc embed feature automatically includes a title attribute and enables scrolling. The ability to scroll help users who enlarge fonts and other page elements for better visibility. Learn more about these accessibility barriers on WebAim's Creating Accessible Frames and Iframes article

Check that your document content is accessible

It's crucial that your Google Doc follows the rules and best practices for creating accessible content (proper headings, alt text, color contrast, etc). Visit UW-Madison's guide on creating accessible documents and Google's guide on how to make your document or presentation more accessible for detailed information.

Include a link directly to the Google Doc

We recommend putting a direct link to the Google Doc in addition to embedding it. This way, users can choose to see the full content in a wider view within the Google Docs app for a better experience. When zoomed in at 200% or higher, content in an iframe becomes narrow and hard to read. 

Embedded content is also narrow on smaller screens like mobile devices and tablets. Including a direct link to the Google Doc will assist users on smaller screens and those who use screen magnification to read and access the content.

Do not embed documents that contain more complex visual elements

Only embed Google Docs that contain simple content and images. Documents that contain complex visual elements like tables, charts, or videos are more difficult to read and navigate within the limited view of an iframe. Link directly to these documents instead. 



Keywords:
document, doc, google, file, embed, show 
Doc ID:
120062
Owned by:
Jenna K. in WiscWeb
Created:
2022-07-29
Updated:
2024-12-02
Sites:
WiscWeb