Introducing SerpApi's Bubble Plugin

We are happy to announce the release of SerpApi's plugin on Bubble.io. This makes it easier than ever to integrate SerpApi along with other parts of your app without having to write any code.

Bubble.io is a no-code development platform that allows users to build web applications without needing to write any code. It provides a visual interface where you can drag and drop elements to design your app's UI, define workflows for functionality, and manage a database to store information. Bubble describes it best themselves - "Whether you're launching a startup or building for your existing business, bubble makes it simple. No coding needed—just drag, drop, and launch."

All you need to get started is:

• A Bubble account: Get Started on Bubble
• Your SerpApi API key: If you don't already have a SerpApi API key, register an account and then find your API key after logging in on the Manage API Key Page

Setting Up The Plugin

Making your first API request in Bubble.io involves connecting your Bubble app to external services and fetching data or triggering actions from other platforms.

The first step is to ensure that we have the SerpApi plugin installed. So head over to the plugins section on the left column and install the SerpApi plugin.

Then, create a new project on Bubble.io and enter the blank project page. Head to the Installed Plugins page for your app (by clicking on the "Plugin" tab on the navigation bar on the left) and add your private SerpApi API key there:

Now, let's head over to the Bubble Design page (by clicking on the "Design" tab on the navigation bar on the left). Here, we can start designing the app, adding the different screen elements and configuring workflows for when a button is clicked, or a field is populated by the user, etc.

Example App Built Using SerpApi's Bubble plugin

Let's consider the same example I discussed in my previous blog post about scraping Google search results in Bubble.io using an HTTP GET request - It is a simple example of accepting a topic from the user and displaying all the related questions from Google's page. For example, when we query "Schools in Austin", Google returns some related questions:

Let's create a simple page to display this data. We need one field to take an input from the user, a button that the user can click to get the questions, and one text box to display the results. We can design a simple interface like this:

As seen in my previous blog post about scraping Google search results in Bubble.io using an HTTP GET request, we had to do quite a bit of setup for the API request to use it in our webapp. Now, since we have a SerpApi plugin ready to use, we can skip all the API set up parts and directly use it in the web app.

There are only 2 parts we need to configure:

1. What happens when the button is pressed?
2. What is displayed in the text box?

Making a SerpApi request using our plugin

When the button is pressed, we can configure a workflow by clicking on "Edit Workflow":

This will take us to the workflow editor. There, we will set up a workflow to send a request to the Google Search API we configured with the input from the user and the other parameters. This is what the step looks like:

Add an action -> Plugins -> SerpApi Google Search API

Following this, we can configure the values for the parameters as applicable. Make sure q is set to the value of the user's input. Please note: The default parameter values are placeholders, and you will have to edit them for them to be used in the API call.

Now, let's add the next step to change the state of the result box and populate it with the resulting questions. Possible fields from the response will show up in the dropdown, and you can select the relevant one.

For this example, I have chosen this because I want to get each questions from the related_questions array in the response:

Here, it's important to understand how we got to the value formula. To understand this, we have to understand the structure of the response. So, let's head over to our playground to visualize the response:

There you can view the different elements of the response, and pick the parameters based on the data that you are interested in showing in your app. In the example above, I have chosen to display each question from the related_questions part of the API response. Once, you have an idea of what to pick, you can click on the "value" field in the Bubble state setting tool shown above, and select the relevant values. Here it is set to: "Result of Step 1 (API call)'s body's related_questions: each item's question".

Now, we are ready to configure the properties for the text box which will display the results. I have named this text box "resulting questions". Here is how this can be configured:

We can configure a couple things such as choosing which format we want to display the result in. I have decided to display the result as text.

Previewing and Testing Your App

Now that our UI is ready, the workflows have been configured and the API is set up and ready to use, we can preview the app and test it using Bubble's preview link on the top right:

Here are some queries to try out your app with:

• Schools in Austin
• Coffee
• Bread

Or, you can test it with any other queries which have the related_questions block shown in Google results.

Following this, you can deploy the app and view it in action!

Here is a demo of the example app we set up in this blog post:

Build More With Bubble

Currently, our Bubble plugin supports Google Search API. We'll be updating it very soon to include our other APIs as well, and we encourage you to keep an eye out for those updates. If you would like us to prioritize adding support for another API, please let us know. You can do that by emailing contact@serpapi.com or opening a ticket on our Public Roadmap.

Making API calls and not doing anything with the data isn't very interesting and useful. Bubble also allows for integrated database management, making it easy to organize and use data directly within the platform. Through a vast library of plugins, you can extend your app's functionality by integrating third-party services like payment gateways, maps, and other APIs as well. I encourage you to check out our plugin here and their plugins here.

I hope you found this tutorial helpful. If you have any questions, don't hesitate to reach out to me at sonika@serpapi.com.

Related Links and Posts

• SerpApi's Google Search Engine Results API
• SerpApi's Playground
• SerpApi's Bubble Plugin
• Bubble Apps Homepage [Login Required]
• Other Bubble Plugins