Free Embeddable Calculator Widgets

Copy-paste one HTML snippet — works on any website, blog, or CMS

No dependencies, no API keys, no signup. Each widget is a self-contained HTML block with inline CSS and JavaScript. Paste it anywhere — WordPress, Wix, Ghost, static sites.

BMI Calculator Widget

Body Mass Index calculator with metric/imperial units. Auto-calculates on input change, shows WHO category.

<!-- BMI Calculator Widget by BodyCalc Tool -->
<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>

<iframe src="https://bodycalctool.com/widgets/bmi.html" style="width:100%;max-width:420px;height:420px;border:none;border-radius:12px" loading="lazy"></iframe>

Live Preview

BMR Calculator Widget

Basal Metabolic Rate using Mifflin-St Jeor equation. Shows resting, sedentary, and active daily calorie estimates.

<!-- BMR Calculator Widget by BodyCalc Tool -->
<div id="bmr-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 4px">BMR Calculator</h2>
  <p style="text-align:center;font-size:.78rem;color:#71717a;margin:0 0 14px">Basal Metabolic Rate</p>
  <label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Gender
    <select id="bmr-gender" onchange="bmrCalc()" 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="male">Male</option><option value="female">Female</option></select>
  </label>
  <label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Weight (kg)
    <input type="number" id="bmr-weight" value="70" step="0.1" oninput="bmrCalc()" 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 (cm)
    <input type="number" id="bmr-height" value="170" step="0.1" oninput="bmrCalc()" 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">Age
    <input type="number" id="bmr-age" value="30" step="1" oninput="bmrCalc()" 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="bmrCalc()" 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>BMR</span><strong id="bmr-val" style="font-size:1.2rem;color:#fafafa">—</strong></div>
    <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>Sedentary</span><strong id="bmr-sed" 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>Active</span><strong id="bmr-active" 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 bmrCalc(){
  var g=document.getElementById('bmr-gender').value,w=+document.getElementById('bmr-weight').value,h=+document.getElementById('bmr-height').value,a=+document.getElementById('bmr-age').value;
  if(!w||!h||!a)return;
  var bmr=g==='male'?10*w+6.25*h-5*a+5:10*w+6.25*h-5*a-161;
  var f=function(n){return Math.round(n).toLocaleString()+' kcal/day'};
  document.getElementById('bmr-val').textContent=f(bmr);
  document.getElementById('bmr-sed').textContent=f(bmr*1.2);
  document.getElementById('bmr-active').textContent=f(bmr*1.55);
}
bmrCalc();
<\/script>

<iframe src="https://bodycalctool.com/widgets/bmr.html" style="width:100%;max-width:420px;height:500px;border:none;border-radius:12px" loading="lazy"></iframe>

Live Preview

Calorie Burn Calculator Widget

Calories burned during exercise using MET values. 10 activities: walking, running, cycling, swimming, HIIT, and more.

<!-- Calorie Burn Calculator Widget by BodyCalc Tool -->
<div id="cal-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">Calorie Burn Calculator</h2>
  <label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Activity
    <select id="cal-act" onchange="calCalc()" 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="3.5">Walking (3.5 mph)</option><option value="5">Jogging (5 mph)</option><option value="7">Running (7 mph)</option><option value="9">Running (9 mph)</option><option value="4">Cycling (moderate)</option><option value="7">Cycling (vigorous)</option><option value="5">Swimming</option><option value="3">Weight Training</option><option value="4">HIIT Workout</option><option value="2.5">Yoga</option>
    </select>
  </label>
  <label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Weight (kg)
    <input type="number" id="cal-weight" value="70" step="0.1" oninput="calCalc()" 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">Duration (minutes)
    <input type="number" id="cal-dur" value="30" step="5" oninput="calCalc()" 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="calCalc()" 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>Calories Burned</span><strong id="cal-burned" 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>Per Hour</span><strong id="cal-hour" 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 calCalc(){
  var met=+document.getElementById('cal-act').value,w=+document.getElementById('cal-weight').value,min=+document.getElementById('cal-dur').value;
  if(!w||!min)return;
  var pm=met*3.5*w/200;
  var f=function(n){return Math.round(n).toLocaleString()+' kcal'};
  document.getElementById('cal-burned').textContent=f(pm*min);
  document.getElementById('cal-hour').textContent=f(pm*60)+'/hr';
}
calCalc();
<\/script>

<iframe src="https://bodycalctool.com/widgets/calorie.html" style="width:100%;max-width:420px;height:430px;border:none;border-radius:12px" loading="lazy"></iframe>

Live Preview

Ideal Weight Calculator Widget

Ideal body weight range using Robinson, Miller, and Devine formulas — standard medical weight estimation methods.

<!-- Ideal Weight Calculator Widget by BodyCalc Tool -->
<div id="iw-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">Ideal Weight Calculator</h2>
  <label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Gender
    <select id="iw-gender" onchange="iwCalc()" 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="male">Male</option><option value="female">Female</option></select>
  </label>
  <label style="display:block;margin-bottom:10px;font-size:.85rem;color:#a1a1aa">Height (cm)
    <input type="number" id="iw-height" value="170" step="0.1" oninput="iwCalc()" 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="iwCalc()" 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>Ideal Weight Range</span><strong id="iw-range" style="font-size:1.2rem;color:#fafafa">—</strong></div>
    <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>Robinson (1983)</span><strong id="iw-robinson" style="font-size:1.2rem;color:#fafafa">—</strong></div>
    <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>Miller (1983)</span><strong id="iw-miller" 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>Devine (1974)</span><strong id="iw-devine" 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 iwCalc(){
  var g=document.getElementById('iw-gender').value,h=+document.getElementById('iw-height').value;
  if(!h)return;
  var inch=h/2.54,r,m,d;
  if(g==='male'){r=52+1.9*(inch-60);m=56.2+1.41*(inch-60);d=50+2.3*(inch-60);}
  else{r=49+1.7*(inch-60);m=53.1+1.36*(inch-60);d=45.5+2.3*(inch-60);}
  var lo=Math.min(r,m,d),hi=Math.max(r,m,d),f=function(n){return n.toFixed(1)+' kg'};
  document.getElementById('iw-range').textContent=f(lo)+' – '+f(hi);
  document.getElementById('iw-robinson').textContent=f(r);
  document.getElementById('iw-miller').textContent=f(m);
  document.getElementById('iw-devine').textContent=f(d);
}
iwCalc();
<\/script>

<iframe src="https://bodycalctool.com/widgets/ideal-weight.html" style="width:100%;max-width:420px;height:420px;border:none;border-radius:12px" loading="lazy"></iframe>

Live Preview

Why Standalone HTML Over iFrame?

No external dependency — the calculator works even if BodyCalc Tool is unreachable
Faster loading — no cross-origin request, renders instantly with your page
Full style control — the styles are inline, override what you want
SEO-friendly — search engines see the content as part of your page
No cookie warnings — no third-party cookies, GDPR-friendly by default

Back to BodyCalc Tool