GETTING STARTED

How to Setup?

Learn how to get started with CMS Bridge from scratch

Pre-requisites

Before you start, you will need an Airtable base & a Webflow CMS Collection.

Airtable

Webflow CMS

  • Free plan has a limit of 50 CMS items. If you need higher item limits, upgrade the plan.
  • Create a Single Line Text Field called record-id (or anything you want) in every CMS Collection that you want to Sync with Airtable.
⚠️ Do NOT mark it as a Required Field in Webflow.

Login to Finsweet account

You need a Finsweet Account (it’s Free) to use CMS Bridge.

Finsweet Account is used to store tokens, track Sync usage, and manage billing.

Finsweet does NOT store any data you sync and is not responsible for the content you sync/publish. Read more about it in our Privacy Policy & Terms of Service.

Create a Connection

1 Connection can sync 1 Webflow CMS Collection to 1 Airtable Table/View, or vice versa.

API Tokens

Airtable

You can add as many Airtable Bases as required, even from different workspaces. 😉 The stored token can be reused to build more Connections.

Webflow

You can add as many Webflow websites as required, even from different workspaces. 😉 The stored token can be reused to build more Connections.

Select Source

Select the direction of dataflow.

⚠️ Before Syncing, take backups in both Airtable Bases and Webflow Websites to prevent unintentional data loss.

Link Webflow & Airtable

Link Webflow Website to Airtable Table .

Link Webflow CMS Collection to Airtable View.

If the data flow is from Airtable to Webflow, then:

  • Airtable View can be selected
  • Airtable Synced Table can be selected
💡 We highly recommend to create an Airtable View that's dedicated to CMS Bridge. Call it ⚡ Synced with website, or anything you prefer.

Mandatory Fields

Mandatory Fields have a 🔒 icon, which means, it cannot be edited. These fields are required for CMS Bridge to operate.

Webflow

You already know, Webflow’s name and slug fields are mandatory in a CMS collection. Webflow CMS item ID is Webflow’s unique identifier for a CMS item. Using CMS Bridge, we can auto-create the fields & auto-link them in Airtable.

CMS Bridge 1

CMS-B: Action

This field gives you the power to control the state of every Webflow CMS item. You can request CMS Bridge to draft, archive, stage, publish or delete an item, during a Database Sync; If successful, then CMS Bridge will respond by updating the same field.

Note that the Re: prefix denotes a Response from CMS Bridge.
Options without the  Re: prefix are Requests from the user to CMS Bridge.

If you do not select any request, then the default state is to Stage item in Webflow.

If any item failed to sync, then the response is Re: Item encountered error.

In case of an error, find the error message in the CMS-B: Message field.

CMS-B: Message

This field displays the latest error message, only if an item fails during a Database Sync. You can then debug it and re-sync the Connection. ⚠️ Note that the old error messages are overwritten.

CMS-B: Sync time

This field displays the date & time at which the last Sync occured.

CMS Bridge 2

Additional Field Linking

We have 2 different pages for Field Compatibilities. Depending on your data flow, select one & pay attention to Notes.

{{airtable-element}}

Things to Know:

CMS Bridge UI

If the color of the -o- icon (located between the 2 fields) is Grey, then the Field Link is unsuccessful.

If he color of the -o- icon (located between the 2 fields) is Green, then the Field Link is successful.

If you want to delete a Field Link, then hover over the -o- icon (located between the 2 fields) and click on the red 🗑️ icon.

Connections are auto-saved every time you click Exit. If you want to delete a Connection, do it from the Dashboard.

Airtable → Webflow

  • Ensure the intended CMS-B: Action is selected
  • Learn more about How to minimize the Credits usage?
    • From the dedicated Airtable View, all items whose Last Modified Time changed will be Synced
    • Recommended: create a separate field to trigger the Last Modified Time Field

Webflow → Airtable

  • Airtable View cannot be selected for the Webflow to Airtable dataflow. So all data from Webflow CMS is synced with the default Airtable View.

Credits

Database Sync

❗Before performing a Database Sync, take backups in both, Airtable Bases and Webflow Websites, to prevent unintentional data loss.
⚠️ CMS Bridge will mirror the data from one platform onto the other, which means, any unmatched data will be deleted by CMS Bridge. If you are integrating CMS Bridge into an existing setup, as in, some data is present in Webflow & some other data is present in Airtable, then read Integrate into Existing Projects  to safely setup CMS Bridge.
✅ After a Database Sync is complete, it is always a good practice to check if all data has been synced as intended.

If you click Sync, then a Database Sync will start. If you cancel during a Database Sync, then a partial Sync would’ve occurred. Look at CMS-B sync time Field to get clarity.

Note:

  • Airtable: data updates in real-time.
  • Webflow: refresh the Designer to see updates.

Yellow Color

Database Sync is currently in progress. CMS Bridge needs time to Sync, so you can either wait or close the Airtable browser window & get back to it in sometime.

Green Color

Database Sync was successful.

Red Color

At least 1 item encountered an error, look at CMS-B message Field to get clarity.

If the same Connection fails a 2nd time, we display an error reference id. Please use it to contact our support.

Read about common pitfalls at TroubleShooting

Dashboard

Names of Connections cannot be edited. The naming convention is:

  • Airtable Table name - Airtable View name
  • Webflow Website name - Webflow CMS Collection name

This ensures every Connection is unique.

Learn How Credits are consumed per Database Sync?

Tutorial