Installation

Usage

Use this code:

<span class="googlespreadsheet" data-spreadsheet-id="[Spreadsheet ID]" style="width: [px]; height: [px];"></span>

Replacing data-spreadsheet-id with the spreadsheet ID. The widget's width and height can be customized via CSS. If you want the spreadsheet to not show as a widget, set data-widget="false", which is true by default.

To actually embed a spreadsheet, the spreadsheet needs to be published with Google's File > Publish to Web... option. It is not sufficient to just have a shareable link.

Example

This will show when loading and for mobile users.

Charts

<div class="googlespreadsheet" data-spreadsheet-id="[Spreadsheet ID]" data-chart-oid="[Chart Object ID]" style="width: [px]; height: [px];"></div>

Setting data-chart-oid to the oid param from a /pubchart URL will use the chart embed.

Portability

As JavaScript isn't loaded on the mobile skin, this has no support for mobile (users on mobile won't see the spreadsheet). Whatever is inside the container will be shown, so you can provide a link there. This will show on desktop until the spreadsheet is fully loaded. You can put a link to your spreadsheet if you want to let users still have a way to access it.