How to use Bubble’s API Connector

How to use Bubble’s API Connector

A common question we get from clients is "can Bubble connect to X API?". The answer is a resounding yes, thanks to Bubble's powerful API Connector plugin.

One of the greatest advantages of using the no-code tool Bubble is its ability to integrate with APIs and external databases quickly.

It connects to any kind of external services that expose an API for reading/writing (including payments, sources of data, authentication providers, etc.). Additionally, it is fully extensible via Javascript plugins. You can create your own plugins to add connections to non-supported services, add elements written in Javascript, or write server code.

To help you integrate with APIs like a traditional coder and connect to 3rd-party services, we've put together the following educational information around API's and resources for using the Bubble API Connector.

About API calls: A quick refresher

Before we jump into how to using Bubble's API Connector, let's first go over a few basic things on API calls.

If you’re new to the awesome world of API calls and connections, we strongly recommend you check out the following resources first:

Components of an API call:

(1) Url:

The location of the server (combination of ‘host / server’, ‘endpoint’, and ‘querystring parameters’)

For the URL: https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=API_KEY

  • Endpoint: /v2/top-headlines[/font]
  • Querystring (the stuff after ‘?’): country=us&category=business&apiKey=API_KEY

(2) Method:

  • GET—Asks the server to retrieve a resource (e.g. get data of a specific post from facebook)
  • POST—Asks the server to create a new resource (e.g. create a post on facebook with the data provided in the body of this api call)
  • PUT—Asks the server to edit/update an existing resource (e.g. update an existing post on facebook with the body of this api call)
  • DELETE—Asks the server to delete a resource (e.g. delete an existing post on facebook)
  • You will use either Get or Post methods a majority of time

(3) Headers:

  • Additional data for the server to use. E.g. authorization, content-type
  • E.g. ‘Authorization: Basic Hkjhj1289273jjj’, ‘Content-Type’:’application/json’

(4) Body:

  • JSON object to pass the info to server. This is also sometimes called ‘Payload’
  • E.g. { “First name”:”Gaurav”, ”Company”: ”Airdev”, ”Days worked”: 700, “Still there” : true}
  • Mostly used with POST calls. For GET type of calls usually the information that server needs is provided within the URL itself

How to use the Bubble API Connector

The API Connector is a plugin built by Bubble which allows you to build your own custom connections to other products which support an API connection.

If you're unsure how to read API documentation or set up API calls in Bubble, we have a 7-part video series explaining how to read API documentation, how to use this information to set up an API call in Bubble's API Connector, and how Bubble.io captures and displays the API response in the design tab. Watch them here:

For even more info, access the Bubble API Connector Reference Guide here.

Need help building your app on Bubble?

While Bubble is still faster and easier than traditional development, it has a higher learning curve than some off-the-shelf no-code tools.

If you’re looking for an outside Bubble developer to help you build your custom app fast, check out our guide on how to choose the right Bubble developer or agency.

Airdev is the largest and most highly-rated Bubble agency globally.

If you need to launch a custom, production-grade app fast, contact us about your project today!