In this blog, you will learn to
⁃ Create your Airtable dataset ⁃ Convert Airtable dataset to JSON ⁃ Create your webflow CMS collection ⁃ Convert JSON from Airtable to Webflow CMS Collection
Let’s start learning !! 🔥
If you love video tutorial then we also have video tutorial for you.
Step 1 : Make your Airtable dataset
We have imported product hunt data to JSON using POSTMAN. Converted it to CSV and uploaded on Airtable. You can have other kinds of dataset, e.g. USERS, EMAIL List, STORE ITEMS depending on the app you are building in Webflow. You can make any kind of dataset for this tutorial in Airtable. Make sure you keep the “name” and “slug” unique to each collection item.
NOTE. Webflow needs 2 x important fields in all their collections 👉 “name” and “slug”.
Step 2 : Convert Airtable data to JSON
⁃ Log in to NoCodeAPI dashboard ⁃ Look for “Airtable” in marketplace and activate it.
⁃ Click on
Make Airtable API
⁃ A sidebar appears.
Name of your choice in 1st input field
⁃ Copy your
Airtable API key from your Airtable Account URL :— https://airtable.com/account
⁃ Copy your
Base ID at your Airtable API URL :— https://airtable.com/api
⁃ Paste these credentials in the required fields.
⁃ Click on
Create button to generate your endpoint.
⁃ Using this endpoint we are going to import our Airtable data in JSON and then push it to Webflow.
Step 3 : Create Webflow CMS Collection
⁃ Click here to sign in to webflow dashbaord. ⁃ Create “+ New Project”
⁃ Select “Blank” website and press continue to enter your website building dashboard. ⁃ Click on “CMS” icon in the left panel and select “Create New Collection”
⁃ Give your collection the name “Products” ⁃ Add 4 x Custom Fields to your collection :— “Category”, “Votes”, “Tagline” and “Photo”. ⁃ Click “Save Collection”.
⁃ You should see your collection listed inside the Collections’ sidebar.
⁃ We do not have any products listed inside this collection. We are going to fetch Airtable data to this collection.
Step 4 : Create Webflow endpoint in NoCodeAPI
⁃ Go back to nocodeapi dashboard ⁃ Go to marketplace and activate “webflow”.
⁃ Click on “+ Make webflow API”
⁃ A sidebar appears on the dashboard. ⁃ Give a custom name to your app in the “webflow form”.
⁃ To find your API Access Key, go to webflow dashboard. ⁃ Click on “…” dot button in the bottom right of your project.
⁃ Click on “settings” in the popover menu
⁃ Click “Integrations” tab button in your settings panel
⁃ Scroll down to find your “API Access”. ⁃ Click on “Generate Token” button to get your API Key. ⁃ Copy this token to your clip board.
⁃ Paste this token to your NoCodeAPI “webflow form. ⁃ “Select Channel” now lists your webflow project name in the dropdown. ⁃ After you select your channel, the “Select Collection” input lists your “Collection” name in the drop down. ⁃ Select “Products” collection.
⁃ Click “Create” button to generate your webflow endpoint.
Step 4 : Convert JSON from Airtable to Webflow
⁃ Click on the “…” button in the right corner of your Webflow endpoint. ⁃ Click on “Import data”
An overlay opens that shows us a “GET” request field to fetch JSON Data. We do not have a URL to paste here. First we are going to get our JSON URL and then we will fall back to filling up webflow import overlay.
We have our Airtable endpoint which we created in Step 2. We are going to modify this endpoint for our webflow import requirements.
⁃ Go to “Airtable” from the marketplace and click on “Use this API” button located just above your Airtable API Endpoint.
⁃ In your playground, click on “GET” request to fetch all items listed in Airtable. ⁃ Enter the name of the “table” > in our case it is “products” and press “Click & Test API”
⁃ Click on “Response” tag to view your fetched data. ⁃ Copy your “Success API Endpoint”.
⁃ Go back to “Webflow” API from marketplace and click on “Import data” button.
⁃ The playground overlay opens ⁃ Here paste your “Airtable” endpoint we copied in previous step. ⁃ Click on “Fetch Data” button.
⁃ Another overlay opens. Write “records” as the name of the array. Note that, our data is nested under “records” array. ⁃ Click “Submit”.
⁃ After your data is fetched. You should find the sample table showing your selected records. Here select the records you have listed in Webflow. In our case we have selected
⁃ Click “Next Step” to start formatting your data for webflow.
⁃ Edit the right hand side of each
key: value pair by clicking on edit icon. I have changed all values exactly like they are showing in webflow. If our data does not match the field names of webflow, JSON will not be pushed. Make sure you enter these headings similar to the field names in webflow.
⁃ Click on “Push data” button to start loading your data to webflow.
⁃ Once your status bar gets to 100% and all lights are green — you will find your data pulled from Airtable into webflow.
This is it !!
You can fetch any kind of JSON to webflow until it has a “name” and a “slug” field attached to it. Else you can pull your JSON file to Airtable. Add
slug columns and follow above steps. This will easily push all your data from JSON to Webflow CMS Collection.
I hope you liked this article. If you are finding anything confusing, you can always reach us on our telegram group at this link.
Thank you for reading. Happy Coding. 👍