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”.

1. Drag a Button element onto the page.
2. In the Workflow tab, add a new event: When Button Remove Background is clicked.

2️⃣ Add the “Remove Image Background” action

1. Inside the event, click Add an action → Plugins → Remove Background from Image → Remove Image Background.
2. Fill in the required fields:

3️⃣ Capture the result

After the action runs, it returns a Result Image (type: image). Use it in the next step:

1. Add another action such as “Display data in a picture element”, “Upload to a thing”, or “Send to an API”.
2. 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

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)

✅ 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.

Installation

1. Open your Bubble app editor.
2. In the Plugins tab, click Add plugins.
3. Search for “Remove Background from Image” and click Install.
4. Once installed, go to the plugin’s Settings tab to configure it (see Configuration below).

Configuration

API Key

1. Paste the API key into the API Key input field under Plugin Settings.
2. Click Save.

Tip: Keep your API key secret. Do not expose it in client‑side code or public repositories.

Optional Global Settings

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

Example Workflow

1. User uploads an image via a FileUploader element.
2. Button “Remove Background” → Workflow:
   • Action: Plugins → Remove Background from Image → Remove Image Background
   • Set image = FileUploader's value
   • Optional: size = "full", format = "png"
3. Result – the action returns an image URL (Result of step X (image)).
4. 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

2. Account Info

Retrieve your current credit balance and the number of free API calls remaining.

No inputs required.

API Reference

1. Remove Image Background

Endpoint (internal, used by the plugin): POST https://api.remove.bg/v1.0/removebg

Success Response (200)

{
  "data": {
    "result_b64": "<base64‑encoded image>",
    "result_url": "https://.../output.png",
    "credits": 1,
    "width": 625,
    "height": 400
  }
}

Error Responses

2. Account Info

Endpoint (internal): GET https://api.remove.bg/v1.0/account

Success Response (200)

{
  "data": {
    "credits_total": 500,
    "credits_used": 123,
    "free_calls_remaining": 50
  }
}

Error Responses – same as above (401, 500, etc.).

Troubleshooting

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

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.