How To Embed Spreadsheets in EverWeb

Have you ever wanted to use data in a spreadsheet within your website? You’ve done all of the work already by crafting your spreadsheet so you don’t want to have to recreate it in your website. And wouldn’t it be nice if when you updated your spreadsheet your website version automatically updated as well?

This sounds like something that you should easily be able to do, and it is easy to embed a spreadsheet in to your web page, but there a few things you should know before you start.

Apple, at The Bottom of The Barrel!
When it comes to embedding spreadsheets in to a web page, Apple’s Numbers app comes in last place. Basically you can’t embed a Numbers spreadsheet in to your website. It’s not all bad news as you can print the spreadsheet to PDF format then use that file in your page either as an embedded image or as a PDF file link.

Embedding Microsoft Excel Spreadsheets in to Your Web Page
If you are a Microsoft Excel user then there is better news as Excel does allow you to embed a spreadsheet in to a web page. Your options differ depending on whether you have the spreadsheet on OneDrive or are a Share Point Online user but at the end of the day embedding a spreadsheet in a webpage more complicated than perhaps you would want it to be…

Google Sheets: Simple and Straightforward!
The last option is to use Google Sheets. This web based app allows you to embed a spreadsheet into your website and is simple and easy to use. This is the option that we are going to look at in detail below…

Important! Before You Start Read This First…
There is one thing that you should be aware of before you start with embedding a spreadsheet in to your web page. The feature should only really be used in a Fixed Width page layout in EverWeb – usually this would be the Center Aligned layout. The reason for this is that the spreadsheet will be embedded as a fixed width object. At present there’s no technical way around this. This is a technology restriction, so the problem is not restricted to just to EverWeb.

You can still embed a Google Sheet in to a Responsive web page, but bear in mind that it will not scale automatically to fit the device it is being displayed upon..

Embedding a Google Sheets Doc In To A Page In EverWeb
Now that all the warnings are out of the way, let’s begin…

1. Open your web browser and log in to your Google Account if you are not already logged in.
2. Use the Grid icon in the top right hand corner of the Google Browser window to find and open the Sheets application.
3. If you already have a spreadsheet that you want to embed, open this. If not, create a new spreadsheet and enter and format the data you want to use.
4. In the top left hand corner of the browser window, under the name of your spreadsheet is the navigation menu for the Sheets app. Select File-> ‘Publish to the web’.
5. You will see a dialog box in the middle of the browser window. There are two sections, 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. You do not need to change the second options list which defaults to ‘Web page’ which is what we want.
6. Next click on the ‘Publish’ button. You will be asked if this is what you want to do. Click OK to continue.
7. The dialog box will change. You now have a hyperlink that you can share the spreadsheet with others if you want. In our example, though, we want to embed the spreadsheet in our web page in EverWeb, so click on the Embed option.
8. You will see some code. This is in fact code to create an iFrame within which the spreadsheet will be embedded. It is the iFrame that makes the embed a fixed object and not a responsive object. Highlight the whole code then copy it to the clipboard.
9. Once you have copied the code to the Clipboard, go to the page in your EverWeb project file where you want to embed the spreadsheet.
10. From the Widgets tab, drag and drop the HTML Snippet widget on to the page. Click inside the code box then paste in the code from the Clipboard. Press Apply when finished.
11. Now Preview the page to see the results!

Customizing the HTML Code
It’s likely that when you previewed the page that you were disappointed as you probably could only see a small window on to the spreadsheet. You can move the contents of the spreadsheet around in the window, but even when you enlarge the widget in the Editor Window in EverWeb the window on to your spreadsheet remains the same. The reason for this is that we’re using code go generate the window on to the spreadsheet view, so to fix the problem, we need to customize the code a bit. It’s not difficult to do…

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

width=”100%” height=”500″

The start of the code should look like this

<iframe width="100%" height="500" src= followed by the rest of the code…

Adjust the height and width as you want. You can use either percentages and/or pixels for the height and width as you want.

Always remember to hit the 'Apply' button to make sure any changes that you make are implemented! Test again by Previewing your page before publishing!