Bubble

At Xano, we understand that building a powerful backend for your web or mobile application can be a daunting task, especially if you're not a seasoned developer. That's why we've created a seamless integration with Bubble, a leading no code app builder for creating web applications. By connecting your Xano API endpoints to Bubble, you can leverage the power of Xano's backend services and use Bubble for the frontend, to develop web applications faster and more effectively.

In this step-by-step guide, we'll show you how to connect your Xano API endpoints to Bubble, allowing you to use Xano as your backend and Bubble as your frontend. Let's get started!

Step 1: Install the Bubble API Connector

The first step is to ensure that you have the Bubble API Connector installed. This plugin allows Bubble to communicate with external APIs, including your Xano API endpoints.

1. In Bubble, navigate to the "Plugins" page.
2. Search for the "Bubble API Connector" and install it.

Step 2: Connect a GET Endpoint

Now that you have the API Connector installed, it's time to connect your first Xano API endpoint to Bubble. Let's start with a GET endpoint.

1. In Xano, locate the GET endpoint you want to connect. For example, the "GET all merchant records" endpoint.
2. Copy the endpoint URL by clicking the link icon.
3. In Bubble, go back to the "Plugins" page and expand the Bubble API Connector.
4. Click "Add API" and give your API a descriptive name, such as "GET Merchants."
5. Paste the copied endpoint URL into the "API URL" field.
6. Click "Initialize Call."
7. Bubble will automatically detect and display the fields from your Xano database table.
8. Review the field types and make any necessary adjustments.
9. Click "Save" to finalize the connection.

Congratulations! You've successfully connected your first Xano GET endpoint to Bubble.

Step 3: Connect a POST Endpoint

Connecting a POST endpoint to Bubble requires an additional step due to the need for request body parameters.

1. In Xano, locate the POST endpoint you want to connect. For example, the "POST merchant record" endpoint.
2. Copy the endpoint URL by clicking the link icon.
3. In Bubble, go back to the "Plugins" page and expand the Bubble API Connector.
4. Click "Add API" and give your API a descriptive name, such as "POST Merchant."
5. Paste the copied endpoint URL into the "API URL" field.
6. Change the HTTP method from "GET" to "POST" using the dropdown menu.
7. In Xano, navigate to the Swagger documentation for the same endpoint.
8. Copy the example request body provided in the Swagger documentation.
9. In Bubble, paste the copied request body into the "Request Body" field.
10. Replace any dynamic values with Bubble's dynamic value syntax (e.g., '{{myVariable}}`).
11. Click "Initialize Call."
12. Bubble will automatically detect and display the fields from your Xano database table.
13. Review the field types and make any necessary adjustments.
14. Click "Save" to finalize the connection.

Well done! You've successfully connected both a GET and a POST endpoint from Xano to Bubble, enabling you to leverage Xano's powerful backend services while building your application's frontend with Bubble's no-code tools.

By following these steps, you've unlocked the potential to create robust and scalable applications without writing a single line of code. Xano's seamless integration with Bubble empowers you to focus on your application's functionality and user experience while leaving the backend complexities to our capable platform.

So, what are you waiting for? Start building your dream application today with the powerful combination of Xano and Bubble!