How to embed an Airtable base in a Bubble app
Integration

How to embed an Airtable base in a Bubble app

Himanshu Sharma
Himanshu Sharma

Table of Contents

If you have some data in Airtable that you'd like to display in your Bubble.io app, you can embed the entire base. 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 make any changes to 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. 

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.



Join the conversation.