Use Case

Airtable to Webflow CMS sync

CHECK OUT THE BYTELINE FLOW

Here is the Byteline flow used for this use case. You can clone it by following the link
How to Sync from Airtable to Webflow?

get started free

Sign up today to get ahead using our bleeding-edge, no-code service.
1
Airtable Trigger
Airtable trigger makes the flow run at regular intervals based on the configured poll period. Each run gets the changed Airtable records since the last run and then invokes the flow with those records as the input.
2
Webflow CMS update from Airtable trigger
The changed records are input to the Webflow CMS Update task, which inserts or updates the Webflow items based on the defined mapping and the configured primary key.

Step by Step Instructions

Byteline step by step blog

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 Airtable 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.

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. This works by using Airtable integrations and Webflow integrations through their APIs.

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.  

1. Configure Airtable Trigger Node
Base ID
1. Heading Category
Sub-Heading
Sub-Heading
Sub-Heading
2. Heading Category
Sub-Heading
Sub-Heading
Sub-Heading
3. Heading Category
Sub-Heading
Sub-Heading
Sub-Heading
3. Heading Category
Sub-Heading
Sub-Heading
Sub-Heading
3. Heading Category
Sub-Heading
Sub-Heading
Sub-Heading

Create flow

In this section, you’ll learn to create the flow. For more details, you can check How to Create your First Flow Design.

 

Step 1: Enter the flow name to create your new flow.




Step 2: Select the Scheduler trigger node to initiate your flow. 


Now, you need to configure the Scheduler Node to run the flow at a regular interval of time.


So, let’s get started with Scheduler node configuration! 


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

With these easy steps, you can simply extract products from a Shopify product scraper and put them into an Airtable using Byteline's Shopify Store Scraper node. The no-code Shopify Store Scraper node makes it simple to extract data without having to know how to program in high-level languages. 

It’s amazing, right? So, don’t forget to let us know how you have liked this new node in the comment section below.