In-Directly Embedding Content from Google Docs

IFRAME embedding is simple, but gives you limited control over presentation, and the document appears in a box on your page.

Supported Formats

Conveniently, you have a wide range of formats you can choose from in that IFRAME presentation.

Presentation-oriented formats;

• docx: Word format
• odt: OpenDocument Text format
• pdf: Portable Document Format
• html: HTML format
• epub: EPUB format

Data-oriented formats;

• rtf: Rich Text Format
• txt: Plain text format

Integrating it into your Site

There are different ways to integrate this content;

• Download the Document. If you simply want users to be able to download the current content, you can provide them a download link to the format you want.
• IFRAME Embed. If you want to display the actual document content in your page, exactly as it appears in Google Docs, you can use an IFRAME to embed it.
• Direct JavaScript Embedding. You can also use JavaScript with the data-oriented formats to retrieve the content, parse it, and then integrate that content into your webpage.

Creating the Link

IMPORTANT: Make certain your document is available to the people who need to see it. If you want it public on your website, share it with the "anyone with the link can view it" setting.

Open your doc in Google Docs to see the file ID in the URL. For example here's a Google Doc link;

_{https://docs.google.com/document/d/12qzAbwgcwjQbtWPgkgOGPDFqKj4HQpm4HmxRxRtej-Y/edit}

Try it

The file ID is _{12qzAbwgcwjQbtWPgkgOGPDFqKj4HQpm4HmxRxRtej-Y}.

You'll use that to create the URLs you need.

Download links

If you want to force the browser to download the file, use the _/export version of the link. It will specify the file type you want to download, e.g. to download it as a Microsoft Word .docx;

_{https://docs.google.com/document/d/12qzAbwgcwjQbtWPgkgOGPDFqKj4HQpm4HmxRxRtej-Y/export?format=docx}

Try it

Set the _format= to the format you want;

Presentation-oriented formats;

• _docx: Word format
• _odt: OpenDocument Text format
• _pdf: Portable Document Format
• _html: HTML format
• _epub: EPUB format

Data-oriented formats;

• _rtf: Rich Text Format
• _txt: Plain text format

Previewing

If you want to display the document neatly, without the editor controls, you can use the _/preview mode instead;

_{https://docs.google.com/document/d/12qzAbwgcwjQbtWPgkgOGPDFqKj4HQpm4HmxRxRtej-Y/preview}

This works especially well with IFRAMES;

In-Document Linking & Bookmarks

Google Docs does not have a rigid concept of pages so unlike a PDF, you cannot specify the page you want to navigate to.

However it does support bookmarks, which can be directly referenced in the URL through a fragment like _{#bookmark=id.w55jcj8heq8x}. You can add that bookmark ID to your _/edit or _/preview URLs.

For example;

_{https://docs.google.com/document/d/12qzAbwgcwjQbtWPgkgOGPDFqKj4HQpm4HmxRxRtej-Y/preview#bookmark=id.w55jcj8heq8x}

Try it

A bookmark in Google Docs allows you to create a link to a specific spot in a Google Docs text.

1. In your Google Docs document, click where you want the link to direct to.
2. Click "Insert" from the top menu, then click "Bookmark".
3. You'll see a blue bookmark ribbon icon appear in the document at the cursor's location.
4. Hover over the bookmark, and you'll see "Link" appear. Click on it to get a URL.

You can share this URL with anyone. When they click on it, they'll be taken directly to this location in the document.

Bookmarks link to a specific location in the text, not to a specific page. In Google Docs, the concept of a "page" can change based on the size of the user's browser window, the zoom level, and the display settings. Therefore, the bookmark may not appear on the same "page" for everyone.

• Add that bookmark ID to your _/edit or _/preview URLs

‍

‍