Background removal with No Code & Bubble.io
Learn how to remove backgrounds from images in your Bubble.io app effortlessly with this step-by-step guide, showcasing the power of no-code development.
Remove backgrounds instantly: Learn how to integrate a powerful API connector for seamless image editing in your Bubble app.
Custom states magic: Discover how to use custom states to display processed images without saving to your database, maximizing efficiency.
Streamline your workflow: Create a simple yet powerful image processing page with just a few elements and API calls.
Removing Background Images with No Code and Bubble.io
Here's how you can remove the background from your images in your Bubble app just like this website here and I'm going to show you how I've built this simple page and API connection to remove the green background from this image of me. One of the images that we use on our videos and if you want to see more videos like this then click the link down in the description because we've got hundreds of Bubble's tutorial videos just like this one but I'm going to dive right in now into the API here.
Setting Up the API Connection
So I've signed up for an account with these guys and I then I've gone into the API documentation and I've looked for their image file, C, URL and I've taken what they've got written here and translated that into the Bubble API connector. So I've added the Bubble API connector, I've added the name remove.bg and then I have to authenticate because it's like a password it's how you know if I used the service a lot they'd want to know who to bill which account so I add the private key in header it's got this name and here's my key value which I'll be deleting as soon as I publish this video and then I go ahead and I add an API call and so I can name this anything I like I've said upload and process I've set it as an action and the data type as image.
Understanding API Response and Form Data
Now in 99% of our demonstrations with a Bubble API connector this is set to JSON because we get a load of text data in JSON code back but actually this API in some ways is nice and clean it just responds back with the processed image. Then I need form data again most of the time we use JSON but in this case we use form data and then I have the parameters image file and I set that to be send file.
API Documentation and Implementation
Now I've got all of that from this documentation here which is here's the end point and then I've actually not added in the size parameter doesn't need it but we can see that this goes in the header just explain that and then we have image and then the file. Now you can do this two different ways you could just point at an image URL and you could do that just as easily with Bubble but I've gone with image file because the image might not be a public image if you've got the right privacy rules set up around uploading files and images and attach files in your privacy rules then your images even if you were to direct links them may not be accessible and so this third party service wouldn't be able to pick the image up from the URL so we're actually just sending the file instead we're not saying look here here's the file we're saying here's the file okay then let's dive in a little bit deeper I had to initialize it by uploading a file here and I've got no errors and so it's successfully initialized that means that I can go onto my page and my page is called image demo and on the page I have a custom state that I've called processed image and it's of type image because I want to be able to display the results by adding an image element to my page and saying go to my custom state and show the process image it's just my way of recalling it without necessarily saving the image to my database.
Image Processing and Storage
Now the image is not saved to a field in my database but the image will take up space in the file manager of my Bubble app so I am still taking up space of my Bubble app quota by doing this to the image I've then got an image uploader and I've got a button so let's have a look when the button is clicked I run my API call now I see this in here and if I wanted to find it again I could go into plugins and search for my remove background and so it's remove background upload and process and that's just because that's exactly what I've named it here okay so yours may be different then I say take the result of step one and set the state so I'm populating the custom state with the image and the end of all of that and it literally just takes seconds to do is a rather quick and impressive background removal tool built completely with no code using the background removal API and combining that with my Bubble app.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.