Google Docs: Embedding editable Google Docs

This article provides step by step instructions detailing how to embed an editable Google doc or spreadsheet into an Ultranet page. There is a small amount of html involved in this process, but it does not require any knowledge beyond copy and paste.

The example used is creating a shared spreadsheet to accumulate and graph results from a field trip (Dept of Conservation Wet Feet teaching resource). The Ultranet Resources, Media Gallery and Discussion widgets are then introduced alongside the spreadsheet to support the analysis of the results, and bring the discussion to life.

Setting up your document

The first thing you will need is a Google spreadsheet. A spreadsheet is used in the example, however the embedding process is the same for a Google Doc. Create the table for the results. In this case a graph was added as well to show the results.

The spreadsheet will be set up to allow editing without having to login to Google Docs, but only by people who have the specific link.


To change the sharing settings click on the ‘Share’ button on the upper right-hand corner of the page.

A box will then appear which will have the Permissions listed. The default status will be ‘Private’. Click on the ‘Change…’ link.


Click the button by ‘Anyone with the link’. Then select ‘Can edit’ from the drop down list next to ‘Anyone (no sign-in required)’. Click ‘Save’.


You’ll now be returned to the previous Sharing Settings page. This will provide you with a ‘Link to share’. Copy and paste it into notepad or another text editor so that you can use it later.


Creating the embed code

Before you set up your page widgets and embed your spreadsheet you’ll need to create the correct code to paste into your page. Open the text editor where you pasted your Google Docs link.

Paste this code under the link:

<iframe height="620" align="middle" width="100%" border="0" src="GOOGLE DOCS LINK HERE"></iframe>

Now copy your Google Docs link that you posted previously and paste it in the part of your code to replace the text marked "GOOGLE DOCS LINK HERE".

Embedding the spreadsheet in your page

The final step is to embed the code you just created into your Ultranet page.

To do this, go to your page and click on the edit button, then select ‘Edit Page Content’. 


Next, switch to HTML view at the bottom.


Copy and paste the code you created in your simple text editor. When you are finished click ‘Save Changes’.


The editable Google document will now be on your page and ready to go. Students can enter their team data and see the changes in real time, then view the photos and engage in a discussion around the results.


Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Article is closed for comments.