Remove Background from Image

$29.00 or $6.00/mo

Get 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 empty before 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)

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 size of preview for 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.

← Back to all docs

Remove Background from Image

$29.00 or $6.00/mo

Get a transparent background for any image. Upload a image or use its URL.

Get on Marketplace

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 empty before 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)

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 size of preview for 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.

← Back to all docs