Links

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%"
}
]

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>
Last modified 1mo ago