Free Mortgage Calculator Widget

Embed a mortgage calculator that matches your site. Customize the look and default values above, then copy the embed code into your page—no backend required. Preview updates as you change options.

Configure the widget in the Content and Style sections, copy the code from the Embed code area, and paste it where you want the calculator to appear. The iframe resizes automatically; the “Powered by” link stays visible below the widget.

Attribution and terms

By using the embed you agree to keep the “Powered by” attribution link visible. See our Terms of Service for full requirements.

<!-- CalcRegistry Mortgage Calculator Widget -->
<div id="calcregistry-mortgage-widget"></div>
<script>
(function () {
  var mount = document.getElementById('calcregistry-mortgage-widget');
  if (!mount) return;

  var widgetUrl = "https://www.calcregistry.com/embed/mortgage/?amount=425000&years=30&rate=4.03&bg=%23ffffff&resultBg=%230f172a&resultColor=%23ffffff&inputColor=%23334155&width=360&showPmi=1&pmi=0&showHazard=1&hazard=0&showTaxes=1&taxes=0";
  var widgetOrigin = "https://www.calcregistry.com";
  var maxWidth = "360px";
  var iframe = document.createElement('iframe');
  iframe.src = widgetUrl;
  iframe.title = 'Mortgage Calculator';
  iframe.loading = 'lazy';
  iframe.setAttribute('scrolling', 'no');
  iframe.style.cssText = 'display:block;width:100%;height:1px;border:0;background:transparent;overflow:hidden;';

  var wrapper = document.createElement('div');
  wrapper.style.cssText = 'width:100%;max-width:' + maxWidth + ';background:transparent;';
  wrapper.appendChild(iframe);

  var attribution = document.createElement('p');
  attribution.style.cssText = 'margin:8px 0 0;font-size:12px;line-height:1.4;color:#64748b;text-align:center;';
  attribution.innerHTML = 'Powered by <a href="https://www.calcregistry.com/calculators/financial/mortgage-calculator" rel="noopener" style="color:#6366f1;text-decoration:none;font-weight:600;">CalcRegistry Mortgage Calculator</a>';

  mount.innerHTML = '';
  mount.appendChild(wrapper);
  mount.appendChild(attribution);

  var applyHeight = function (height) {
    if (!height) return;
    iframe.style.height = Math.ceil(height) + 'px';
  };

  window.addEventListener('message', function (event) {
    if (event.origin !== widgetOrigin) return;
    var data = event.data || {};
    if (data.type !== 'calcregistry-widget-height' || data.widget !== 'mortgage') return;
    applyHeight(Number(data.height));
  });
})();
</script>

Configure the widget in the Content and Style sections above: choose template (minimal or with insurance & taxes), default loan amount, term, and rate; optionally show payment breakdown and loan summary; set colors and max width.
Copy the embed code using the button above (or select all in the text area and copy).
Paste the code into your page’s HTML where you want the mortgage calculator to appear (e.g. in a sidebar, article, or landing section).
Save and publish. The widget will load in an iframe, auto-resize to its content height, and display the attribution link below. Users can change inputs and see results update immediately.

Content

Style

Embed code

How to embed the widget