Using Bubble-made Plugin APIs
Using Bubble-made Plugin APIs
Bubble alone is already a powerful platform in the creation of apps, letting you build a full-stack application without any codes at all. In case you’re wondering how you can better integrate the application you’re developing into a bigger ecosystem with other apps, Bubble also provides a variety of plugins that allows you to do so.
You can use plugins to make your app integrate with big social media platforms like Facebook and Twitter. You can even use plugins to enable your users to make payments via the Stripe e-payment system. All of this can be accomplished through Bubble’s plugins system, and often it is Bubble’s team that handles the creation of some of the plugins for the bigger services to ensure the plugins’ reliability, keeping development of the plugins in lockstep with the development of the platform.
In case you do not fully understand plugins yet or if you want to see how to use the Twitter and Stripe plugins, you can click here to learn more about these and how to use them. In case you want to make an API to allow other apps to interface with yours, you no longer need to use these plugins and instead use Bubble’s API feature which you can learn how to do here.
Do also note that this is the second part of the series of articles on plugins; the link to the first article can be found above discussing plugins and using the Twitter and Stripe plugins. With all that said, read on for some Bubble app API assistance.
In order to use the Facebook plugin and interface with the social media platform, you will first need an account from their developer platform – Facebook for Developers. Simply go to https://developers.facebook.com/ and click the “Get Started” button. All you’ll need is an email and consent to provide some of your personal information. You will also need to agree to their terms of service and their privacy policy.
Once you have created a developer account on Facebook, you can start setting up the plugin itself. Create an app on your developer account, and then use the API key and secret that it generates to fill in the relevant sections in the Bubble app plugin’s settings menu.
Take note that certain features require Facebook’s approval for use. These include accessing users’ list of friends and being able to see the user’s profile link.
Otherwise, though the Facebook plugin allows you to do things like displaying a like or share button, displaying individual Facebook pages, or even sending messages through a popup.
Slack
You can also use plugins to interact with a Slack workplace from your Bubble app. To set it up, you’ll need to log in to or sign up for a Slack workspace. Once logged in, you will then need to create a new app that you’ll need to install and setup for your workspace.
You’ll need to set up permission scopes which will determine what actions and data your app will be capable of. Finally, you’ll need to set up a redirect URL, or the URL your user will be sent to after they’ve logged in. Take note that integrating Slack using this plugin only allows you to link your app with your workspace specifically.
With Slack set up, you can do many things with the plugin. For one, you can retrieve data about your workspace’s data or list of channels. You can post to channels as a user or a bot, send a message to a user, or add a new team member to your workspace.
API Connector
The API Connector plugin theoretically allows you to use any external API and connect it to your Bubble App. It’ll require you to create corresponding callers that will call endpoints you designate. It will also require that whatever you are connecting to have an API in the first place.
Notice that with the API Connector you can also connect to other Bubble apps, including other ones that you own, with the Bubble App API system. With the proper set up, you can create API integration Bubble App using the built-in Bubble API system and the API connector plugin.
The API Connector allows you to connect to almost any external API from Bubble. It expects a correctly formatted JSON body as a response. You can supply headers, parameters, and a call body. The API calls created can be used as actions or consumed as data. When used as data, they appear in the dropdown menu for “Get data from an external API” when “Insert dynamic data” is clicked. When used as actions, they appear in the Plugins section of the Actions dropdown menu.
Once you configure an API call, you need to initialize it. If you don’t, it will not appear in the Bubble Editor. Please note that initializing a call actually runs/executes it. If a call deletes an item or creates an item that requires a unique id, the Initialize call button will, if successful, delete or create the item. Thus, the next call will likely fail since the item already exists or was deleted. To initialize an API call with mandatory parameters and no sensible default, you can set a default as an example, click to “Initialize,” then unset the default.
An API call’s URL is never sent to the user’s browser. Call headers and parameters are only sent to the user’s browser if you mark them as ‘client safe.’ Parameters, such as a secret API key or password, should never be marked as client safe. If you mark a parameter as client safe, you will be able to assign it dynamically in the Bubble Editor. A search term in a search query is a good example of a client-safe parameter. The call’s body is sent to the user; thus, it is not client safe. When you post a JSON body, you must create a header with key ‘Content-Type’ and value ‘application/json.’
That’s all the Bubble-made plugins we can discuss for now, but there is a great deal more of these with extremely useful functionalities. Also, if you need any more technical assistance or want to learn more about Bubble FAQs, tips, and tricks, you can visit the Bubblehelpers page and blog.
