Auto-populate Live Data into Webflow using Google Sheets.
November 11, 2020
WEBFLOW AND GOOGLE SHEETS.
Just about any data source is available online, whether it’s in a vanilla text file, SOAP API (not fun), a REST API, or even a simple Google Sheet.
Here is how you pull live data into Webflow using Chart.js with data from Google Sheets.
Ben Englishby has provided us with amazing information, and some helpful steps to get started.
1. The Google Sheet must be published
2. The Google Sheet must be public
3. For the visualizations we used Chart.js and this script will need to be added in the head code of your Webflow project.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
Cloneable Webflow version here
Now we can access a Google Sheet in the form of JSON. Here is the Google Sheet used for the cloneable Webflow version.
Now, if we get the sheet’s URL, we’ll want to note everything after the last slash, if you would like to create dynamic links and pages in the CMS:
This is the sheet identity and what we need for the GET request we send to Google. To make a GET request for JSON, we insert that string in the URL in another URL. The important piece is the feed.entry object array located in the console. This holds vital sheet data.
The Google Sheets API has preceded each of the column names with gsx$ (e.g. gsx$date). These are exactly how we will dissect the data from the object, using these uniquely generated names. So, knowing this, it’s time to insert the data into some isolated arrays and pass them into our chart function. Add an HTML embed box to your project and use the script from the cloneable version.
Hope this helps!