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?

#7

Sorry for the delayed response, @JudoHacker. We settled on a two-part solution, at least for now:

  1. I added a “Sync” button to one of our key tables. When a user clicks this button, Airtable creates a “Sync request” record, triggering an automation. This automation uses the Webflow CMS API to sync the data in Airtable to Webflow.
  2. For certain fields that change frequently, I added Airtable automations. When the field value changes, the automation calls the Webflow CMS API to make the value there match Airtable.

It’s not the most elegant solution, but it seems to do the trick!

#8

You can also try Softr.io - a no-code platform that allows building powerful web-apps on Airtable. You can list, sort, filter, search over data from Airtable, send data back to Airtable, and have a fully custom web-app in the front.

#9

This topic was solved and automatically closed 15 days after the last reply. New replies are no longer allowed.