[FREE][PLUGIN] - API Connector [Client Side]

Plugin builders
1

Power up your Bubble apps with the API Connector - Client Side! :flexed_biceps: This plugin allows you to execute API calls (requests) directly from the user’s browser, without needing to go through Bubble’s server workflows. This opens up a new range of possibilities for creating faster and more dynamic user experiences. :dashing_away: Unlike Bubble’s native API Connector which operates on the server-side, this plugin focuses on client-side operations, making it perfect for tasks that don’t require server security or for optimizing your app’s performance. :light_bulb:

Key Features: :white_check_mark:

Client-Side Execution: Make POST, GET, PUT, PATCH, DELETE calls directly from the user’s device. :mobile_phone_with_arrow:

Reduced Server Load: Decrease your app’s capacity usage by delegating simple API calls to the client. :chart_decreasing:

Full Flexibility: Configure Headers, Query Params, and the Body of your request with dynamic data from your app. :gear:

JSON Support: Send and receive data in JSON format, the standard for the modern web. :package:

Workflow Actions: Easily integrate API calls into your workflows with the “Make a Client-Side API Call” action. :link:

Responses as States: Easily access the API response data, which is made available in a state for you to use anywhere on your page. :inbox_tray:

Common Use Cases: :bullseye:

Integrate with Public APIs: Connect to APIs for weather :sun_behind_rain_cloud:, stock quotes :chart_increasing_with_yen:, postal codes :round_pushpin:, etc.

Submit Dynamic Forms: Send data to CRMs, spreadsheets, or other systems without overloading Bubble’s server. :memo:

Single-Page Applications (SPA): Create more fluid interfaces that fetch and display data without needing to reload the page. :wind_face:

Quick Interactions: Get immediate responses for small requests, like verifying a discount coupon :admission_tickets: or looking up a product :shopping_bags:.

How to Set Up: :wrench:

  1. Install the plugin from the “Plugins” tab in your Bubble editor.

  2. Add the plugin’s element to your page.

  3. In your workflows, add the “Make a Client-Side API Call” action.

  4. Fill in the required fields:

    • URL: The API endpoint you want to call.

    • Method: Select the HTTP method (e.g., POST).

    • Headers: Configure the headers, such as {"Content-Type": "application/json"}.

    • Body: Insert the request body in JSON, using dynamic data.

  5. To access the response, use the plugin element’s state. It’s super easy! :wink:

**Take your Bubble apps to the next level with the speed and efficiency of client-side API calls! :rocket::sparkles:

DEMO:** Bubble | No-code apps

VIDEO: https://www.youtube.com/watch?v=cxAdrXlEfLc&ab_channel=MAGNOMOURA

4 Likes
2

Really? I thought it had a setting to try to make client side calls. Unless it had secrets that it had to fetch from the server.

2 Likes
3

API connector operates server-side unless there’s no shared headers and no private parameters

Using client side API calls will obviously exposed all API keys so is a very niche use case

3 Likes
4

The header doesn’t have to be shared. Any header - even a call-specific header that’s not private - will remove the option to make the call from the browser.

Additionally, any call used as an action (instead of as data) - even one with neither headers nor private parameters - cannot be sent from the client.

2 Likes