Embed a Free Calculator Widget on Your Website

The snippet

This is a complete, working embed. Paste it where you want the calculator to appear, and change the address to the calculator you want.

<iframe src="https://www.calcopenly.com/health/bmi-calculator?embed=1"
        title="BMI calculator by CalcOpenly"
        width="100%" height="820" loading="lazy"
        style="border:1px solid #d9dee2;border-radius:12px;max-width:680px"></iframe>
<p style="font:14px/1.6 system-ui,sans-serif;margin:.5rem 0 0">
  <a href="https://www.calcopenly.com/health/bmi-calculator">BMI calculator</a> by <a href="https://www.calcopenly.com/">CalcOpenly</a>
</p>

Two elements, and both of them matter. The iframe loads the calculator. The paragraph below it credits the source and gives your readers a way to reach the full version, with its method, worked examples and sources.

See this embed on its own

Copying the snippet for a calculator

Every calculator page carries its own copy of this block at the foot of the page, already filled in with that calculator's address and name. Choose a height, press the copy button and paste. Nothing has to be assembled by hand.

Or open the list of all 359 calculators and pick the one you need. Every calculator carries the same block, and the snippet it produces differs only in the address and the title, so one example is enough to see the shape of all of them.

Choosing a height

Four heights are offered: 560, 680, 820 and 1000 pixels. 820 is the default. They were measured against the rendered pages rather than guessed. In a frame about 680 pixels wide the primary answer ends between roughly 630 and 960 pixels down, depending on the calculator, so the default clears the answer and not only the inputs.

A shorter frame breaks nothing. The frame scrolls, so the method, the worked examples and the sources sit below the fold instead of disappearing. Pick the shortest height that still shows the result for the calculator you chose.

The width is 100% with a 680 pixel maximum, which fits a normal article column. Both values are ordinary HTML attributes and CSS, so change them to suit your layout.

What ?embed=1 does

Adding ?embed=1 to any calculator address renders that page for a frame. The site header, the footer and the embed block itself come off, and what remains is the calculator, its inputs and its result. The decision is read before the first paint, so a frame never flashes our navigation at your readers.

Calculations run in the reader's browser, the same way they do here. Readers can change the inputs inside the frame, and the answer updates in place.

The parameter does not create a second page. An embedded rendering still declares the plain calculator address as its canonical URL, so the frame never competes with the page it came from, and a reader who shares a result from inside the frame sends the full page rather than a chrome-free one.

Inside the frame the page behaves like any other page on this site. The privacy policy describes its browser storage, the optional usage counter and analytics.

What it costs

Nothing. There is no account to create, no key to request, no view limit and no charge. You do not have to tell us that you have embedded a calculator, although we like hearing about it.

Corrections reach your readers without you doing anything. The frame loads the live page, so a method fix or a new worked example appears in your embed as soon as it is published here.

Keep the credit line

That is the only condition, and it is what keeps these calculators free to use.

The credit line sits outside the iframe on purpose. A link inside a frame belongs to our own document, so it would only point at itself. The paragraph below the frame is the one that names the source and lets a reader reach the full calculator. Removing it removes the only thing we ask for in return.

Restyle the line to match your typography if you want to. Keep the two links and the name.

If the frame does not look right

A blank frame is almost always a relative address. The src has to be absolute, because a relative path resolves against your own site and finds nothing there.

A cut-off answer means the frame is too short for that calculator, so move up one height. A frame narrower than about 320 pixels wraps the inputs awkwardly; give the embed the width of your article column.

Anything else, including a result you believe is wrong, belongs in a message to the maintainers. Include the calculator, the inputs and the answer you expected: contact and corrections page.

Reuse beyond the embed

The embed covers putting a calculator in your page. For quoting a result in prose, citing a method or reusing site content another way, read the terms of use and ask the maintainers. How CalcOpenly calculates explains where the formulas, the worked examples and the sources come from.