Build a Local Business Directory: Sync API Data to Webflow with No-Code

Building a local business directory that updates itself is simpler than you think. We'll show you how to create an auto-updating climbing gym website using simple no-code tools.

We'll walk through connecting live business data to your website using Airtable as the database and Webflow for the front end. While we're using climbing gyms as our example, you can adapt this approach for any type of directory – from coworking spaces to remote jobs.

Here's what we'll use:

• RapidAPI for local business data
• Airtable as our database
• Data Fetcher to automate API imports
• Webflow for the website
• Whalesync to connect Airtable to Webflow

Whether you're building a niche local guide or planning to scale across multiple cities, this approach lets you focus on growing your directory rather than updating it.

Setting Up Your Data Source

First, we need to get business data flowing into our directory. We'll be using RapidAPI to access local business information, which we'll then store and manage in Airtable.

Getting Started with RapidAPI

1. Go to RapidAPI.com and create a free account.

2. Find a local business data API in the API marketplace. We recommend this one.

3. Subscribe to the API. The free tier gives you 500 business results per month, which should be enough to follow this tutorial. Upgrade to a paid plan for more.

4. Make a note of your RapidAPI API key. You can see this in the sample request documentation for any API.

Creating Your Airtable Base

Let's set up our database to store both cities and climbing gyms. We'll start with two separate tables: one for cities we want to cover, and another for the gyms themselves.

Cities Table

Create a new base in Airtable and add a table called "Cities" with a single field:

• Name (Single line text)

Add the cities you want to cover, one per row. For example:

• Boulder
• Austin
• Seattle
• San Diego
• Portland

Gyms Table

Create a second table called "Gyms" with these basic fields:

• Name (Single line text)
• City (Link to Cities table)
• Address (Single line text)
• Phone (Phone number)
• Website (URL)

Setting up Data Fetcher

First, install Data Fetcher from the Airtable marketplace by clicking "Extensions" in the top right of your base and searching for "Data Fetcher." Once installed, sign up for a free Data Fetcher account. Now let's set up our first API request.

1. Click "Create request"

2. For Application, select "Custom" to enter our own API details

3. For URL, enter

https://local-business-data.p.rapidapi.com/search?limit=100&query=rock climbing gyms in

Note: The limit=100 parameter ensures you get comprehensive results for each city.

4. For the `query` URL parameter:

• Add a space after "rock climbing gyms in"
• Click the "+" icon on the right

• In the popup window, set:
  • Table: Cities
  • Field: Name
  • Run for every record in view: Grid view

The `query` parameter in the URL will now have a reference to the "Name" field in our "Cities" table.

5. Click on the Headers tab and add:

• x-rapidapi-host: local-business-data.p.rapidapi.com
• x-rapidapi-key: YOUR_RAPID_API_KEY

6. Set Output Table to:

• Table: Gyms
• View: Grid view

7. Name the request "Get Gyms for City".

Mapping and Running Your Request

1. Click Save & Run.

2. In the Response Field Mapping screen, map these fields:

• Name → Name (existing)
• Address → Address (new)
• Website → Website (new)
• Photos sample photo url -> Photo (new)
• Business id -> Business id (new)

3. On the Response Field Mapping screen, open the settings sidebar (top left) and find Advanced Settings.

• Under Update Based on Field(s), select "Business id"
  • This helps avoid duplicates by matching existing records
• Under Add fixed value, select "City" field
  • This maintains the connection to your Cities table

4. Click Save & Run to import gyms for all your cities

Setting Up Automated Updates

To keep your Airtable database up-to-date, you can use Data Fetcher's schedule feature (requires a paid Data Fetcher plan):

1. Return to the Data Fetcher extension
2. Find the Schedule toggle
3. Set your preferred update frequency (e.g., hourly)

Building Your Webflow Site

Let's create a simple directory website with a homepage showing all gyms and individual pages for each location.

Setting Up Collections

1. Create a new Webflow site (from blank site, not template)
2. Go to the CMS panel and create two collections, adding fields for all those we have in our Airtable database:

Cities Collection:

• Name (Plain text)

Gyms Collection:

• Name (Plain text)
• Address (Plain text)
• Website (URL)
• City (Reference → Cities)
• Photo (Image)

Use Webflow's "Generate Sample Items" so you can design your site with realistic data before connecting to Airtable.

Building the Homepage

Design your homepage however you'd like - add hero sections, navigation, or any other elements that match your vision. The key component we need is a Collection List to display our gyms:

1. Add a Collection List wrapper where you want to display your gyms
2. In the Collection List settings:
   • Select "Gyms" collection
   • Inside the Collection item, add and bind:
     • Link block (Set Link settings to "Current Gym" - this creates a link to each gym's individual page).
     • Image (bind to Photo field)
     • Heading (bind to Name)
     • Text block (bind to City -> Name)
3. Style your Collection List item to match your design - make it a card, grid item, or any other layout that works for your site

Creating the Gym Template

Each gym will have its own page using a template you design. Access the template by opening the Gyms collection page in the Pages panel. Design the page layout however you'd like, making sure to add elements bound to your CMS data:

• Bind text elements to fields like Name, Address, Phone
• Add the Photo field to an image element
• Include the Website link
• Display the City reference

Finally, Publish your Webflow website.

Connecting Airtable to Webflow with Whalesync

Time to connect your database to your website! Whalesync acts as a bridge between Airtable and Webflow, ensuring any changes in your Airtable base are automatically reflected on your website. When Data Fetcher updates your Airtable database with new gyms, Whalesync will push those changes to your Webflow site in real-time.

1. Sign up for a Whalesync account and create a new sync

2. Connect your accounts

• Choose Airtable as the first Data Source
• Select Webflow as the second
• Follow the authentication steps for both

3. Map your "Cities" table:

• Source: Cities (Airtable)
• Destination: Cities (Webflow)
• Map the Name field

4. Create a table mapping for "Gyms" too, and map the following fields:

• Name → Name
• Address → Address
• Phone → Phone
• Website → Website
• Photo → Photo
• City → City

5. Back in the Webflow CMS, delete all the sample collection items we created earlier. We only want the real local business data from Airtable.

6. In Whalesync, perform the intitial sync and then activate the sync.

Webflow automatically generates SEO-friendly URLs for each gym page. You can customize these in the Gyms collection settings if needed.

Wrapping Up

You now have a fully automated directory that:

• Fetches fresh business data via API
• Stores and organizes it in Airtable
• Automatically updates your Webflow site with pages for each location
• Maintains itself with minimal ongoing work

Want to scale? Simply add more cities to your Airtable base, and watch your directory grow automatically!