Google Sheets Data Source ⛔

Use Google Sheets as a Datasource in Webflow

CURRENTLY SA4 ONLY This datasource will be completely redesigned for SA5.

Sygnal Attributes can use a public Google Sheet as a datasource. It retrieves the Google Sheet data as CSV and converts it to JSON for easy use.

EXAMPLE - Google Sheet to JSON

Requires a Google Sheet ID which is configured for public read access.

[
  {
    "Rank": "1",
    "Country": "China",
    "Region": "Asia",
    "Population": "1,411,778,724",
    "Percent": "17.90%"
  },
  {
    "Rank": "2",
    "Country": "India",
    "Region": "Asia",
    "Population": "1,381,914,537",
    "Percent": "17.50%"
  },
  {
    "Rank": "3",
    "Country": "United States",
    "Region": "Americas",
    "Population": "332,367,628",
    "Percent": "4.21%"
  },
  {
    "Rank": "4",
    "Country": "Indonesia",
    "Region": "Asia",
    "Population": "271,350,000",
    "Percent": "3.44%"  
  }
]

Open Google Sheet

Usage Notes

Make certain that the Google Sheet is publicly accessible for read-only viewing. This is what the sharing settings will look like.

Google document sharing

Code example

This is a simple example of retrieving the content of a Google Sheet, and then displaying it as an HTML table.

<script type="module"> 
import { getGoogleSheetData } from 'https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/datasources/google-sheet-data.min.js'; 
import { displayDataAsHtml } from 'https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/modules/webflow-html.min.js'; 
$(function () { 
  // Get data 
  const sheetId = '16lPOiFz5Ow-FTro5SWS-m00fNhRjgsiyeSBdme3gKX0';
  getGoogleSheetData(sheetId)
    .then((res) => { 
      displayDataAsHtml( $("#json1"), res );
    }, (err) => { 
      console.log(err); 
    }); 
}); 
</script>