Embedding Calculators

Point an iframe at /embed/<category>/<calculator>:

<iframe
  src="https://calcimator.com/embed/loans-debt/debt-payoff-complete"
  width="100%"
  height="600"
  frameborder="0"
  style="border:0;border-radius:8px;"
  loading="lazy"
  title="Calcimator"
></iframe>

Category and calculator slugs match the calculator's own page URL (/calculators/<category>/<calculator>). Every calculator's page has an Embed button that generates this snippet for you — see the marketplace for a live generator with a preview.

The height attribute above is just a starting point — the embed reports its real height once it loads, and grows or shrinks to fit automatically if your page listens for it. See Auto-resizing below.

Every embed posts its actual rendered height to the parent window whenever it changes (loads, an input changes the result, a disclosure opens, the window resizes) — no polling, coalesced to one message per animation frame:

{ "type": "calcimator:embed-size", "height": 842 }

Listen for it and resize the iframe yourself — this is the only way to get a pixel-accurate height instead of a static guess, and it's what removes the need to special-case narrow columns or mobile layouts:

const iframe = document.getElementById("my-calcimator-embed");

window.addEventListener("message", (event) => {
  if (event.origin !== "https://calcimator.com") return;
  if (event.source !== iframe.contentWindow) return; // scope to this embed
  if (event.data?.type !== "calcimator:embed-size") return;
  iframe.style.height = `${event.data.height}px`;
});

The payload is just a height in pixels (no origin-sensitive data), so the message is sent with target origin * — always check event.origin and, if your page embeds more than one calculator, event.sourceyourself before trusting a message. If you don't wire this up, the embed still works — it just stays at whatever fixed height you gave it, same as before this existed.

Not every embed context wants the full calculator. If your page already has its own chart, or you just want the inputs and headline result in a compact space, hide whatever you don't need with ?hide=:

<!-- Hide the chart and the "how it's calculated" breakdown -->
<iframe src="https://calcimator.com/embed/loans-debt/debt-payoff-complete?hide=chart,steps" ...></iframe>

A key that doesn't apply to a given calculator (e.g. hide=tableon a calculator with no table) is simply ignored — it's always safe to pass the full set of keys and let each calculator use only the ones that apply to it. Hiding sections shrinks the embed's actual rendered height; if you've wired up Auto-resizingabove, the iframe picks that up automatically — otherwise you'll want to re-measure and reduce your fixed height by hand.