How to embed an Airtable base in a Bubble app

You can embed the entire base if you have some data in Airtable that you’d like to display in your Bubble.io app. And the result looks better than what we can achieve by pulling Airtable data into Bubble and displaying the same in a repeating group. The whole process takes less than 5 minutes.

What do you need to embed Airtable in Bubble?

• Airtable base
• HTML element

Setting up the Airtable base

The first thing you need to do is get the embed code from Airtable. For this, click on share and then create a shareable view link.

Then select the option to embed this view on your site after making any changes if you’d like to the settings.

This will open a new tab where you can see your data and the embed code if you’d notice that the embed code is using iFrame. This means that we’d need to display the data in an iframe.

Copy the embed code mentioned in the black box. This code will change if you change the grid view settings. However, don’t worry if you modify any entry in your Airtable base. All the changes will reflect in your Bubble app as well.

Creating an iFrame in Bubble

Drag the HTML element, which will be under the Visual Elements tab on the left and resize it according to your requirements. Then paste your embed code in the component and check the Display as an iFrame checkbox.

Once you do that, preview the app to see the Airtable base embedded in your Bubble web app.

Suggested reading

Bookmark

How to connect Airtable with Bubble.io

This tutorial covers the steps to connect Airtable and perform operations on your Airtable data with Bubble.

→

Preview- https://nocodeassistant-tutorials.bubbleapps.io/version-test/airtable

Editor- https://bubble.io/page?type=page&name=airtable&id=nocodeassistant-tutorials&tab=tabs-1

---

If you need some help with your Bubble app or a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected]. You can also follow me on Twitter.