Accessing Airtable data from the browser

Ask the community
#1

My company is using Airtable as the primary back end for our e-commerce site. We love the UI for viewing and updating records, and we love using Airtable automations to manage processes like tracking product inventory and sending transactional emails.

Now I want to incorporate our Airtable data into our Webflow site. More specifically, I want to fetch product data from Airtable on the client. However, I see two issues:

  1. I don’t want to expose our API key.
  2. Our requests to the Airtable API will likely to exceed the rate limit of five requests per second per base.

Has anyone else hit similar issue while trying to incorporate Airtable data into an existing website? If so, did you find a way to safely and reliably access Airtable data from the browser, or did you have to migrate from Airtable to a tool more geared towards building APIs?

The Airtable API docs recommend using a caching proxy for high read volumes, but some of our data (such as product inventory) update frequently, and I don’t want the client to receive outdated information.

#2

There are many ways of presenting Airtable data in a website. Which method to use depends on several factors:

  • is the data view only, or do clients need to be able to update the data?
  • should the data be publicly accessible, have a single generic password, or have different passwords for different users?
  • how much control do you want over the formatting of Airtable data?
  • how much Airtable branding are you willing to have?
  • how much are you willing to pay up front versus ongoing costs?
  • what is your existing website platform?

The easiest way to include Airtable data in a website is to simply embed a view. This is quick and easy, but you have very little control over how the data is displayed. If you have a pro subscription, you can also password protect the view.

If you have a WordPress website, the AirPress plug-in is a free method of incorporating Airtable data in a website. Your API key is stored on the server, away from the client. The plug-in also takes care of caching, and you can set how old the cached data can be before a new api call is required. If you have many people requesting data in the exact same second for different records that are not cached, it is still possible that you might run into API limit issues.

There are also several paid third-party services for displaying Airtable data in a website. Maybe they will chime it.

#3

Chiming in! :laughing:

I’ve built an app that mirrors your Airtable base with your Webflow CMS. Whether you add, update, or delete a record in Airtable, it updates your Webflow CMS accordingly. https://www.powerimporter.com/airtable-webflow-sync

I’m looking for more beta testers if you’re interested in trying it out.

#4

Thanks so much for your response, @kuovonne!

In my scenario…

  • The data is view-only and publicly accessible.
  • We want a lot of control over the formatting of the data, and we don’t want any Airtable branding.
  • Our existing website platform is Webflow.

Based on your response, I think I’ll want to consider a couple different approaches:

  1. Sync data from Airtable tables into Webflow collections.
  2. Find a tool similar to AirPress (but for Webflow) for accessing Airtable data from Webflow.

Too bad the Airtable API doesn’t offer different authentication methods or higher rate limits. Those features could make it much easier for a startup to use Airtable as its primary back end.

I’ll do some more digging and see what I can come up with - thank you again for laying out these questions and options!

#5

Ah, very cool! I’d definitely be interested in learning more.

#6

I’m curious, did you find a solution?