Bubble.io: Add Background Removal to Your App with the API Connector (No Code)

Plugins → API Connector → Add another API. Name: bgclear. Authentication: Private key in header. Key name: Authorization. Key value: Bearer bgc_live_YOUR_KEY (get a key on the API dashboard; the first key includes 10 free full-resolution credits). Because the header is defined at the API level and marked private, it never reaches the browser — the call runs from Bubble's servers.

Add another call under the bgclear API and fill it in exactly:

Name:          Remove background
Use as:        Action
Data type:     JSON
Method:        POST
URL:           https://www.bgclear.ai/api/v1/remove
Headers:
  Accept        application/json
  Content-Type  application/json
Body type:     JSON
Body:
  {"image_url": "<image_url>", "size": "<size>", "format": "png"}
Parameters (created automatically from the <…> placeholders):
  image_url   — untick "Private" (it changes per call)
  size        — value "preview" for now (free); switch to "auto" or "full" in the workflow later

Click Initialize call with a real public image URL in image_url and size = preview. The preview size is free, so initialising costs nothing. Bubble reads the JSON response and shows the fields: id, url, width, height, credits_charged, credits_remaining, processing_ms. Set url to type image (or text — see the next step), the numbers to number, and save.

The url the API returns is a hosted result valid for 24 hours. Bubble must copy the file into its own storage, or the image field will break the next day. Bubble's :saved to S3 operator does exactly that.

Workflow: When Button "Remove background" is clicked

Step 1 — Plugins → bgclear – Remove background. image_url = Uploader's value's URL. size = auto (full resolution up to 4 MP, one credit) or preview (free, ≤800 px).

Step 2 — Data → Make changes to a thing (or Create a new thing). Field cutout (type image) = Result of step 1's url:saved to S3.

Step 3 (optional) — Show an alert with Result of step 1's credits_remaining, or a Condition on step 2: only when Result of step 1's url is not empty.

Two gotchas. First, Bubble file URLs often come back protocol-less (//s3.amazonaws.com/…); the API needs a full URL, so use "https:" Uploader's value's URL (concatenate the text) — or the :formatted as URL pattern your version offers. Second, private files: if your uploader stores files as private (attached to a user), the API cannot fetch them; either make the upload public for the few seconds of processing or use a signed URL from your storage.

If the call fails, Bubble raises a workflow error; catch it with the An unhandled error occurs event to show a friendly message. The API's error body is JSON — error.code is insufficient_credits on 402, rate_limited on 429 (60 requests a minute per key), image_too_large above 25 MB. Keep a Condition that warns you when credits_remaining drops below 20.

Cost: previews are free; full-resolution images are one credit each — $9 for 100, $39 for 500, $129 for 2,000; credits never expire and failed calls are never charged (pricing). A freemium pattern that works well in Bubble apps: free preview for everyone, "Download HD" for subscribers, charged one credit per export. For images over 4 megapixels or catalogue-scale imports, use the async jobs endpoint via a second API call and a Backend workflow to receive the callback — the bulk guide explains the flow.