Hosting Data Using Google Docs

For documents and tables, Google Docs can provide a great way to manage content easily, and embed it into your website.

It provides an easily-accessed editor, gives you more formatting options, and for dynamic integrations you can update that document anytime, and the changes will immediately reflect in your website.

How Integration Works

There are different ways to integrate this content;

• Download Link. If you simply want users to be able to download or view the document, 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.
• 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.
• Direct Static CSS and HTML Embedding. Bring the document directly into your page manually, where the content and styling are directly a part of your site.
• Direct Dynamic CSS and HTML Embedding ( Hyperflow ). Bring the document style and content directly into your site dynamically, using Sygnal's Hyperflow service.

Understanding Google Docs Links & IDs

For any of these integrations, you need to know how to setup document access, get the document ID, and how to form the URLs.

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;

<iframe 
  src="https://docs.google.com/document/d/12qzAbwgcwjQbtWPgkgOGPDFqKj4HQpm4HmxRxRtej-Y/preview" 
  width="600" height="600"
  ></iframe>

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

‍

‍