Introduction
This tutorial will explain how to embed a Google Docs file into a Digital Bell Text Block, by publishing it to the Web. This process will work with text documents, spreadsheets, slide shows/presentations, and drawings that have been created through the "Google Docs" suite of Web applications.
The embedded document will be created as a copy of the original file, and added to the page via an iframe. While the document can be viewed by visitors, it cannot be edited. When publishing the document to the Web, you will have the choice of creating a dynamic file, which is updated whenever changes are made to the original, or a static file that does not reflect updates. The steps below detail the process.
Note: If you are adding a document that contains a chart or graph, the underlying data used to create the chart/graph may be visible to visitors. This should be considered if your chart or graph was compiled using sensitive information.
- Step 1 - Create or Edit your Google Doc
- Step 2 - Embed your Document
- Step 3 - View and Modify the Document
- Step 1 - Create or Edit your Google Doc
-
The first step in the process is to create a new document, or open/edit an existing document, with the Google Docs suite of content creation tools. Once you are ready to embed your document, open the "File" menu, then click on "Publish to web..."
After clicking "Publish to web..." you will be presented with a pop-up confirmation window, which includes publishing options for your specific document type. Click on "Embed" to switch from the default "Link" option. Selecting "Embed" will provide you an HTML snippet that can be added to a Text Block.
Additional options are available by clicking on the "Pubslished content & settings" link. The options presented to you will vary, depending on the type of document you are embedding. However, all document types, with the exception of the Slide Show/Presentation, give you the option of creating a document that automatically updates itself when changes are made to the original file - or a static document that does not update.
By default, the document will auto-update. To create a static document, uncheck the "Automatically republish when changes are made" box.
For more information, see the full documentation on Publishing a Document, Spreadsheet, Presentation, or Drawing - provided by Google. Once you are ready to embed your document, click the "Start Publishing" button.
Return to Top - Step 2 - Embed your Document
-
After clicking the "Start Publishing" button, you will be presented with an HTML snippet, and a prompt to copy it.
Copy the highlighted HTML, then proceed to The Digital Bell. After logging in, create a new page or edit the existing page, where the document will be embedded. In the page's content editor, add a Text Block Group to the page, by clicking the "Text Block" link, located under the "Add Content" heading in the right margin.
After adding the new Text Block Group, click the "+New Text Block" button, located at the bottom of the group. Next, click the "Edit HTML Source" button (HTML icon) on the WYSIWYG toolbar. This will open the HTML Source window.
You should now see a blank text field, in the "HTML Source" window. Paste in the HTML snippet, copied in the previous step. This snippet will create an iframe on your page, that allows visitors to scroll through your document. If you would like to resize this iframe, "height" and "width" parameters can be added.
In the snippet, directly after the "embedded=true" section, and before the closing ">," add the following:
width="###" height="###"Replacing the "#" signs with a numeric value; e.g. width="800" height="600." These values will set the resolution, or size, of the iframe in pixels. The finished product should resemble the following:
<iframe src="https://docs.google.com/document/d/14oy4yVCFmg-FXnnpiHAOmyJF7Apq2vWPwgOcbqdFhcE/pub?embedded=true"width="800" height="600"></iframe>Once you have pasted in the snippet, and, if necessary, modified the size, click the "Update" button at the bottom of the pop-up window. Your embedded file should now be visible in the Text Block's "Content" field. Additional content can be added to this section, if necessary. When the Text Block is complete, click the "Submit" button to complete the process. Note that the Text Block will appear blank, at this point - the iframe can only be seen when editing the content.
Return to Top - Step 3 - View and Modify the Document
-
Click the "View on Webpage" button to see a preview of the live page in a new browser tab. If you will need to modify the size of the document's iframe, return to the content editor, and click on the Text Block to open the Text Block editor. Click again on the "Edit HTML Source" button, and modify the snippet using the height and width settings, as described above. This process can be repeated as necessary, until the iframe is displayed at your preferred size.
Two examples are shown below: one left-aligned at the default size, and the other center aligned - using parameters of "width='800' height='600'."
Return to Top