How to Connect Airtable to Webflow

Are you looking to bring data from your Airtable base into your Webflow site? The Webflow API and Airtable API make it easy to sync the two platforms and create dynamic and data-driven websites.

In this tutorial, we’ll go through the steps to connect Airtable to Webflow and use the data from Airtable to create or update an element on your Webflow site.

Prerequisites

Before getting started, you’ll need the following:

• An Airtable account with at least one base containing data that you want to use on your Webflow site
• A Webflow account and a site to which you want to add the Airtable data
• Basic programming knowledge and the ability to write code in JavaScript

Step 1: Set up your Airtable API key

To use the Airtable API, you’ll need an API key. Here’s how to get one:

1. Log in to your Airtable account and click on your profile picture in the top right corner of the page.
2. From the dropdown menu, click on “Account”.
3. Scroll down to the “API” section and click on “Generate API key”.
4. Copy the API key that is displayed. You’ll need this key in the next step.

Step 2: Set up your Webflow API key

To use the Webflow API, you’ll need an API key. Here’s how to get one:

1. Log in to your Webflow account and click on your profile picture in the top right corner of the page.
2. From the dropdown menu, click on “Account settings”.
3. In the left menu, click on “API”.
4. Click on “Generate API key”.
5. Copy the API key that is displayed. You’ll need this key in the next step.

Step 3: Fetch data from your Airtable base

Now that you have your API keys, you can use the Airtable API to fetch data from your base.

To do this, you’ll need to make a GET request to the Airtable API, passing in your API key and the ID of the base that you want to retrieve data from. The API will return the data in JSON format.

Here’s an example of how you can make the GET request and store the data in a variable using the ‘request-promise’ library:

const rp = require('request-promise');

async function getAirtableData() {
  const options = {
    method: 'GET',
    uri: 'https://api.airtable.com/v0/YOUR_BASE_ID/YOUR_TABLE_NAME',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY'
    },
    json: true
  };

  try {
    const data = await rp(options);
    return data;
  } catch (error) {
    console.log(error);
  }
}

const airtableData = getAirtableData();

Step 4: Use the Webflow API to create or update an element on your site

Now that you have the data from Airtable, you can use the Webflow API to create or update an element on your Webflow.