Adding a free BMI calculator to your blog is one of the easiest ways to boost engagement and keep visitors on your site longer. Health and fitness blogs see higher time-on-page when readers can interact with a tool instead of just reading text. Here's how to do it — no plugins, no API keys, no signup required.
TL;DR: Copy one block of HTML code, paste it into your page, and you're done. The calculator works instantly. Both metric and imperial units are supported, with automatic WHO category classification.
This is the best method for most websites. The code below is a fully self-contained BMI calculator — all the CSS styles and JavaScript logic are inline. No external dependencies, no third-party requests, no cookie banners.
<!-- BMI Calculator Widget by BodyCalc Tool — https://bodycalctool.com/widgets/bmi.html -->
<div id="bmi-calc" style="max-width:400px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#27272a;color:#f4f4f5;border-radius:12px;padding:24px;border:1px solid #3f3f46">
<h2 style="font-size:1.15rem;color:#f97316;text-align:center;margin:0 0 16px">BMI Calculator</h2>
<label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Unit
<select id="bmi-unit" onchange="bmiCalc()" style="width:100%;padding:9px 10px;margin-top:4px;border-radius:8px;border:1px solid #52525b;background:#18181b;color:#f4f4f5;font-size:.9rem">
<option value="metric">kg / cm</option><option value="imperial">lbs / in</option>
</select>
</label>
<label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Weight
<input type="number" id="bmi-weight" value="70" step="0.1" oninput="bmiCalc()" style="width:100%;padding:9px 10px;margin-top:4px;border-radius:8px;border:1px solid #52525b;background:#18181b;color:#f4f4f5;font-size:.9rem">
</label>
<label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Height
<input type="number" id="bmi-height" value="170" step="0.1" oninput="bmiCalc()" style="width:100%;padding:9px 10px;margin-top:4px;border-radius:8px;border:1px solid #52525b;background:#18181b;color:#f4f4f5;font-size:.9rem">
</label>
<button onclick="bmiCalc()" style="display:block;width:100%;margin-top:14px;padding:10px;font-size:.9rem;background:#f97316;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600">Calculate</button>
<div style="margin-top:16px;background:#18181b;border-radius:10px;padding:16px">
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #3f3f46;font-size:.85rem;color:#a1a1aa"><span>Your BMI</span><strong id="bmi-val" style="font-size:1.2rem;color:#fafafa">—</strong></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:.85rem;color:#a1a1aa"><span>Category</span><strong id="bmi-cat" style="font-size:1.2rem;color:#fafafa">—</strong></div>
</div>
<div style="text-align:center;margin-top:12px;font-size:.75rem;color:#71717a">Powered by <a href="https://bodycalctool.com/" target="_blank" rel="noopener" style="color:#f97316;text-decoration:none">BodyCalc Tool</a></div>
</div>
<script>
function bmiCalc(){
var u=document.getElementById('bmi-unit').value,w=+document.getElementById('bmi-weight').value,h=+document.getElementById('bmi-height').value;
if(!w||!h)return;
var bmi=u==='metric'?w/Math.pow(h/100,2):(w/Math.pow(h,2))*703;
document.getElementById('bmi-val').textContent=bmi.toFixed(1);
var cat=bmi<18.5?'Underweight':bmi<25?'Normal Weight':bmi<30?'Overweight':'Obese';
document.getElementById('bmi-cat').textContent=cat;
}
bmiCalc();
<\/script>
The id="bmi-calc" container prevents conflicts with other JavaScript on your page. All function names and element IDs are namespaced under the bmi- prefix. If you need to embed multiple calculators on the same page, each uses its own namespace.
If your platform strips <script> tags (some forum software, certain CMS configurations), use the iframe method instead. It's one line of HTML.
<iframe src="https://bodycalctool.com/widgets/bmi.html" style="width:100%;max-width:420px;height:420px;border:none;border-radius:12px" loading="lazy"></iframe>
The iframe is hosted on BodyCalc Tool's servers. It's always up to date and requires zero maintenance on your end. The trade-off: it makes an external request, loads slightly slower, and won't contribute to your page's SEO content.
Here's what the calculator looks like on a page:
Live BMI Calculator — try it out
In addition to the BMI calculator, we offer three more free embeddable health calculators for your website:
Each comes with both standalone HTML code and iframe embed options. Visit our widgets page for all embed codes.
The standalone code uses inline styles that you can edit directly. The main colors are:
#18181b (dark gray) — change in the container style="background: ..."#f97316 (orange) — search for this color and replace it#27272a — change in the outer div's inline style#f4f4f5 (light gray) — change in the container's color: ...If you're comfortable with CSS, you can also move the inline styles to a <style> block and use classes instead. The JavaScript only references element IDs, so it doesn't depend on the inline styles at all.
Method 1 (standalone): No. All code is inlined — there are zero network requests, zero external files, and zero render-blocking resources. The entire calculator adds about 3KB (gzipped) to your page.
Method 2 (iframe): Minimal. The iframe loads asynchronously with loading="lazy", so it won't block your page from rendering. It's similar to embedding a YouTube video in terms of performance impact.
Yes. The calculator uses max-width: 400px and responsive inputs. It looks and works great on phones and tablets.
Yes. Paste the code on as many pages as you want. There's no usage limit.
The code includes a small "Powered by BodyCalc Tool" link at the bottom. We'd appreciate it if you keep it — it's how other bloggers discover the free tool. But it's not a legal requirement.
Reach out through our contact page. We're happy to help with installation issues or discuss custom calculator needs.