Free · No Sign-Up

Add a BMI Calculator to Your Website in 30 Seconds

Drop a single <script> tag into your page and you’ve got a fully responsive, self-contained BMI calculator — zero dependencies, zero configuration.

1 line of code

0 dependencies

100% free

Why Embed Our Widget?

⚡

Instant Setup

Copy, paste, done. Works with WordPress, Squarespace, Wix, or any HTML page.

📱

Fully Responsive

Looks great on desktop, tablet, and mobile. Adapts to any container width.

🔒

Privacy-First

No data leaves the browser. Zero tracking, zero cookies. 100% client-side.

Get the Code

Copy the snippet below and paste it anywhere on your page. The widget will automatically find or create a <div id="healthcalc-bmi-widget"> container.

                
<!-- HealthCalc BMI Widget -->
<div id="healthcalc-bmi-widget"></div>
<script src="https://healthcalc.online/widget-bmi.js"></script>
            

That’s it. The calculator renders inline with a clean white card, blue primary color, and a gradient BMI gauge. All styles are encapsulated to avoid conflicts with your site’s CSS.

Features

✓ Weight input with kg / lbs toggle
✓ Height input with cm / ft/in toggle
✓ Animated BMI result with color-coded gauge
✓ Category display (Underweight, Normal, Overweight, Obese)
✓ Shadow DOM scoped styles — no CSS conflicts
✓ Responsive design works on all screen sizes
✓ Zero external dependencies — no jQuery, no frameworks
✓ Privacy-first — everything runs client-side, no data collected
✓ "Powered by HealthCalc.online" link at bottom

Customization Tips

The widget auto-detects a container with id="healthcalc-bmi-widget". To control placement, simply place the div where you want the calculator to appear:

                
<!-- Place it in a sidebar, footer, or any section -->
<div id="healthcalc-bmi-widget"
     style="max-width:380px;margin:0 auto;"></div>
<script src="https://healthcalc.online/widget-bmi.js"></script>
            

The widget inherits your container’s width. You can wrap it in any layout, sidebar, or column.

How It Works

Step 1: Add the <div id="healthcalc-bmi-widget"> where you want the calculator.
Step 2: Include the <script> tag — it can go in the <head> or before </body>.
Step 3: The widget renders a BMI calculator with weight/height inputs, a calculate button, and a color-coded result gauge.

The script is ~4KB and loads instantly. All BMI calculations happen in the user’s browser — no server requests, no latency, no privacy concerns.