Standalone Calculators

These calculators don't require IDX Broker. Go to Apps > Real Estate Calculator Suite, select the tab for the calculator you want, and click Copy code. Then paste the script tag anywhere in the body of your page — the calculator renders right where the script is placed.

FHA Mortgage Calculator

Full FHA loan calculator with UFMIP, monthly MIP, extra payment savings, payoff progression chart, and a scrollable amortization schedule.

Conventional Mortgage Calculator

Conventional loan calculator with PMI, HOA, extra payments, interactive slider, payoff progression chart, and a scrollable amortization schedule.

Buy First / Sell First Calculator

Helps homeowners decide whether to buy before selling. Shows a side-by-side financial comparison of both scenarios.

Downsizer Tool

Shows clients how much equity they can free up by selling their current home and moving to a smaller one.

Zero Down Mortgage Calculator

Shows buyers their real monthly payment, estimated closing costs, and exactly how much cash they need to bring to closing.

IDX Mortgage Calculator

This calculator is designed for IDX Detail pages. It reads the listing price automatically so buyers see their estimated payment without entering the price manually.

Step 1 — Copy your script

Go to Apps > Real Estate Calculator Suite, select the Real Estate Calculator Suite tab, choose a theme and click Copy code.

Step 2 — Add it to IDX Sub-Headers

In IDX Broker, go to Design > Website > Sub-Headers > Categories.

Select the Details category, click Turn WYSIWYG Off, paste the script and save.

The mortgage calculator will now appear on your IDX Detail pages.

How to change the position of the IDX Mortgage Calculator

By default the calculator appears at the top of the sub-header area. To move it after a specific section on the detail page, use JavaScript.

Right-click the element you want the calculator to appear after and select Inspect to find its id.

Add this script to your IDX Detail Sub-Headers (replace IDX-detailsContainer-a000--5 with the id you found):

<script>
window.onload = function() {
    let mortgageCalculator = document.getElementById('IDX-mortgageCalculator');
    let idxContainer = document.getElementById('IDX-detailsContainer-a000--5');
    idxContainer.insertAdjacentElement('afterend', mortgageCalculator);
    mortgageCalculator.style.display = 'block';
}
</script>

To prevent a flash while the page loads, add this CSS in IDX Broker under Design > Website > Custom CSS > Categories > Details:

#IDX-mortgageCalculator {
    display: none;
}

The calculator will now appear in the correct position.

Customizing colors with Global Styles

All six calculators share a single set of style settings. Go to Apps > Real Estate Calculator Suite and expand the Global Styles panel at the top of the page. You can customize:

• Button background color — primary accent used for buttons, highlights, and chart lines
• Button text color
• Widget background
• Body text color
• Border color
• Border radius — rounded corners for cards and inputs
• Font family

Sync with IDX Styles

Enable Sync colors with IDX Styles to automatically match your IDX Broker brand settings — the calculators will always match the rest of your IDX pages without any manual configuration.