This guide explains how to integrate the ByByBG Background Removal API into a website using a simple HTML frontend and a secure backend endpoint.
Important: For security reasons, API keys should never be used directly in client-side JavaScript.
Create a simple HTML form that allows users to upload an image.
<input type="file" id="imageInput" />
<button onclick="removeBg()">Remove Background</button>
<div id="result"></div>
This JavaScript sends the image to your backend endpoint and displays the processed result.
async function removeBg() {
const fileInput = document.getElementById("imageInput");
const result = document.getElementById("result");
if (!fileInput.files.length) {
alert("Select an image first");
return;
}
const formData = new FormData();
formData.append("file", fileInput.files[0]);
result.innerHTML = "Processing...";
const response = await fetch("/web/remove-bg", {
method: "POST",
body: formData
});
if (!response.ok) {
if (response.status === 429) {
result.innerHTML = `
<p style="color:red;">
Free limit reached.<br>
Please try again later or upgrade your plan.
</p>
<a href="/pricing.php">View Pricing</a>
`;
return;
}
result.innerHTML = "Something went wrong.";
return;
}
const blob = await response.blob();
const url = URL.createObjectURL(blob);
result.innerHTML = `
<div class="preview">
<img src="${url}">
</div>
<br>
<a class="download-btn" href="${url}" download="no-bg.png">
Download
</a>
`;
}
👉 The API key is used on the backend only. Your frontend never sees the API key.