Video Transcript:

If you have you ever wanted to use spreadsheet data in your website the easiest way to do this is by using Google Sheets in combination with your EverWeb website.

Google Sheets allows you to embed all, or parts, of a spreadsheet into your website in a simple and easy way.

Note that this feature is best used in a Fixed Width Center Aligned page layout in EverWeb. This is because the spreadsheet has to embedded as a fixed width object. This is a technology restriction, so the problem is not restricted to just to EverWeb. Whilst workarounds do exist, they are not easy to implement.

To embed a Google Sheets spreadsheet in to your EverWeb website, first open your web browser and go to google.com.

Log in to your Google Account if you are not already logged in.

Use the Grid icon in the top right hand corner to open the Sheets application.

If you already have a spreadsheet that you want to embed, open it now.

If not, create a new spreadsheet, enter your data and format the spreadsheet as desired.

Once you have completed your spreadsheet, select File, 'Publish to the web' from the Sheets menu system.

A dialog box will appear. There are two options, the first is 'Link'.

Select from the first options list whether you want to use the Entire Document, a Summary or Transactions. The default is Entire Document.

The second options list is set to 'Web page' so we do not need to change this.

Next, click on the 'Publish' button, then click OK to continue.

The dialog box will change to display a hyperlink that you can use to share the spreadsheet with others. For our example, though, click on the Embed option.

Highlight all of the code then copy it to the Clipboard.

Next go to the page in your EverWeb project file where you want to embed the spreadsheet.

From the Widgets tab, drag and drop the HTML Snippet widget on to the page.

Click inside the HTML Code box then paste in the code from the Clipboard.

Press the Apply button to implement the code. Next Preview the page.

By default the code used in our widget only makes a small window on to the spreadsheet so we need to customize the code to see more of the spreadsheet.

So we need to go back to the HTML Snippet widget .

After the word 'iframe' and before the word 'src' enter, for example, the following

width="100%" height="500"

You can adjust the height and width as you want. You can use percentages, pixels or a combination of the two.

Remember to click on the Apply button to save your changes before previewing or publishing.