Mortgage calculators are one of the highest-engagement tools you can add to a lending website. Visitors who interact with a calculator are significantly more likely to convert into leads, spending more time on your site and returning more frequently. MortgageMate provides a suite of 9 professional embeddable calculators trusted by 500+ websites and processing over 10,000 calculations every month. This guide walks you through everything you need to know to get them running on your site.
Why Embeddable Mortgage Calculators Matter for Your Website
Adding interactive calculators to your website does more than fill a page. They give visitors a reason to stay, explore, and ultimately reach out. Research consistently shows that pages with interactive tools see longer session durations, lower bounce rates, and higher conversion rates compared to static content alone.
For mortgage professionals, calculators serve a dual purpose. They educate borrowers on what they can afford, what their payments will look like, and how different scenarios compare. At the same time, they position your website as a resource worth bookmarking and sharing. With 9 calculator types available, MortgageMate covers every stage of the borrower journey, from initial affordability questions to refinance comparisons and investment property analysis.
The Complete Calculator Suite: 9 Tools for Every Scenario
Every MortgageMate plan includes the full suite of 9 calculators. Here is what each one does and who benefits most from it.
1. Affordability Calculator
Helps prospective buyers answer the most fundamental question: how much house can I afford? It factors in income, debts, and down payment to provide a realistic purchase price range. This is the calculator most first-time buyers will reach for.
2. Mortgage Payment Calculator
Calculates monthly principal and interest payments along with taxes and insurance. Gives borrowers a complete picture of their monthly housing costs, not just the loan payment.
3. Closing Costs Calculator
Provides state-specific closing cost estimates so buyers know what to budget beyond the down payment. This is especially valuable for first-time buyers who may not realize how much cash they need at the closing table.
4. Rent vs. Buy Calculator
Compares the financial impact of renting versus buying over time. Factors in appreciation, tax benefits, and opportunity cost to show when buying makes financial sense. A powerful tool for converting renters who are on the fence.
5. DSCR Calculator
Calculates the debt service coverage ratio for investment properties. Real estate investors use this to determine whether a property's rental income will sufficiently cover the mortgage payment, which is a key qualification metric for DSCR loans.
6. HELOC Calculator
Estimates home equity line of credit amounts based on current home value, existing mortgage balance, and lender requirements. Useful for homeowners exploring ways to tap into their equity for renovations, debt consolidation, or other needs.
7. Net Proceeds Calculator
Shows sellers how much they will actually walk away with after agent commissions, closing costs, and outstanding mortgage payoff. A great addition for loan officers who also work with listing agents or referral partners.
8. Refinance Calculator
Compares current loan terms against a potential new loan to show monthly savings, break-even point, and total interest saved over the life of the loan. Essential for rate-and-term refinance discussions with existing borrowers.
9. Buydown Calculator
Illustrates 2-1 and 3-2-1 buydown scenarios, showing how temporary rate reductions affect monthly payments in the early years of the loan. Particularly relevant in higher-rate environments where builder or seller buydowns are common negotiation tools.
How to Embed MortgageMate Calculators on Your Website
Embedding a MortgageMate calculator requires just two elements: a single script tag and a div with data attributes. There are no iframes, no npm packages, and no build steps. It works on any website builder, including WordPress, Squarespace, Wix, Webflow, and fully custom sites. Full details are in the embed codes documentation.
Basic Embed Code
To add a single calculator, paste this code wherever you want it to appear:
<script src="https://mortgagemate.app/embed.js" async></script>
<div data-mortgagemate="affordability" data-key="YOUR_EMBED_KEY"></div>
The data-mortgagemate attribute specifies which calculator to render. Use one of the following values: affordability, mortgage-payment, closing-costs, rent-vs-buy, dscr, heloc, net-proceeds, refinance, or buydown. The data-key attribute is your unique embed key, which you can find in your MortgageMate dashboard.
Multiple Calculators on One Page
You only need to include the script tag once, regardless of how many calculators you place on a page. Simply add additional divs with different data-mortgagemate values:
<script src="https://mortgagemate.app/embed.js" async></script>
<div data-mortgagemate="affordability" data-key="YOUR_EMBED_KEY"></div>
<div data-mortgagemate="mortgage-payment" data-key="YOUR_EMBED_KEY"></div>
Controlling Size and Layout
MortgageMate calculators are fully responsive and will fill their parent container. To control the width, wrap the calculator div in a container with your desired max-width:
<div style="max-width: 600px; margin: 0 auto;">
<div data-mortgagemate="affordability" data-key="YOUR_EMBED_KEY"></div>
</div>
This approach works with any CSS framework or page builder grid system. The calculator adapts to whatever space you give it.
Domain Setup and Protection
MortgageMate uses domain authorization to protect your embed key. Calculators will only render on domains you have explicitly approved in your dashboard. This prevents unauthorized use of your subscription. For full setup instructions, see the domain management documentation.
Each subdomain counts as a separate domain and must be registered individually. For example, www.yoursite.com and tools.yoursite.com are two different domains from the platform's perspective.
Domain limits vary by plan tier. Starter plans include 1 domain, Growth includes 5, Pro includes 10, Business includes 25, and Agency includes 50 domains. Starter plan subscribers can add up to 3 extra domains at $40 per month each if they need more flexibility before upgrading.
Customizing Your Calculators to Match Your Brand
All visual customization is handled through the MortgageMate dashboard. You do not need to write any CSS or modify your embed code to change how calculators look. When you make changes in the dashboard, they apply instantly to every calculator on every page where your embed code is placed. Learn more in the customization documentation.
Theme Gallery
The Theme Gallery includes 5 preset themes: Modern, Minimal, Bold, Elegant, and one additional option. Each theme is professionally designed and ready to use out of the box. You can preview any theme before applying it to your calculators.
Brand Builder
For more control, the Brand Builder lets you create fully custom themes. You can configure colors, typography, border radius, shadows, chart colors, and highlight styling. If you manage calculators across multiple domains, each domain can have a different theme assigned to it.
White Label Option
The white label add-on removes the "Powered by MortgageMate" badge from all your calculators. Pricing scales by plan: Starter +$10/mo, Growth +$25/mo, Pro +$50/mo, Business +$75/mo, and Agency +$100/mo. Annual billing saves approximately one month per year. Once enabled from your dashboard subscription settings, the change applies immediately to all embeds.
REST API for Advanced Integration
MortgageMate's v2 calculator engine uses a schema-driven architecture. Calculators are defined declaratively through three layers: Schema (structure), Configuration (customization), and Theme (visual presentation). This means engine improvements roll out to all calculators automatically, without any action on your part. Learn more about the calculator engine.
For developers who need calculations outside of the embedded UI, the same engine is available through a REST API. The endpoint follows a straightforward pattern. See the full API documentation for all available calculator types and parameters.
POST /api/v2/calculate/affordability
{
"inputs": {
"annualIncome": 150000,
"monthlyDebts": 800,
"downPayment": 60000
}
}
The API accepts JSON input and returns JSON output. It is rate-limited per subscription tier. Because the UI and the API share the same calculation engine, the results are identical regardless of which method you use.
Common use cases for the API include building custom calculator UIs, running calculations as part of backend workflows, and integrating mortgage estimates into CRM systems or lead nurturing sequences.
Accessibility, Compliance, and Technical Standards
MortgageMate calculators are built to meet WCAG 2.2 AA compliance standards. This means they are screen reader ready, fully navigable by keyboard, and ADA compliant. For lending websites that serve a broad audience, accessibility is not optional. It protects you from compliance risk and ensures every visitor can use your tools.
On the technical side, MortgageMate maintains 99.9% uptime and delivers calculator assets through a global CDN for fast load times regardless of visitor location. All calculators are fully responsive and mobile optimized, adapting seamlessly to phones, tablets, and desktop screens.
Pricing and Getting Started
MortgageMate offers five plan tiers to match your needs. The Starter plan begins at $45 per month and includes 1 domain. Growth supports 5 domains, Pro supports 10, Business supports 25, and Agency supports 50 domains. Every plan includes the full suite of 9 calculators, the Theme Gallery, and the Brand Builder. Visit the pricing page for current rates on each tier.
White label is available as an add-on at every tier: Starter +$10/mo, Growth +$25/mo, Pro +$50/mo, Business +$75/mo, and Agency +$100/mo. Annual billing saves roughly one month per year across all plans.
Getting started takes less than 5 minutes. Create your account, register your domain, grab your embed key, and paste the code on your site. The getting started guide walks you through each step.