Extending Functionality with Plugins and APIs

In this chapter, you are going to learn about plugins and application programming interfaces (APIs). You’ll gain hands-on experience in navigating Bubble.io’s extensive plugin ecosystem, how to leverage external functionalities, and connecting your applications with external services using APIs. By the end of this chapter, you’ll be equipped with the tools and knowledge to build web applications utilizing APIs and plugins. You’ll be able to broaden the horizons of what your applications can accomplish and unlock a multitude of possibilities to amplify the capabilities of your web applications with these amazing resources.

In this chapter, we’re going to cover the following main topics:

• Exploring the Bubble.io plugin ecosystem
• Installing and configuring plugins
• A curated list of popular and useful plugins
• Connecting Bubble.io with popular APIs and services
• Enabling data synchronization...

Exploring the Bubble.io plugin ecosystem

The Bubble.io plugin marketplace offers a diverse variety of plugins and resources you can use to create even more powerful types of applications. Using plugins can be a great way to add extra functionality to your application and speed up your app development.

There are a couple of ways you can find and add plugins to your existing application. Let’s take a look at the first option:

• Under the Design tab, go to the UI components sidebar and locate the Install More button. Click the button and a new window will open up showing a list of plugins.

Figure 9.1: The Install More button

Once you install new plugins, if these plugins are UI components, their names will show up in the UI components sidebar.

The second option involves doing the following:

• Head to the Plugins tab on the left, and, once you are on the Plugins page, click the button to install plugins and a list of plugins will...

Installing and configuring plugins

Now that you know a couple of different ways to find plugins, let’s get hands-on experience as we walk through the step-by-step process of installing and configuring plugins.

Once you find a plugin you want to use, installing it is super easy; if it is free, just click the button to install it. If it is paid, just go through the checkout process and follow the steps.

The example of a plugin under the Install New Plugins list is shown here:

Figure 9.8: Install New Plugins

Once the plugin is installed, it will be available under the Plugins page; just click the Plugins tab to go to the Plugins page.

Here is an example of the Installed Plugins page under the Plugins tab:

Figure 9.9: The Plugins page

On the left sidebar, you will see the page with a list of all the plugins you have installed on your Bubble application. On the right side, you will see more information about each...

A curated list of popular and useful plugins

As you may have already noticed, there are thousands of plugins available inside the Bubble plugin marketplace, which is a good thing, but at the same time, it may make it harder to find and select the best plugins.

To help you on the journey of discovering good and useful plugins, here is a list to help you get started:

• Plugins to help with general tasks:
  • Top 15 Plugins for Bubble – Bundle by Zeroqode
  • Toolbox by Misha V
• Plugins to connect with AI services:
  • Openai & ChatGPT by Zeroqode
  • OpenAI Assistant API by Pilot & Launch
  • OpenAI DALL-E – Generate AI images by Pilot & Launch
• Plugins to track user access and behavior:
  • Google Analytics by Bubble
  • Hotjar by Zeroqode
• Plugins to add new useful UI components:
  • Air Date/Time Dropper by Zeroqode
  • Air Date/Time Picker by Zeroqode
  • Multiselect Dropdown by Bubble
  • Ionic Elements by Bubble
  • Google Material Icons by Bubble
  • Feather Icons by AirDev
  • Lottie by Goodspeed
...

Connecting Bubble.io with popular APIs and services

Using APIs allows you to integrate Bubble with external services, which will open new possibilities when building applications using no-code.

What is an API?

An API is a way for computer programs to talk to each other. Picture it like a bridge, a connection between two applications. It is like two applications using walkie-talkies and talking to each other from time to time. APIs are used in almost all software, websites, mobile apps, and computer games. You can use API integrations to show data stored in another platform on your Bubble application page, for instance, or use it to send data from your Bubble application to a third-party source.

Another example is, if you want to build a website that shows the weather forecast, you can use an API that fetches the weather data from a third-party source and displays it on your website. In summary, API integrations allow you to search for some data, read information, and create...

Enabling data synchronization and communication

The API usage inside Bubble can happen in multiple ways. The most common way is by using the API Connector plugin, which was developed by the Bubble team to allow you to create and configure custom API connections between your application and third-party services.

The API Connector plugin is shown here:

Figure 9.13: The API Connector plugin

Imagine this plugin as a blank canvas – this plugin will allow you to create and configure API connections from scratch with any API you want to use. This setup will be discussed later.

The second most common way of adding API integrations to your Bubble application is by finding specific plugins that were built with this in mind. These plugins were created by developers to specifically help you connect with a specific tool or service. For instance, for payment integrations, there is a plugin called Stripe, which means that this plugin was designed to help...

Enhancing app functionality through integrations

Now that you understand how to find API plugins, how they work, and the different methods of using an API, let’s break it down into practical steps and show you how to interact with the API Connector plugin.

As mentioned before, you must first install the API Connector. Once it is installed, you will head to the Plugins tab and locate this plugin; click the plugin page to expose its settings.

To add a new API call, you have to click the Add another API button.

Figure 9.16: Add another API

This will create a new box where you can set up your API connection as shown here:

Figure 9.17: API settings

The fields are explained here:

• API Name: The first field is API Name, which can be used to identify your API connection later on. Add a name in this field that will help you remember what this API does and what service you are connecting to. This name will appear...

Exploring popular APIs and finding suitable ones

In the previous sections, you learned about plugins and how to use APIs in multiple ways, but what if you want to discover or use other services that are not yet available by installing a plugin? How can you find other API sources to use on your application?

There are websites dedicated to listing and curating APIs – some are free and others are paid, but you can find a multitude of services to connect to and expand your application capabilities: here is a list of a few websites you can go to find APIs:

• RapidAPI Hub: An extensive marketplace with a wide array of APIs, providing tools for developers to explore, test, and connect to APIs easily
  • Website: https://rapidapi.com/hub
  • List of free APIs: https://rapidapi.com/collection/list-of-free-apis
• NoCode API: This offers a range of APIs, enabling users to connect with different services, such as databases, social media platforms, and payment gateways
  • Website: https://nocodeapi...

Summary

In this chapter, we’ve covered plugins and APIs. You learned about the diverse Bubble.io plugin ecosystem, exploring a curated list of available plugins that can amplify your app-building capabilities. Additionally, you gained practical help on how to install, configure, and use plugins.

This chapter also explained how to choose the most suitable plugins and APIs for your application’s unique requirements.

You also learned what APIs are and how to use them to connect with external services and data sources. This chapter helped you gain a strong foundation to be able to use plugins and APIs, empowering your applications to access and leverage external functionalities and resources beyond what is available natively on Bubble.

Understanding these concepts will be very important as you progress further in your Bubble.io journey. In the next chapter, you’re going to learn how to deploy and launch your app.