Displaying a field from Bubble.io Database to a Webpage

A non-conmprehensive guide that hopefully fills some gaps.

Go to the API tab of your Bubble App. It’s in the same row as APP PLAN and GENERAL.

Make sure the data type is selected (select the checkbox to the right of the name). Without this checked, API data can’t be transmitted.

Your data API root url will look like this:

https://your-domain.com/version-test/api/1.1/obj

Since I used the data type ‘postman’ mine ended up looking like this: https://kitgoal.com/version-test/api/1.1/obj/postman

You may want to create an API token to play around with in Postman.com. The token created will be a bearer token that you place into Postman. Create a workspace then place the copied token from Bubble in the Authorization tab.

If doing a POST, the BODY tab will need:

“Bubble field name” : “Any text you want to send”

If the post is successful you should see a success message and the Bubble ID.

To do a GET request, simply select GET instead from the Postman dropdown. A bearer token can be used or not depending on how it’s configured. Play around with it.

Check out the CodePen I made which shows a successful connection between Bubble and CodePen. Theoretically, this should work on any webpage where you can add JavaScript, HTML, and CSS.

https://codepen.io/nathanpuls/pen/gOoXKWR

Things I learned or did.

JSON Stringify is needed to convert data to display it properly.

The Replace method was needed to get rid of the quotes.

I used version-test (Bubble.io) so that my public data wouldn’t accidentally be modified.

Thanks for reading. My name is Nathan Puls and I enjoy building on the no code tool Bubble.io. Recently I made a web app called leap.by that lets you save and share links.

Reach out to hello@kitgoal.com with any questions or comments!