How I use Airtable as CMS for Webflow: Turn the no code database into your content hub

Problem

I used to run a directory website using Webflow. The content needs to be always fresh, meaning constant publishing and updates. I even had to update it from my phone. Bulk edit was also a must for efficiency. But we know Webflow isn’t optimized for that. And I’m sure that’s pretty much what brought you here.

So what’s the solution?

Airtable.

Mobile app, check. Bulk edit, check.

I don’t run the directory website anymore so I can’t show you how the data transferred back and forth between Airtable and Webflow for the specific case, but I made a simple demo for this post explaining how to connect the two amazing tools.

Want no-code automation tips and secrets? I got you covered.

Subscribe to my newsletter. Don’t worry. I can’t code either.

Configuring your Airtable table

Let’s first look at the Airtable base I made. You can make a copy from here or you can simply open it and see how it’s set up.

My Airtable setup

It’s important that this Airtable table has all the fields that you see in your Webflow CMS Collection if you have one set up already.

The table has these columns:

• Title
• Slug
• Content (rich text formatting enabled)
• Description
• Button (Publish / Update)
• Webflow item ID
• Last updated time

One thing that might have caught your attention is the Webflow item ID column. Each Webflow Collection item has its own item ID just like all the Airtable record has its own record ID. We want to keep a certain Webflow Collection item and the corresponding Airtable record in sync. So it’s always a good practice to keep these IDs stored in both sides (Airtable and Webflow).

Button set up

The button setup is a little tricky. Every time a button is clicked, we notify Make (to be talked about later on) that the button has been clicked, and the clicked button belongs to which record so that Make will know which record to retrieve data from. As you can see in the screenshot, you can achieve that by adding the RECORD_ID() formula as a URL parameter.

"https://hook.eu1.make.com/chgp4uvhirvbr0ooeoud9zgco3ipi7bu" & "?record_id=" & RECORD_ID()

You can paste this formula into your button’s URL formula field. Just make sure to change the webhook URL to your own. If you don’t know how webhooks work, have a look at this post.

Complete guide to webhooks in Make (formerly Integromat)

Configuring a Webflow CMS Collection

Now that we have set up Airtable, let’s move on to Webflow. Basically, all you have to do is re-create all the fields you have in Airtable. If you already have a Webflow CMS Collection set up, make sure to add the same fields in Airtable so that it can store the same information with Webflow.

Just like we set up the “Webflow item ID” field in Airtable, let’s create an “Airtable record ID” on the Webflow side as well.

Configuring Make.com

It’s time to turn to my favorite automation tool: Make.com, the most flexible automation workflow builder. Here’s what the two scenarios look like (an automation workflow is called a scenario in Make.com).

You can download your scenario templates here. They are not free, but they sure will jumpstart your automation.

Make.com template: Airtable as CMS for Webflow | Blueprint

Breakdown: first scenario

Let’s have a closer look.

1. The Catch webhook module works as the trigger. It watches for the button click in Airtable, and the moment the button is clicked, the scenario starts running.
2. The Airtable Get content module takes the record ID received from the Catch webhook module then get all the information stored in the Airtable record.
3. Markdown to HTML turns the Markdown-formatted text in Airtable into HTML. The reason for this is that in Airtable, you are using Markdown to turn texts into headings, quotes, etc. However, Webflow requires HTML instead of Markdown.
4. If a Webflow item ID already exists in the Airtable record in question, it proceeds to the Update node. If not, it proceeds to the Publish node.
5. Finally, we take the item ID and the published / updated date and time from Webflow’s output, and return them into Airtable.

Let’s see if it works!

Great! It works beautifully.

However, there’s a problem. This scenario only pushes the content to Staged for publish in Webflow.

This means that we have to publish the whole site to make these go live.

We can do this via API. Let’s take a look at the second scenario.

Breakdown: second scenario

This scenario publishes your Webflow site every 15 mins, 30 mins, or whatever interval you set the scenario to.

Well, there’s actually an endpoint that push Collection items to live (as opposed to push them to Staged for publish). However, at the time of writing, there’s a glitch in the endpoint and it doesn’t work! I read some posts on Make Community, but apparently the error is coming from Webflow, not Make. If there’s no glitch here, our automation completes with one scenario, but for the time being, having two scenarios is our simplest solution.

That’s it, folks! You now know the basics of passing data between Airtable and Webflow. If you are still trying to wrap your head around it, playing around with the templates will definitely help. Once you do, go further and keep adjusting them to your needs.

Make.com template: Airtable as CMS for Webflow | Blueprint

What’s the catch?

There’s a catch, though. If you’re dealing with a CMS Collection of blog posts with many images in Webflow’s rich text field, the method I have just showed you doesn’t work because Airtable’s long text field doesn’t allow image upload (it’s very understandable).

There are workarounds you can implement, but it’s probably better off adding text first to Airtable and add images later on from desktop. But I guess at the end of the day, there isn’t much room for automation anyway if your content structures differ for every post.

That being said, if you are adding an image in the same area in every post (like a cover image), then Airtable is the way. You just have to create an attachment field in Airtable and pass the image URL into Webflow using Make.

Again, it’ll be easy if you play around with my templates first. It’s not free, but they will definitely jumpstart your learning.

Make.com template: Airtable as CMS for Webflow | Blueprint