BMI calculator for your website
Free to put on any site. Metric or feet and pounds, the World Health Organization category, and the healthy weight range for that height rather than just a number.
Accent colour
The real widget, running here with your settings.
What it does
Height and weight in, body mass index out, with the category named and marked on a coloured scale so a reader can see where they sit rather than looking the number up. It switches between metric and feet and pounds, and the imperial side takes feet and inches separately because that is how people know their height.
The part most BMI widgets leave out is the healthy weight range for the height entered. A category on its own tells someone they are outside a band. The range tells them what the band actually means in kilograms or pounds, which is the number they came for.
Categories follow the World Health Organization adult bands: under 18.5, 18.5 to 25, 25 to 30, and 30 upwards. The arithmetic is done in kilograms and metres whichever units are shown, so both sides agree to the decimal.
BMI is a screening figure, not a diagnosis. It does not distinguish muscle from fat, and it behaves badly for athletes, for the very tall and very short, and during pregnancy. The widget says so beneath every result. The fuller picture, including body fat estimates, is on the BMI calculator here.
How to install it
Copy the code above and paste it into your page where you want the calculator to show. It is ordinary HTML, so it goes wherever HTML goes.
WordPress
In the block editor, add a Custom HTML block and paste the code into it. In the classic editor, switch from Visual to Text first. For a sidebar, use a Custom HTML widget under Appearance, then Widgets. Some managed hosts strip script tags from posts written by non-administrator accounts, in which case paste it while signed in as an administrator.
Wix, Squarespace and Shopify
Wix: add an Embed HTML element and paste the code into the code panel. Squarespace: add a Code block and turn off Display Source. Shopify: paste it into a section or page written in the code editor rather than the rich text field, which removes scripts.
Plain HTML
Paste both lines into the body of the page. The script tag can sit next to the div or at the end of the document, and it only needs to appear once even if the page holds several calculators.
Settings you can change
Every option is a data attribute on the div, so the script itself never needs editing.
| Attribute | What it does | Example |
|---|---|---|
data-theme | Light or dark surface | dark |
data-accent | Colour of the selected tab and link | #15803d |
data-title | Heading text, or empty for none | Check your BMI |
data-units | Which unit system it opens in | imperial |
The widget renders inside a shadow root with its own stylesheet, so your site's CSS cannot reach in and break it, and your own rules are equally safe from ours. It caps itself at 400px wide and shrinks to fit anything narrower. To control where it sits, wrap the div in a container of your own.
Terms of use
By using this code you agree:
- The materials are provided as is, without warranty of any kind.
- Not to alter the calculation logic in the script.
- Not to remove the "powered by Calculator Castle" credit link.
- That copyright in the code belongs to calculatorcastle.com.
- Not to remove these terms from the standalone version.
Results are estimates for planning and carry no warranty. Neither you nor your visitors should treat the output as professional advice.
Common questions
Questions about the widget
Is the widget free?
Yes, on any site, including commercial ones. No fee, no account and no usage limit. The one condition is that the "powered by Calculator Castle" link stays visible.
Which categories does it use?
The World Health Organization adult bands: underweight below 18.5, healthy weight from 18.5 to 25, overweight from 25 to 30, and obese at 30 and above. Each has its own colour on the scale, with a marker showing where the result falls.
Does it work in feet and pounds?
Yes, and it takes feet and inches in separate boxes rather than asking for a decimal number of feet. The data-units attribute sets which system it opens in, and visitors can switch.
Does it show the healthy weight range?
Yes, for the height entered, in the units on screen. That is the number most people are actually after once they have seen which category they are in.
Is BMI reliable?
It is a screening tool for populations, not a diagnosis for a person. It cannot tell muscle from fat, so it reads high for athletes, and it is not meant for children, pregnancy or the very elderly. The widget carries that caveat under every result, which matters if your page is offering health information.
How big is it?
12 KB, around 4.2 KB compressed over the wire, loaded with the async attribute so it never blocks your page. No libraries, no fonts, no images and no network requests once loaded.
Will it clash with my site styles?
No. It renders inside a shadow root with its own stylesheet, so your CSS cannot reach into it and its CSS cannot leak out. We test that against a page that sets width, colour and font on every input and button with !important.
Does it track my visitors?
No. It sets no cookies, stores nothing and sends nothing back to us. Everything is worked out in the browser of the person using it, so it needs no cookie banner of its own.
BMI is a screening figure and not medical advice. See all embeddable calculators.