Works on any website
Use it on standard HTML pages and platforms beyond WordPress.
JavaScript BMI calculator widget
Free BMI Calculator Widget for Any Website
Add a free BMI calculator widget to your website with one copy-paste snippet. It works on regular HTML pages, supports metric and imperial units, and does not require WordPress, a plugin, or external libraries.
The free widget always includes a visible “Powered by BodyMetricCalculator.com” link as part of the embed.
Quick embed
One div and one script
Use the widget on nearly any website, keep styles isolated with Shadow DOM, and support both metric and imperial users without a plugin install.
- Embeddable BMI calculator for plain HTML and other platforms
- Metric and imperial unit support built into every widget
- Powered by backlink included in each widget instance
Add a BMI Calculator to Your Website
This embeddable BMI calculator works on any website where you can paste HTML and a script tag. It is a good fit for health blogs, wellness sites, fitness pages, nutrition resources, or landing pages that need a simple interactive BMI tool without a full CMS plugin.
The widget uses Shadow DOM for style isolation, so it is less likely to clash with your site CSS. It also keeps the powered-by link visible in every instance, which is part of the free widget offering. If you need a WordPress-specific option instead, use the free BMI calculator WordPress plugin.
For many site owners, this solves a practical gap. You may want a BMI calculator for a custom HTML site, a static website, a funnel page, or a CMS that accepts custom code snippets but does not offer a good plugin marketplace. In those cases, a lightweight JavaScript widget is easier to manage than building a tool from scratch, and it is usually faster than wiring up a fully custom calculator just to add one interactive feature.
The embed is intentionally simple: one container div, one script tag, and optional attributes for unit defaults, colors, compact mode, and text settings. That makes it easier to test on a staging page, reuse across multiple landing pages, and drop into templates that already have their own typography and layout systems.
Live demo
This is the same widget file served from the public embed URL.
Who Is This BMI Widget For?
This widget is for website owners who want a BMI calculator without committing to a custom build or a platform-specific plugin. It works well for health blogs, fitness websites, wellness pages, nutrition resources, clinics, educational websites, and landing pages that benefit from a quick interactive tool visitors can use in place.
It is also useful for freelancers, agencies, and marketers who build pages across different stacks. If you work on custom HTML sites, static websites, hosted landing page builders, or CMS platforms that allow custom HTML and script tags, the widget gives you a reusable BMI calculator that is faster to deploy than rebuilding the same feature on every project.
The audience is not limited to developers. Non-technical site owners can still use the widget if their platform lets them paste HTML and JavaScript in the page body, footer, or a custom code block. That makes it a practical option for teams that want a BMI calculator for website engagement without adding a larger development task to the backlog.
Why Add a BMI Calculator to Your Website?
A BMI calculator gives visitors something useful to do immediately. Instead of only reading about weight, health, or nutrition, they can enter their numbers and get a result on the page. That simple interaction often makes the content feel more practical, especially on pages meant to inform, qualify interest, or move a visitor toward a next step.
This matters for user experience. A tool like this can help a blog post feel more actionable, a lead magnet page feel more interactive, or a resource page feel more complete. If someone lands on a page after searching for a BMI calculator for website use, an embeddable widget lets you satisfy that intent directly without forcing them to leave your site.
It also has practical content benefits. A BMI widget can support articles about healthy weight ranges, calorie planning, or general wellness education. It works as a supporting tool alongside the main BMI calculator page and can help bridge the gap between informational content and lightweight on-page interaction.
Features
The widget is designed to be lightweight, mobile-friendly, and easy to embed without asking site owners to manage extra dependencies.
Metric and imperial units
Let visitors choose the unit system that matches how they measure height and weight.
Shadow DOM isolation
Widget styles stay inside the component instead of leaking into the host page.
Multiple widgets supported
Add more than one widget to a page and each instance works independently.
Supported Platforms
The widget is intended for broad compatibility. It can work on custom HTML websites, static websites, health blogs, fitness websites, nutrition pages, simple landing pages, and CMS platforms that allow custom HTML and script tags. In practice, that covers a large share of site builders, custom-coded marketing pages, and content sites that do not need a full plugin architecture.
The most important requirement is that your platform must allow a script tag to load the widget file and a container element where the widget can render. If a platform strips script tags entirely, the widget may not load there. If it allows custom code blocks, section-level scripts, or footer scripts, you can usually make it work.
Because the widget uses plain JavaScript and Shadow DOM, it stays self-contained and is easier to reuse across different front-end setups. That is often a better fit than trying to maintain multiple versions of the same BMI tool for different CMS environments.
Installation
Paste this snippet where you want the widget to appear. The div acts as the mount point and the script loads the widget code from BodyMetricCalculator.com.
In most cases, installation means pasting the container div into your page content or template and then loading the widget script once on the page. If you use the widget in several places on the same page, you can add multiple container divs and reuse the same script include.
Default embed snippet
<div data-bodymetric-bmi-widget data-default-unit="metric"></div>
<script async src="https://bodymetriccalculator.com/widgets/bmi-widget.js"></script>Customization Options
You can control the default unit, set a theme color, and switch compact mode with data attributes. The widget stays self-contained and does not require a build step.
You can also change the visible title, eyebrow text, intro copy, and card background color without editing the widget script itself. That makes the same widget easier to adapt to a service page, a lead generation landing page, or a more editorial content layout while keeping the calculator behavior consistent.
Customization example
<div data-bodymetric-bmi-widget data-default-unit="imperial" data-theme-color="#16a34a" data-background-color="#f0fdf4" data-title="BMI Check" data-eyebrow="Website tool" data-show-eyebrow="true" data-intro="Use this quick calculator to check your BMI." data-compact="false"></div>
<script async src="https://bodymetriccalculator.com/widgets/bmi-widget.js"></script>Supported attributes: data-default-unit, data-theme-color, data-background-color, data-title, data-eyebrow, data-show-eyebrow, data-intro, and data-compact.
Metric and Imperial Units
The widget supports both common BMI input styles. Metric mode uses kilograms and centimeters. Imperial mode uses pounds with feet and inches. That makes it useful for international audiences and for websites that publish to both US and non-US visitors.
That dual-unit support matters in practice. A site with a global audience should not force every visitor into one measurement system. The widget lets users choose the format they already understand, which reduces friction and makes the interaction feel more natural.
BMI Widget vs WordPress Plugin
The JavaScript widget is the better choice if you run a custom HTML site, a static site, or another platform where you can paste HTML and scripts but do not want a plugin workflow. The WordPress plugin is the better choice if your site already runs on WordPress and you prefer a plugin plus shortcode installation flow.
If you are comparing the two, the main difference is setup style rather than BMI logic. The widget is broader and platform-agnostic. The plugin is more natural for WordPress users who want admin-managed installation and shortcode placement. You can compare them directly on the WordPress plugin page.
Best Practices for Embedding the Widget
Place the widget where it supports the page rather than interrupts it. On informational pages, that usually means below an introduction or alongside a section about BMI, healthy weight, or general body metrics. On landing pages, it often works best after a short explanation of what the tool does and why a visitor might want to use it.
Give the widget enough space to breathe. The component is responsive, but it still benefits from a clean content area instead of a cramped sidebar. If you want a lighter footprint on smaller layouts, compact mode can help reduce spacing while keeping the calculator readable.
It is also worth keeping expectations clear. BMI is useful as a general screening tool, but it does not replace medical advice or full body composition assessment. That is why the widget includes a disclaimer and why pages using it should avoid presenting the result as a diagnosis.
Troubleshooting
Widget does not appear
Check that the container div is on the page, the script URL is correct, and your platform allows custom script tags. Some builders and CMS editors block third-party or custom JavaScript on lower-tier plans or restricted content blocks.
Styles look different
The widget uses Shadow DOM to isolate its styles, so host-page CSS should not normally break the component. If the surrounding layout still feels off, check the width of the parent container or try a simpler section wrapper with more space around the widget.
Copy button does not work
Some browsers, privacy modes, or embedded admin previews limit clipboard access. If that happens, copy the code manually from the code block. The page now shows a fallback message when clipboard access is not available.
Script is blocked by platform restrictions
Some platforms allow HTML but not custom script tags. In those cases, the widget may not be usable there until the platform allows custom code embeds. If you are on WordPress, the WordPress plugin may be the easier route.
Frequently Asked Questions
Does this BMI calculator widget work on any website?
Yes. The widget is a plain JavaScript embed, so it works on most websites without WordPress, plugins, or external dependencies.
Do I need WordPress?
No. The widget works on regular HTML pages and other website platforms, so you do not need WordPress to use it.
Can I use it on a static HTML website?
Yes. The widget is a good fit for static HTML websites because you only need a container div and a script tag.
Does it support metric and imperial units?
Yes. The widget supports metric inputs with kilograms and centimeters, plus imperial inputs with pounds, feet, and inches.
Can I customize the color?
Yes. You can set a custom theme color with the data-theme-color attribute and adjust the card background with data-background-color.
Can I remove the powered by link?
No. The powered by link is included as part of the free widget and stays visible in every widget instance.
Is BMI medical advice?
No. BMI is a general screening tool and does not replace professional medical advice.