Embeddable calculator widgets

3. Copy the embed code

Simple iframe

<iframe
  src="https://mortgagefvcalculator.com/embed/mortgage?price=450000&down=45000&rate=6.75&term=30&tax=5400&ins=1500&hoa=0&pmi=0.55"
  style="width:100%;border:0;min-height:640px"
  loading="lazy"
  title="Mortgage payment calculator"
></iframe>

Auto-resizing (recommended)

Adds a tiny listener so the iframe grows and shrinks with the content.

<iframe id="calc-mortgage" src="https://mortgagefvcalculator.com/embed/mortgage?price=450000&down=45000&rate=6.75&term=30&tax=5400&ins=1500&hoa=0&pmi=0.55"
  style="width:100%;border:0;min-height:640px" loading="lazy"
  title="Mortgage payment calculator"></iframe>
<script>
  window.addEventListener("message", function (e) {
    if (e.data && e.data.type === "ledger:resize") {
      var f = document.getElementById("calc-mortgage");
      if (f) f.style.height = e.data.height + "px";
    }
  });
</script>

React component

For Next.js, Remix, TanStack Start or any React portal — auto-resizes the same way.

// Drop-in React component — no dependencies.
export function MortgageFvWidget() {
  const src = "https://mortgagefvcalculator.com/embed/mortgage?price=450000&down=45000&rate=6.75&term=30&tax=5400&ins=1500&hoa=0&pmi=0.55";
  const ref = React.useRef<HTMLIFrameElement>(null);
  React.useEffect(() => {
    const onMessage = (e: MessageEvent) => {
      if (e.data?.type === "ledger:resize" && ref.current) {
        ref.current.style.height = e.data.height + "px";
      }
    };
    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, []);
  return (
    <iframe
      ref={ref}
      src={src}
      title="Mortgage payment calculator"
      loading="lazy"
      style={{ width: "100%", border: 0, minHeight: 640 }}
    />
  );
}