Free BMI Calculator Widget

Embed a BMI calculator that matches your site. Set default height, weight, and units, tune colors, then copy the embed code into your page (no backend required). The preview updates as you change options.

Configure Content and Style, copy the code from Embed code, and paste it where you want the calculator. The iframe resizes automatically; the “Powered by” link stays visible below the widget.

Attribution and terms

By using the embed you agree to keep the “Powered by” attribution link visible. See our Terms of Service for full requirements.

<!-- CalcRegistry BMI Calculator Widget -->
<div id="calcregistry-bmi-widget"></div>
<script>
(function () {
  var mount = document.getElementById('calcregistry-bmi-widget');
  if (!mount) return;

  var widgetUrl = "https://www.calcregistry.com/embed/bmi/?units=metric&heightCm=175&weightKg=70&heightFeet=5&heightInches=10&weightLbs=154&bg=%23fafaf8&resultBg=%23292524&resultColor=%23f5f3ef&inputColor=%2357534e&width=360&showHealthy=1&showDisclaimer=1";
  var widgetOrigin = "https://www.calcregistry.com";
  var maxWidth = "360px";
  var iframe = document.createElement('iframe');
  iframe.src = widgetUrl;
  iframe.title = 'BMI Calculator';
  iframe.loading = 'lazy';
  iframe.setAttribute('scrolling', 'no');
  iframe.style.cssText = 'display:block;width:100%;height:1px;border:0;background:transparent;overflow:hidden;';

  var container = document.createElement('div');
  container.style.cssText = 'width:100%;max-width:' + maxWidth + ';margin:0 auto;background:transparent;';
  container.appendChild(iframe);

  var attribution = document.createElement('p');
  attribution.style.cssText = 'margin:8px 0 0;font-size:12px;line-height:1.4;color:#57534e;text-align:center;';
  attribution.innerHTML = 'Powered by <a href="https://www.calcregistry.com/calculators/fitness-and-health/bmi-calculator" rel="noopener" style="color:#44403c;text-decoration:underline;text-underline-offset:2px;font-weight:600;">CalcRegistry BMI Calculator</a>';

  mount.innerHTML = '';
  container.appendChild(attribution);
  mount.appendChild(container);

  var applyHeight = function (height) {
    if (!height) return;
    iframe.style.height = Math.ceil(height) + 'px';
  };

  window.addEventListener('message', function (event) {
    if (event.origin !== widgetOrigin) return;
    var data = event.data || {};
    if (data.type !== 'calcregistry-widget-height' || data.widget !== 'bmi') return;
    applyHeight(Number(data.height));
  });
})();
</script>

Content

Style

Embed code

How to embed the widget