Free Mortgage Calculator Widget for Your Website

Add a responsive mortgage calculator widget to your website with a simple copy-and-paste script. Our embeddable mortgage calculator is designed for publishers, bloggers, loan officers, mortgage brokers, real estate professionals, home builders, and financial websites that want a clean JavaScript mortgage calculator widget visitors can use directly on the page.

You can set default values for home price, down payment, interest rate, loan term, taxes, insurance, PMI, HOA, and the starting tab. The calculator stays hosted on MortgagePaymentCalculator.io, so when we improve the widget, your embedded version stays up to date without you having to rebuild it.

Step 1: Choose your default calculator values

Set the values you want visitors to see when the widget first loads. Core fields are the most common defaults. Housing cost fields are optional and can be left at 0 if you do not want to prefill them.

You can leave all of the input fields exactly as they are, or change any of them to match your own preferred defaults.

Core defaults

Recommended

Optional housing cost defaults

Optional

These fields are optional. If you leave them at 0, the widget will still work correctly.

What the fields mean

These labels control how the calculator first appears when it loads on your website.

Home price: The purchase price shown when the calculator first loads.
Down payment mode: Controls whether the down payment starts as a dollar amount or a percentage.
Down payment amount: The default dollar amount used for the down payment.
Down payment percent: The default percentage used for the down payment.
Interest rate (%): The starting annual mortgage interest rate.
Loan term: The default mortgage term, such as 10, 15, 20, or 30 years.
Start month: The month used for the payoff timing and amortization schedule.
Start year: The year used for the payoff timing and amortization schedule.
Property tax / month: An optional monthly property tax estimate.
Insurance / month: An optional monthly homeowners insurance estimate.
PMI rate annual %: An optional annual PMI rate used when PMI applies.
HOA / month: An optional monthly HOA dues estimate.
Default tab: Controls whether the widget opens first on Payment breakdown or Amortization.
Minimum height (px): Sets the starting height of the embed before auto-resize adjusts it.

Step 2: Copy your embed code

Once you choose your defaults, copy the code below and paste it into the HTML of your page where you want the mortgage calculator widget to appear.

Embed Code

<div style="max-width: 100%;">

<p style="margin: 0 0 8px; text-align: center;">
  <a href="https://mortgagepaymentcalculator.io/" target="_blank">
    <img
      src="https://mortgagepaymentcalculator.io/Mortgage-Calculator-logo.svg"
      width="590"
      height="60"
      alt="MortgagePaymentCalculator.io"
      border="0"
      style="max-width: 100%; height: auto; display: inline-block;"
    />
  </a>
</p>

<div id="mpc-mortgage-calculator"></div>
<script
  src="https://mortgagepaymentcalculator.io/embed/mortgage-calculator.js"
  data-price="475000"
  data-down-mode="amount"
  data-down-pct="20"
  data-down-amt="95000"
  data-rate-pct="6.243"
  data-term-years="30"
  data-start-month="4"
  data-start-year="2026"
  data-tax-monthly="280"
  data-insurance-monthly="66"
  data-pmi-rate-pct="0.5"
  data-hoa-monthly="0"
  data-tab="payment"
  data-theme="light"
  data-min-height="980"
  async
></script>

<div style="font-family: Arial, Helvetica, sans-serif; margin-top: 8px; padding: 8px 10px; box-sizing: border-box; text-align: right; background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b; line-height: 1.4; font-size: 12px; border-radius: 0 0 8px 8px;">
  <a
    style="color: #475569; text-decoration: underline;"
    href="https://mortgagepaymentcalculator.io/free-tools/mortgage-calculator-widget"
    target="_blank"
  >Mortgage Calculator for Website</a> by MortgagePaymentCalculator.io
</div>

</div>

Notes

  • Housing cost fields are optional and can be left as they are or at 0.
  • If you default to the amortization tab, use a taller minimum height.
  • The widget auto-resizes with the provided script.
  • The embed is hosted on our domain, so updates roll out automatically.

Step 3: See what the mortgage calculator widget looks like

These preview images show how the embedded calculator can look on a webpage in both the payment breakdown view and the amortization view. Or test the live version here.

Embedded mortgage calculator payment breakdown view
Payment breakdown view.
Embedded mortgage calculator amortization view
Amortization view.

Step 4: Add the mortgage calculator to your website

Step 1
Choose your defaults
Pick the starting values you want visitors to see, or leave the current defaults as they are.
Step 2
Copy the embed code
Copy the generated script code from this page after you finish your settings.
Step 3
Paste it into your webpage
Add the code to the HTML of your blog post, landing page, resource page, or website template. There's no limit, add it to as many pages you want.
Step 4
Publish and test
Save your page, load it in a browser, and confirm the calculator displays and resizes correctly.

Why use an embeddable mortgage calculator widget?

A mortgage calculator can help keep visitors on your site longer by giving them a practical tool they can use immediately. For publishers and businesses in home buying, mortgages, real estate, investing, and personal finance, that can improve user experience and make content more useful.

If people are searching for a JavaScript mortgage calculator, embeddable mortgage payment calculator, they usually want something easy to install, visually clean, mobile friendly, and simple to maintain. This page is built to help with exactly that.

Because the widget is served from MortgagePaymentCalculator.io, you do not need to rebuild the calculator every time you want improvements. You can set practical defaults and let the widget do the rest.

Features

  • It's free to use!
  • Responsive for desktop and mobile layouts
  • Supports home price, down payment, interest rate, loan term, and starting date
  • Optional monthly tax, insurance, PMI, and HOA defaults
  • Graphical payment breakdown with charting and summary cards
  • Amortization tab with balance and equity visuals
  • Simple script-based installation
  • Hosted and maintained on MortgagePaymentCalculator.io
  • The calculator is "Blazing Fast" and will not slow down your site compared to older calculator widgets.

Common questions

Which fields are optional?

Property tax, homeowners insurance, PMI rate, and HOA are optional. You can leave them at 0 and the widget will still work correctly.

Can I leave the defaults as they are?

Yes. You can use the current default values without making any changes, or customize them to better match your site and audience.

Can I start on the amortization tab?

Yes. Use the default tab setting to choose either payment breakdown or amortization.

Will this cost me anything?

No. This tool is 100% free. Just copy the code and paste on your webpage(s).

If you have questions about adding this tool to your website or want to share feedback about our calculators, please contact us.