Multi-reference syncing between Webflow and Airtable with Nobull

How to use Nobull to create multi reference connections between Webflow collections from Airtable data.

Overview

In their quest to fill the gaps in Webflow functionality and make the platform even more powerful, Finsweet has released a tool call Nobull that syncs Webflow collections and Airtable Bases. Overall the tool delivers as promised and is a breeze to set up. It definitely makes life a lot easier for people who have both Airtable and Webflow in their stack. In our initial research and tinkering, we found several tutorials on how to setup syncing for basic fields — but we didn't find much help on multi-reference syncing, and we ended up stepping on a few rakes as a result. That said, once everything was setup properly, the Nobull <--> Webflow syncing was straightforward an really helpful.

Side note: There is another tool called PowerImporter that seems to have similar functionality. We haven't kicked the tires on Power Importer (yet), so we can't speak to the Power Importer / Nobull comparison.

Setup, things to know and rakes we stepped on

Finsweet has a few videos on setting up Nobull - so if you've never tried setting up the app, I recommend checking out the Finsweet Nobull support page.

As a result, this isn't an exhaustive list for setup - but a few key things we ran into that are worth calling out.

First, you need a paid Airtable account that allows you to run Airtable Apps. I had been using the free tier of Airtable, so I ended up biting the bullet and paying the $240 annual subscription.
Nobull does not seem to work with Synced Tables in Airtable. In other words, your data must live directly inside the Airtable Base you are syncing with Nobull — the data can't be pulled in from another Base. Every time I tried using Nobull with a synced base, the publish option was inactive.

You can reuse your Webflow site's API key for multiple connections. During troubleshooting I was removing/adding Nobull connections quite a bit — reusing my Webflow site's API key worked just fine and saved a few clicks.
In order to sync to a Rich Text Field in Webflow, your Airtable Long Text field must have the "Enable rich text formatting" option selected.

‍

Required fields

During setup I made the mistake of not exactly following the field setup instructions. This caused Nobull to fail every time I tried to sync. Below are the key fields that tripped me up. Or you can visit the full Nobull Documentation page.

Webflow collection Item ID
Slug
Name

Airtable -> Webflow

If syncing Airtable -> Webflow you'll also need the following fields. This is where I originally got tripped up. (Be sure there are no typos, extra spaces or modifications to these.)

Publish (Checkbox)
Status (Single Select) with three (and only three) options: Draft, Archived, Active.

Multi-reference Syncing

There are a few key steps to setting up multi-reference syncing between your Airtable Base and Webflow with Nobull. I think it's easier to think through the setup from a Webflow first perspective - so I'll explain it that way below. That said, whatever place you're starting from, you need to have duplicate collections/tables in Webflow and Airtable.

This probably goes without saying, but just to be clear — any collections that will not be synced can be ignored for the purposes of Nobull setup and syncing. In other words, you do not need to recreate every collection in Airtable in order for Nobull to work (and vice versa if you're starting in Airtable). You only need to have duplicate tables for the data you are intending to sync.

Setup and Syncing

Create your Webflow collections. This includes all collections that will be used as multi-reference collections.
Create records in Webflow. My multi-reference collections were effectively metadata tags, so after creating the collections I added my collection records directly in Webflow. You can create records in Airtable and sync from Airtable -> Webflow, but you'll need a few more fields in your Airtable (see above). Since my multi-reference records will rarely change, I am syncing Webflow -> Airtable.
Create tables in Airtable. For each collection in Webflow you'll need to create a corresponding table in Airtable. Depending on which way your data is syncing, your required fields will be different (see above).
Add Nobull connection for every multi-reference collection. In order to sync the main collection that has the multi-reference fields, we need to get the multi-reference collections synced up first.
Add Nobull connection for main collection that contains multi-reference fields.

Basically, you need to create a redundant collections/tables in Webflow and Airtable for all the data you want to sync. Once those "databases" have been setup - then you're able to connect each one with a new Nobull connection. As a result, you'll may end up with several Nobull connections in a single Airtable base.

Multi-reference syncing between Webflow and Airtable with Nobull

More tutorials

Dynamic images in Webflow with SVG's or sprites

Webflow + Jetboost

Add multiple nested lists in Webflow

View the structural outline of a webpage with the HTML outliner