Airtable to Webflow CMS Sync Using Byteline

August 13, 2021
8
-minute read
 
Airtable to Webflow sync, Airtable, Webflow CMS, Airtable trigger

WEBINAR

Join our free webinar on

Using Byteline Web Scraper

Thursday Jun 10 at 1 pm ET

Join us to learn the usage of Byteline's no-code Web Scraper along with its Chrome extension. We will then utilize it to scrape an eCommerce store.

Check out the agenda and let us know what more should be covered.

Airtable to Webflow CMS sync using Byteline

Airtable is an innovative tool for maintaining data in a no-code tech stack. Airtable datastore can act as a single source of truth, whereas Webflow CMS datastore only displays the data you want your users to view. As a result, Airtable serves as a superset of the data in Webflow CMS. Recently, Byteline unveiled a fantastic feature to sync Airtable data to Webflow CMS automatically. It offers an agile workflow in which you can push the Airtable changes directly to Webflow. All you need to do is update the Airtable records, and Byteline will sync it to Webflow CMS.

This sync uses “Airtable trigger” that invokes a Byteline flow whenever the data changes in Airtable. You can use this trigger on any Byteline flow to execute your custom logic, but we specifically explore Airtable to Webflow sync in this blog.

How To Update Data Using Airtable Trigger

In this blog, we have uncovered a few easy steps to help you update data and publish it to Webflow CMS using Byteline’s Airtable trigger. 

We have divided this article into two sections to convey an easy understanding, as illustrated below: 

  1. Configure Airtable Trigger
  2. Configure Webflow - Update Items

Let’s begin.  

Create Flow

In this section, you will learn how to create a flow and synchronize the Airtable base with the Byteline’s Airtable trigger node.  

Step 1:  Click on the add button next to the FLOWS tab in the left sidebar of the console to create a new flow.  



Step 2: Click on the Airtable Trigger node in the select trigger node window to initiate the flow.



Step 3: Click on the add button on the top-left corner of the Airtable-trigger node. 



Step 4: Select the Webflow-Update Items node. 



With the end of this step, your flow shall be created successfully. 


Configure Airtable Trigger Node

Step 1: Click on the edit button to configure the Airtable Trigger node. 

Step 2: Click on ‘Configure it now’.


To connect your Airtable base with the Airtable trigger node, you need to generate an Airtable API key, as shown below.

Note: To complete the configuration, you need to integrate the Airtable trigger node with your Airtable base. 

Step 3: Sign in to your Airtable account.


Step 4: Navigate to your account page by clicking on the user icon at the top-right and selecting the account option from the drop-down. 


Step 5: Click on the Generate API Key button as shown below.

Note: Copy the API key and navigate back to the Byteline console.

Step 6: Paste the API key in the API field under the connections tab and click the Save button to set the connection. 

Once the connection is established, you will need to navigate to the Airtable trigger configuration window

Base ID 

Step 7: Click on ‘here’ to fetch the Airtable base Id. 


Step 8: Select a base from the Airtable API for which you want to fetch Base ID. 



Step 9: Copy the Base Id string as shown below. 



Step 10: Paste the copied string in the Airtable Base Id field.




Table name

Step 11: Go to the Airtable and check the required table name mentioned there.



Step 12: Enter the table name in the table field.


View (Optional)

Only the data appearing in the view shall be returned if the Airtable view is specified. If it's not specified, then all the data from the table shall be returned.

Step 13: In the Airtable base, you can find the ‘view type’ in the top-left corner of the console.


Step 14: Enter view type in the view field of the configuration window. 


Poll Period

Step 15: Select the poll’s duration from the drop-down to trigger the flow in a regular time period. 

Note: Select the poll period according to the frequency of data changes in your Airtable.


Trigger Type

There are two types of trigger:

1. Create - The flow is triggered whenever a new record is created in the Airtable.

2. Create and Update - The flow is triggered whenever a new record is created and updated.

Step 16: Select any of the trigger types from the drop-down.


Click on the save button to save the node configuration.



Configure Webflow - Update Items

Step 1: Click on the edit button for configuring the Webflow-Update Item node.





Step 2: Click on SignIn to Webflow CMS button. 



Step 3: Tick the checkbox for allowing access to a particular site. 



Step 4: Click on the Authorize Application button for allowing access to the application. 



Step 5: Click on the site dropdown and select any of the sites


Step 6: Click on the collection dropdown and select any of the collections



Step 7:Tick the loop over checkbox and click on the select variable tool to pick an array. 



Step 8: Click on the input values tab.


Step 9: Click on records to pick the records array path. 



The record array path shall be fetched automatically in the loop over field. 

Similarly, click on the select variable tool for each field to retrieve the specific array path for mapping the collection field. 


Or 

Enter the array name in the ‘Mapped to’ field, and it will suggest the relevant array path available. Select the required field. 


Step 10: Click on the save button to save the configuration. 



Step 11: Click on the test run button to execute the configured flow. 



Step 12: Click on the run button in the confirmation dialogue window. 



Step 13: Click on the information icon to view the output.



The Airtable trigger node has successfully triggered the Webflow CMS to reflect the updated data. 

How Does the Configured Flow Work?

To update data on your Webflow, you can directly make changes in the Airtable records by following the steps illustrated below.

Step 1: Update the data in the Airtable record.

For example, if you have changed the status from created to published or vice versa in your Airtable Base, the entry for the same should be updated in Webflow.


Step 2: Go to the Airtable trigger node configuration window in the Byteline console. Click on the advanced dropdown and select the filter option to filter out the required records. 


Step 3: Enter the Airtable column name and value in the equals to field. Save the configuration.

Step 4: Execute the flow and check the node information to view the output.


The published status is updated in the Webflow CMS. 


Conclusion

Byteline’s Airtable to Webflow sync migrates all your Airtable data into Webflow CMS and synchronizes them automatically. Try this flow today to avoid the hassle of manual intervention. Whenever the Airtable trigger detects any change, it will update your Webflow CMS accordingly to maintain an identical data.

Don’t waste another day on those broken API calls. Get it done in minutes with Byteline’s trigger node, a solution that works out of the box! Say goodbye to complicated integrations. 

Resources

https://docs.byteline.io/article/fb1rsq7gj5-airtable-trigger

Upvote this feature

If you like this feature and are interested in using it, please upvote it from the Byteline Console at https://console.byteline.io

How can I use it?

This feature is generally available and you can start using it from the Byteline Console at https://console.byteline.io/

Byteline logo

Byteline is a no-code development platform that can cut your development time and cost to a fraction for building production-grade applications. So that you can focus on business, not on development.
The platform provides built-in support for commonly used no-code services such as database, user signup and access control, etc. Sign up today to start building a no-code backend! More info at https://www.byteline.io.