How to embed an Airtable base in Bubble.io

Integration Aug 06, 2020

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

What do you need?

  • Airtable base
  • HTML element

Setting up Airtable

The first thing that you need to do is to 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 along with 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 make any changes to the settings of the grid view. However, don't worry if you modify any entry in your Airtable base. All the changes will reflect in your Bubble app as well.

Setting up 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 element 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.

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

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


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.


If you need some help with your Bubble app, hit me up at [email protected] or follow me on Twitter

Tags