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:
Let’s begin.
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!
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.
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.
Step 11: Go to the Airtable and check the required table name mentioned there.
Step 12: Enter the table name in the table field.
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.
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.
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.
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.
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.
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.
