Mortgage Calculator Widget Parameters

Our Mortgage Calculator Widget can be customized using parameters below.
New Users:  Before you can start using Mortgage Calculator API on your site, you must Register to Get Your API Key. Registration and usage of Mortgage Calculator Widget API is free of charge.
If you already have an account, please Log In Here.
To use our Mortgage Calculator API you must have an API key. The API key is a unique identifier that is used to authenticate requests associated with your website and route mortgage leads to you securely.

Mortgage Calculator Widget Cut & Paste Code

You can cut and paste the code below into any page that you like and the Mortgage Calculator Widget will work automatically.
New Users: The code below will work as soon as you Get Your API Key.
Please note thatYOUR-API-KEYparameter must be replaced with a valid API Key.
<div id="mc-calc"></div>                <!-- CALCULATOR CONTAINER -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let element = document.getElementById('mc-calc');
        let calculator = new mortgagecalculator.ca.Calc(element, {
            type: mortgagecalculator.ca.Type.WIDGET,
            province: 'ON',             /*  MANDATIORY                                      */
            price: '$500,000',          /*  OPTIONAL, BUT RECOMMENDED FOR A LISTING PAGE    */
            style: {                    /*  OPTIONAL, STYLING OPTIONS                       */
                backgroundColor: '',    /*  OPTIONAL, BACKGROUND COLOR                      */
                borderColor: '',        /*  OPTIONAL, BORDER COLOR                          */
                textColor: '',          /*  OPTIONAL, TEXT COLOR                            */
                priceColor: '',         /*  OPTIONAL, PRICE COLOR                           */
                fontFamily: '',         /*  OPTIONAL, FONT                                  */
                fontSize: ''            /*  OPTIONAL, FONT SIZE                             */
            }
        });
    });
</script>
<script src="https://widget.mortgagecalculator.ca/js?key={YOUR-API-KEY}"></script>
<div>Provided by <a href="https://mortgagecalculator.ca">MortgageCalculator.ca</a></div>

Customize Mortgage Calculator

If you need to change font or colors, you can either replace the values within the code manually, or you can use our Custom Mortgage Calculator page that will assist you with this process.
Please note: Our Mortgage Calculator Widget is using JavaScript. JavaScript is a CASE-SENSITIVE language. If you are modifying the code manually, ensure correct JavaScript syntax, otherwise the widget will not work.
For example: pricePrice, and PRICE are NOT the same.
For your reference, the following parameters can be changed:
province
province parameter is REQUIRED. In order for Mortgage Calculator Widget to be able to provide your clients with accourate mortgage rates, province parameter must be set.
Valid two digit province codes are:
  • AB - Alberta
  • BC - British Columbia
  • NB - New Brunswick
  • NL - Newfoundland and Labrador
  • NS - Nova Scotia
  • ON - Ontario
  • PE - Prince Edward Island
  • SK - Saskatchewan
price
price parameter is OPTIONAL. If price is ommitted, the price will default to $500,000.
If you are using Mortgage Calculator Widget on a listing page, it makes sense that the price parameter is substituted to the sale price by your back-end software or CMS.
You can enter price parameter using any valid numer format. You can use or omit $ (dollar) sign or commas.
backgroundColor
backgroundColor parameter is OPTIONAL. Sets Widget's background color.
Use any valid Hex color code using #000000-#FFFFFF notation, case-insensitive.
borderColor
borderColor parameter is OPTIONAL. Sets Widget's border color.
Use any valid Hex color code using #000000-#FFFFFF notation, case-insensitive.
textColor
textColor parameter is OPTIONAL. Sets Widget's text color.
Use any valid Hex color code using #000000-#FFFFFF notation, case-insensitive.
priceColor
priceColor parameter is OPTIONAL. Sets Widget's price color.
Use any valid Hex color code using #000000-#FFFFFF notation, case-insensitive.
fontFamily
fontFamily parameter is OPTIONAL. Sets Widget's text/font typeface.
Use any web safe font. If you are using a non-standard font, make sure to reference it in the <HEAD> section of your page.
fontSize
fontSize parameter is OPTIONAL. Sets Widget's text/font size.
Use any valid font size CSS unit (px, em, rem, pt, etc.)