Embed the calculators

The earlier address https://www.usmortgagecalc.com/embed/calculator still works and is the mortgage calculator, so existing embeds do not need to change.

1. Script tag

One tag. The calculator appears directly after it, wherever you place it.

<script
  src="https://www.usmortgagecalc.com/embed.js"
  data-widget="mortgage"
></script>

2. Div and script

Mark the spot with a div and load the script anywhere after it. Use this when your editor copes better with a div than with a script in the middle of the content. You can use both forms on one page, and several calculators on one page.

<div data-usmc-calculator data-widget="mortgage"></div>

<script src="https://www.usmortgagecalc.com/embed.js" async></script>

3. Plain iframe

For platforms that strip JavaScript, such as many hosted CMSs and newsletter tools. No script runs on your page and the frame does not resize itself, so give it room: see sizing.

<iframe
  src="https://www.usmortgagecalc.com/embed/mortgage-calculator"
  title="Mortgage Calculator"
  width="100%"
  height="1100"
  loading="lazy"
  style="border:0;"
></iframe>

Swap mortgage for property-tax, refinance or closing-cost in the first two forms, or change the iframe address to the calculator you want. A data-widget the loader does not recognise shows the mortgage calculator.

<!-- Opens on Texas, with a $450,000 price and a 6.5% rate filled in -->
<script
  src="https://www.usmortgagecalc.com/embed.js"
  data-widget="mortgage"
  data-state="Texas"
  data-price="450000"
  data-rate="6.5"
></script>

<!-- The same presets in the plain iframe form -->
<iframe
  src="https://www.usmortgagecalc.com/embed/mortgage-calculator?state=Texas&price=450000&rate=6.5"
  title="Mortgage Calculator"
  width="100%"
  height="1100"
  loading="lazy"
  style="border:0;"
></iframe>

• The refinance calculator takes no presets.
• The mortgage calculator shows a result on load only when it has both a state and a price; with just one it fills the field and waits for the visitor.
• State names must be written out in full, exactly as in the calculator's own list. An abbreviation such as TX is not recognised.
• The attributes work on the script tag or the div. No other attribute or parameter is supported.

On a wide frame, roughly 1,024 pixels and up, the form and the result sit side by side. On anything narrower, which includes a typical article column and every phone, they stack into one column and the calculator gets taller. The frame is always 100% of the width you give it, and the content did not scroll sideways at any width tested, from 360 pixels up.

Automatic height (script forms)

With the script, the calculator tells your page how tall it is whenever its content changes, for example when a result appears, and the loader resizes the frame to match. There is no inner scrollbar and no empty gap. The only message the frame sends to your page is that number, and the loader only accepts it from this site and only for frames it created. Frames begin at 720 pixels, then correct themselves as soon as the calculator reports.

Fixed height (iframe form)

A plain iframe cannot resize itself, so set a height that fits. These were measured before a result is shown; results make the calculator taller, and a visitor will see an inner scrollbar if the frame is too short. When in doubt, go taller, or use a script form.

In WordPress's block editor, add a Custom HTML block and paste either script form. If a theme or security plugin strips script tags, use the iframe form, which needs none. The same rule applies to any editor: if it removes <script>, use the iframe. Some editors only run scripts on the published page and show an empty box in their preview; publish, or check the live page, before concluding it does not work.

<!-- Block editor: add a "Custom HTML" block and paste either form -->
<div data-usmc-calculator data-widget="property-tax" data-state="Texas"></div>
<script src="https://www.usmortgagecalc.com/embed.js" async></script>


<!-- If your theme or a security plugin strips <script>, use the iframe form -->
<iframe
  src="https://www.usmortgagecalc.com/embed/property-tax-calculator?state=Texas"
  title="Property Tax Calculator"
  width="100%"
  height="850"
  loading="lazy"
  style="border:0;"
></iframe>

Single-page apps

The loader scans the page once, when it loads. If your framework renders the div later, for example on a client-side route change, call window.usmcEmbed.mount() after it appears. Calling it again is safe; a calculator that is already mounted is skipped.

<!-- Single-page apps: add the div when the route renders, then ask the loader to mount it -->
<div data-usmc-calculator data-widget="property-tax" data-state="Ohio"></div>

<script>
  // The loader runs once at page load. If your framework inserts the div later:
  window.usmcEmbed && window.usmcEmbed.mount();
</script>

Every calculator ends with a small line, Powered by USMortgageCalc, linking to usmortgagecalc.com. It is how the calculators stay free to offer, and we ask that you leave it in place. The link is part of the calculator inside the frame, so it is not a link from your page and asks nothing of your page's markup. We are not asking you for a link, or for any particular kind of link, and we make no claim that embedding has any effect on search rankings.

• No cookies, no storage. The frame sets no cookies and uses no localStorage or sessionStorage.
• Inputs stay in the browser. The calculation runs in the visitor's browser, and nothing they type, and nothing it calculates, is sent anywhere.
• No ads and no third-party scripts in the embedded calculator.
• It reads nothing from your page. It does not access your page's content, cookies or storage, and the only message it sends to your page is its own height.
• Ordinary request details. As with any hosted resource, our servers receive standard request information, such as an IP address, when the frame loads.
• Aggregate usage counts. To learn whether the calculators are used, the script reports that a widget loaded, and the calculator reports four things: that it was seen, started, completed, or that its attribution link was clicked. Each report is the event name, which of the four calculators it was, and the hostname of the page that embeds it. It contains nothing a visitor typed, no identifier, and no part of your page's address beyond the hostname. A visitor whose browser sends Do Not Track or Global Privacy Control is not counted.

These counts are collected by our own counter, not by an advertising or analytics service, and they are floors: a visitor who blocks the request is missing from them.

Content-Security-Policy

If your site sends a CSP header, allow this site as a script source (for the loader) and a frame source (for the calculator). The iframe form needs only the frame rule. If your policy also restricts connect-src, the loader's anonymous “widget loaded” report is blocked and logged in the console; the calculator itself still works.

Content-Security-Policy:
  script-src  'self' https://www.usmortgagecalc.com;
  frame-src   'self' https://www.usmortgagecalc.com;

The calculators are a convenience, not the only route. The REST API returns the same calculations as JSON so you can render them in your own design, and the datasets are downloadable under CC BY 4.0 if you only need the numbers. Questions, or a calculator you would like to see? Get in touch. All figures are estimates, not loan offers or financial advice.