Happy Friday!
This week I’m going to cover one of the most powerful features in Bubble - the API Connector.
The API Connector is an official plugin which is deeply integrated with Bubble and allows you to intertact with other internet services using API calls.
You can achieve some quite amazing things using the API connector in Bubble.
Here are a few examples of things you can do…
These are just a small sample of some of the amazing things you can do - the limit really is your imagination. My app UserLoop is also integrated with
Postmark for email,
Ghost for rendering blog posts,
Intercom for customer service,
Mailerlite for marketing email and
Brandfetch for automatic logo population.
If you’re planning to use third party APIs extensively in your application, it’s worth familiarising yoruself with
Postman.
Postman is a fantastic desktop and browser app which you can use to test API calls.
I highly recommend using it to test and validate APIs before you set them up in the Bubble API connector - it saves you tons of time by making sure the call is working properly (your endpoints, auth, formatting etc is all correct) before you import it into Bubble.
Avoid plugins for connecting to third party API Services.
Bubble’s plugin store contains tons of apps which let you connect to third party APIs - however I would recommend being cautious using these.
If the plugin ends up being disconinuted or not updated, you could end up with parts of your app breaking and having to go through a painful rebuild.
It’s really worth using the API Connector directly for any services you want to integrate with - it’s not super hard to set up and puts you in full control.
If you want to add new endpoints its a 30 second job, you’re not relying on a plugin developer to do it for you!
Importing API Calls to the API Connector
One amazing hack for adding API calls to the API connector super quick is to use the Bubble API call import function.
In this example, we’re going to import a API Call for rendering a video using Shotstack.
To start, I’m going to go into the API Connector and press the Add Another API button to create a new API connection.
I’m going to have the
Shotstack API documentaion open in one window to do my test. We’re going to use the Render Video endpoint to generate a demo video.
In most API Documentation sites, you’ll be given example API calls on a right hand pane.
We’re looking for the cURL example.
Bubble has a neat feature where we can copy the cURL example and import it into Bubble as a working API Connection.