How to use a Google Sheet as data

In TeleportHQ you can use a Google Sheet as a data source, so people who edit the spreadsheet also update your website. Share the sheet so anyone with the link can view it, then in Data Sources → Add Data Source → Google Sheets paste the sheet's URL, click Get data from Google Sheet, and click Save Data Source.

Before you start#

• The sheet must be public. In Google Sheets, click Share and set General access to "Anyone with the link" (Viewer is enough). TeleportHQ can't read private sheets.
• Put column names in the first row, for example name, price, photo. Each following row becomes one item.
• You can add as many Google Sheets to a project as you need. Connecting one doesn't turn a TeleportHQ website into a web app.

Steps#

1. In the left sidebar, click Data Sources (the database icon).
2. In the Data Sources panel, click + (tooltip Add Data Source).
3. Click the Google Sheets card. A panel titled Google Sheets opens with the section Setup Google Sheet.
4. In Data Source Name, type a name, for example Cafe menu.
5. In Sheet URL, paste the address of your sheet, for example https://docs.google.com/spreadsheets/d/1AbC…/edit#gid=0.
6. Click Get data from Google Sheet.

7. The View Data section below shows the first rows. Check that the columns and rows look right.
8. Click Save Data Source under the preview. If this is the project's first data source, a window titled IMPORTANT appears; click I understand.

Optional settings#

• Automatically detect header row is on by default. Turn it off to choose yourself with First row is header row.
• Sheet ID (Optional): leave empty; TeleportHQ reads it from the URL.
• Range (Optional): fetch only some cells, for example A1:D50.
• Max Rows (Optional): limit how many rows are fetched, for example 100.

Use a specific tab of the sheet#

By default, TeleportHQ reads the first tab of your Google Sheet. To use another tab, open that tab in Google Sheets and copy the URL: it ends with #gid= and a number, for example #gid=123456. Paste that full URL into Sheet URL.

Check that it worked#

The Google Sheet appears as a card in the Data Sources panel. To show its rows on a page, add an Array Mapper and bind it to the sheet. See How to show a list of items.

Troubleshooting#

"Failed to load preview" TeleportHQ couldn't read the sheet. Usually the sheet is private. In Google Sheets, click Share, set access to "Anyone with the link", and try again. Also check that the URL is complete.

"Please load preview data before saving" You clicked Save Data Source before loading the data. Click Get data from Google Sheet first.

The columns are named A, B, C or the first item is my header Header detection guessed wrong. Click Setup Google Sheet to open the setup again, turn off Automatically detect header row, then turn on First row is header row and click Get data from Google Sheet again.

The editor shows old data after I changed the sheet Select the list bound to the sheet and click Refresh in its settings. See Why does my data look different in the editor and on my live site?

Good to know#

• Editing the sheet updates your site. Your published TeleportHQ site reads the sheet again at most once a second, so reload the page a few seconds after you edit the sheet and the change is there. You don't need to republish for content changes. If the list on the page has caching turned on, the change shows once its cache time runs out. Changes to the design always need a publish.
• TeleportHQ reads the sheet but never writes to it. You can't add or edit rows from the editor. To edit data inside TeleportHQ, import the spreadsheet into the TeleportHQ database instead: see Import data from a spreadsheet file.
• A Google Sheet can be the source for a details page, one page per row. See Create a page for each item.
• To change the sheet's settings later, click its card in the Data Sources panel. The preview loads again; change a field, click Get data from Google Sheet, then Save Data Source.