
Remove Background from Image
$29.00 or $6.00/moGet a transparent background for any image. Upload a image or use its URL.
Setup Instructions
Remove Background from Image – Setup Instructions
📦 Installation
-
Add the plugin to your app
- Open your Bubble editor.
- Go to Plugins → Add plugins.
- Search for “Remove Background from Image” and click Install.
-
Obtain a free Remove.bg API key
- Visit the Remove.bg dashboard: https://www.remove.bg/dashboard#api-key
- Sign up / log in and copy the API Key displayed on the page.
-
Configure the API key in Bubble
- In the Bubble editor, open the Plugins tab.
- Locate Remove Background from Image – API Key and paste the key you copied.
- Click Save.
Note: The plugin communicates directly with the Remove.bg service, so a valid API key is required for every request.
⚙️ Configuration
| Setting | Description | Recommended Value |
|---|---|---|
| Size | Desired output dimensions. Accepts auto, preview, or explicit pixel values (800x600). | auto (keeps original size) |
| Format | Image file format for the result. Options: png (transparent background) or jpg (solid background). | png |
| bg_color | Background colour to apply when Format = jpg. Accepts hex (#000000) or colour names. | Leave blank unless you need a solid colour background. |
Tip: When you need a transparent background, always choose png and keep bg_color empty.
🛠️ Usage – Building the Workflow
1️⃣ Create a trigger
Typical use‑case: a button labelled “Remove Background”.
- Drag a Button element onto the page.
- In the Workflow tab, add a new event: When Button Remove Background is clicked.
2️⃣ Add the “Remove Image Background” action
- Inside the event, click Add an action → Plugins → Remove Background from Image → Remove Image Background.
- Fill in the required fields:
| Field | What to enter | Example |
|---|---|---|
| Image URL | The URL of the source image. For dynamic Bubble images, prepend https: (e.g., https://s3.amazonaws.com/app123/...). | https://s3.amazonaws.com/app123/userpics/abc.jpg |
| Size | Choose from the table above (or leave default). | auto |
| Format | png or jpg. | png |
| bg_color | Optional – only for jpg. | #FFFFFF |
3️⃣ Capture the result
After the action runs, it returns a Result Image (type: image). Use it in the next step:
- Add another action such as “Display data in a picture element”, “Upload to a thing”, or “Send to an API”.
- Set the Image field to the Result Image returned by Remove Image Background.
4️⃣ (Optional) Show a loading state
- Add a Spinner element that is visible only while the workflow is running.
- Use “Only when” conditions:
Result of step X is empty/Result of step X is not empty.
📚 Full Example Workflow (visual)
When Button Remove Background is clicked
→ Remove Image Background
• Image URL = Input Image's value (add "https:" if needed)
• Size = auto
• Format = png
• bg_color = (blank)
→ Set Picture's source to Result of step 1 (Result Image)
→ Show success message (optional)
🐞 Troubleshooting
| Issue | Possible Cause | Solution |
|---|---|---|
| “Invalid API key” | Wrong key entered or key not saved. | Re‑enter the key in Plugins → Remove Background from Image – API Key. Verify no extra spaces. |
| No background removed (image unchanged) | Image URL not reachable or missing protocol (https:). | Ensure the URL is absolute and begins with https:. Test the URL in a new browser tab. |
| Transparent background becomes solid white | Output format set to jpg instead of png. | Change Format to png or provide a bg_color for jpg. |
| Rate‑limit or “Quota exceeded” | Exceeded free‑tier request limit on remove.bg. | Upgrade your remove.bg plan or monitor usage via the remove.bg dashboard. |
| Workflow fails with “Unexpected error” | Network issue or temporary service outage. | Retry after a few minutes; check remove.bg status page. |
Debug tip: Add a Log to console action (or use Bubble’s “Alert” element) to output the Result Image URL. This helps verify that the API call succeeded.
📖 API Reference (Plugin Action)
| Parameter | Type | Required? | Description |
|---|---|---|---|
| Image URL | text | ✅ | Direct link to the source image. Must be publicly accessible. |
| Size | text | ❌ | Desired output dimensions (auto, preview, 800x600, etc.). Default = auto. |
| Format | text | ❌ | Output format. png keeps transparency; jpg fills with bg_color. Default = png. |
| bg_color | text | ❌ | Background colour for jpg output. Accepts hex (#RRGGBB) or colour names. Ignored for png. |
| Result Image | image (output) | — | The processed image with background removed. Use this in subsequent actions. |
✅ Best Practices
- Validate URLs before sending them to the API (use Bubble’s “:find & replace” to prepend
https:). - Cache results if you expect the same image to be processed multiple times – store the returned image in a database field to avoid extra API calls.
- Handle errors gracefully: wrap the action in a condition that checks
Result of step X is not emptybefore using the image. - Monitor usage: the free remove.bg plan allows a limited number of calls per month; consider adding a usage counter in your app.
📞 Support & Resources
- Demo page: https://plugins.datamaticsoftware.com/removebg
- Full documentation: https://plugins.datamaticsoftware.com/documentation?plugin=removebg
- Bubble editor example: https://bubble.io/page?type=page&name=remove_bg&id=datamatic-03&tab=tabs-1
- Remove.bg API docs: https://www.remove.bg/api
If you encounter issues not covered above, please open a ticket on the plugin’s support page or contact the plugin author directly.
Documentation
Remove Background from Image – Bubble.io Plugin
Overview
Background Remover Plugin for Bubble.io – a simple, powerful tool that lets you remove the background from any JPG or PNG image with a single API call.
- Use cases – selfies, product photos, portrait shots, marketing assets, and more.
- Powered by – the remove.bg API.
Note: You must have a valid remove.bg API key to use this plugin.
Key Features
- Exceptional edge handling – preserves fine details such as hair or fur.
- Versatile applications – works with personal, commercial, and professional images.
- Automatic processing – detects foreground objects and removes the background in one step.
- Multiple output sizes & formats – preview, full‑resolution, PNG (with transparency) or JPG.
Demo & Resources
| Resource | Link |
|---|---|
| Live Demo | https://plugins.datamaticsoftware.com/removebg |
| Full Documentation | https://plugins.datamaticsoftware.com/documentation?plugin=removebg |
| Bubble Editor Example | https://bubble.io/page?type=page&name=remove_bg&id=datamatic-03&tab=tabs-1 |
Installation
- Open your Bubble app editor.
- In the Plugins tab, click Add plugins.
- Search for “Remove Background from Image” and click Install.
- Once installed, go to the plugin’s Settings tab to configure it (see Configuration below).
Configuration
API Key
| Field | Description | Example |
|---|---|---|
| API Key | Your personal remove.bg API key (found in your remove.bg account → API page). | rmvbg_XXXXXXXXXXXXXXXXXXXXXXXXXXXX |
- Paste the API key into the API Key input field under Plugin Settings.
- Click Save.
Tip: Keep your API key secret. Do not expose it in client‑side code or public repositories.
Optional Global Settings
| Setting | Description | Default |
|---|---|---|
| Default Output Size | Sets the default size parameter for the Remove Image Background call if not overridden in the workflow. | preview |
| Default Output Format | Sets the default format parameter. | auto |
| Default Background Color | Hex code or color name used when bg_color is not supplied. | (none – transparent) |
Usage
1. Remove Image Background
Add the “Remove Image Background” action to any workflow step (e.g., when a user uploads a picture).
Required Inputs
| Parameter | Type | Description | Example |
|---|---|---|---|
| image | File (binary) or Base64 string or URL | The source image to process. | fileUploader's value |
| size | Text (optional) | Output resolution: preview, full, or auto. | full |
| format | Text (optional) | Result format: auto, png, jpg. | png |
| bg_color | Text (optional) | Hex color (ff0000) or name (green) to replace the background. | 81d4fa |
Example Workflow
- User uploads an image via a FileUploader element.
- Button “Remove Background” → Workflow:
- Action: Plugins → Remove Background from Image → Remove Image Background
- Set
image=FileUploader's value - Optional:
size = "full",format = "png"
- Result – the action returns an image URL (
Result of step X (image)). - Use that URL in an Image element or store it in your database:
- Image element → Dynamic image =
Result of step X (image) - Database → Create a new thing → Image field =
Result of step X (image)
- Image element → Dynamic image =
Returned Values
| Field | Type | Description |
|---|---|---|
| image | URL (string) | Direct link to the processed image (PNG or JPG). |
| credits_used | Number | Number of API credits consumed by this call. |
| status | Text | "success" or "error". |
| error_message | Text (optional) | Present only when status = "error". |
2. Account Info
Retrieve your current credit balance and the number of free API calls remaining.
No inputs required.
| Returned Field | Type | Description |
|---|---|---|
| credits_total | Number | Total credits available in your remove.bg account. |
| credits_used | Number | Credits already consumed. |
| free_calls_remaining | Number | Free calls left for the current month (if any). |
| status | Text | "success" or "error". |
| error_message | Text (optional) | Error details if the request fails. |
API Reference
1. Remove Image Background
Endpoint (internal, used by the plugin): POST https://api.remove.bg/v1.0/removebg
| Parameter | Location | Required? | Type | Allowed Values / Format | Description |
|---|---|---|---|---|---|
image_file | Body (multipart) | Yes (if not using image_url) | binary | JPG, PNG ≤ 12 MB | Direct file upload. |
image_url | Body (form‑data) | Yes (if not using image_file) | string | Valid public URL | Remote image location. |
size | Body | No | string | preview (default), full, auto | Desired output resolution. |
format | Body | No | string | auto (default), png, jpg | Output file format. |
bg_color | Body | No | string | Hex (ff0000) or color name (green) | Replace removed background with solid color. |
api_key | Header X-Api-Key | Yes (set globally) | string | – | Your remove.bg API key. |
Success Response (200)
{
"data": {
"result_b64": "<base64‑encoded image>",
"result_url": "https://.../output.png",
"credits": 1,
"width": 625,
"height": 400
}
}
Error Responses
| HTTP Code | Reason | Typical Message |
|---|---|---|
| 400 | Bad request (missing/invalid parameters) | "Invalid size parameter" |
| 401 | Unauthorized (invalid API key) | "Invalid API key" |
| 402 | Payment required (no credits left) | "Out of credits" |
| 413 | Payload Too Large | "Image exceeds 12 MB" |
| 415 | Unsupported Media Type | "Only JPG/PNG supported" |
| 500 | Internal server error | "Unexpected error" |
2. Account Info
Endpoint (internal): GET https://api.remove.bg/v1.0/account
| Parameter | Location | Required? | Type | Description |
|---|---|---|---|---|
api_key | Header X-Api-Key | Yes | string | Your remove.bg API key. |
Success Response (200)
{
"data": {
"credits_total": 500,
"credits_used": 123,
"free_calls_remaining": 50
}
}
Error Responses – same as above (401, 500, etc.).
Troubleshooting
| Symptom | Possible Cause | Solution |
|---|---|---|
| “Invalid API key” error | Wrong key, missing key, or key not saved in plugin settings. | Verify the key in Plugins → Remove Background from Image → Settings. Re‑save and retry. |
| Image size > 12 MB | Uploaded file exceeds limit. | Compress the image before sending, or use a lower‑resolution source. |
| “Out of credits” | No remaining credits on your remove.bg account. | Purchase additional credits or wait for the next billing cycle. |
| Transparent background disappears | format set to jpg (no alpha channel). | Use format = "png" or keep format = "auto" when you need transparency. |
| Slow response / timeout | Large file size or network latency. | Reduce image resolution (size = "preview"), ensure a stable connection, or enable caching in your app. |
| Unexpected “error” status with no message | Rare server issue. | Retry after a few seconds; if persistent, contact remove.bg support with the request ID. |
Best Practices
- Validate user uploads (file type, size) before invoking the API.
- Store the returned image URL in your database rather than the base64 string to save storage.
- Cache results when the same image may be processed multiple times.
- Monitor credit usage via the Account Info call and display a warning to admins when balance falls below a threshold.
- Set a default
sizeofpreviewfor quick previews, then let users request the full‑resolution version only when needed.
Version History
| Version | Date | Changes |
|---|---|---|
| 1.0.0 | 2024‑07‑15 | Initial release – Remove Image Background & Account Info actions. |
| 1.1.0 | 2024‑10‑02 | Added optional bg_color parameter, improved error handling, expanded documentation. |
| 1.2.0 | 2025‑03‑18 | Added global default settings (size, format), workflow examples, and troubleshooting guide. |
Support
- Documentation: https://plugins.datamaticsoftware.com/documentation?plugin=removebg
- Demo: https://plugins.datamaticsoftware.com/removebg
- Support forum: Post questions in the Bubble Forum under the Remove Background from Image tag.
- remove.bg API support: https://www.remove.bg/en/support
Enhance your Bubble.io applications with clean, background‑free images—no extra code required.