Using Bubble’s API Connector

Using Bubble’s API Connector

Integrate with APIs like a traditional coder & connect to third-party services in their full complexity

Before we begin...Quick refresher 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:

(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

Setting up the Bubble API connector


(1) You need to add the ‘Bubble API connector’ plugin to start using it. Click ‘Add plugins’ button to install. It will appear on the left section which lists all plugins

  • Select the bubble api connector to see the section shown here

(2) Add an api for every service your app connects to, e.g. facebook, twitter, slack, newsapi

  • You can add multiple api’s for the same service if they use different authentication (e.g. public data from stock exchanges vs. private user account data from them)

(3) Give a custom name to your api service (can be anything)

(4) Select the authentication method that will apply to all the calls you define within this api

(5) If you have some common headers that should apply to all the calls, you can provide them here instead of providing individually in each call (e.g. content-type: application/json)

(6) If you have some common parameters that should apply to all the calls, you can provide them here instead of providing individually in each call (e.g. apiKey: J98ukno87)

(7) Click ‘Add a call’ to start setting up your specific api calls

  • Each of these calls can be triggered and used in your bubble app within the design / workflow tabs

(8) You can add multiple api calls per service, and label them with your own names. These names will appear in your bubble editor just like other data sources / actions.

Locating the information needed to set up a call


(1) ‘API Docs’ / ‘API Reference’ section on a service’s website usually has all the details you need

  • Sign up for a developer account to access the api
  • This particular example is at: https://newsapi.org

(2) Every possible call (a.k.a. endpoint) has a predefined Method

  • Calls to an endpoint with any other method results in an error

(3) Host url (e.g. https://newsapi.org) is the service website / its api website. This is almost always the same for all endpoints for a given service.

(4) Endpoint (e.g. /v2/top-headlines) defines what you are asking the service for / telling the service to do. In this case, we want to fetch top headlines

(5) Querystring is the content after the ? symbol. It’s additional information provided by you to the service to get the right results

  • In the screenshot ‘country’, ‘category’ and ‘apiKey’ are the query parameters and have ‘us’, ‘business’ and ‘API_KEY’ as the values

(6) Once you provide all the valid info, making the api call will result in the service giving back a response containing the data you can use

  • In the screenshot, the entire section is a JSON format of response.
  • JSON is the most prevalent. There are other response formats such as text, XML, file, image etc.


(1) Name of your api call  - Can be anything you want

(2) If ‘Data’: You can use the api call in the design tab using the ‘Get data from external api’ in a cell. If ‘Action’: You can use the api call in the workflow tab ‘Plugins’->action

(3) Format of the expected response. Bubble supports JSON, XML, Image, Number, Text

(4) The method of the call (see Pt.2 in previous section)

(5) The URL of the call = host URL + endpoint

(6) Query parameters of the call. Bubble auto-generates the querystring and adds it to #5 (see Pt. 6 in previous section)

  • In the screenshot, ‘country’, ‘category’ and ‘apiKey’ are called the query parameters and ‘us’, ‘business’ and ‘API_KEY’ are their respective values
  • ‘Private’ means hardcoded. If not private, you can make it dynamic in your editor. In this case, we know our api key will remain the same across calls
  • Sometimes you don’t need a specific querystring parameter. Optional allows you to ignore it. E.g. if you needed top headlines from US regardless of category.

(7) Similar to parameters, you can add any headers if specified in the service’s api docs

(8) Once you provide all the valid info, making the api call will result in the service giving back a response containing the data you can use

  • In the screenshot, the entire section is a JSON format of response.
  • JSON is the most prevalent. There are other response formats such as text, XML, file, image etc.

Initialize and start using the API data in your app

When you click initialize, bubble calls the api using the sample data you provided in the setup. It uses the response to automatically understand what it will receive.

  • The is the same as Pt. 6 in ‘Locating the information needed to set up a call’.
  • But now, you can use any / all of this data directly within your bubble app
  • Verify that all the fields you need are of the right type. Then click save.
  • If you specified the Use as to 'Use as data':


  • If you specified the Use as to 'Use as action':


Example: On clicking initialize, bubble knows what to expect from the server


Want to view more examples? Visit https://widgets.airdev.co