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.

💡

You can embed any service that passes an embed code in your Bubble.io app. You can even embed it to show mini-versions of websites. Simply take the URL of the website and follow the same process.

How to embed an Airtable base in a Bubble app

What do you need to embed Airtable in Bubble?

Setting up the Airtable base

Creating an iFrame in Bubble

Suggested reading