Documentation
ParametersMortgage Calculator Widget can be embedded right on your website as a standalone page or as part of a listing page to help your clients calculate their monthly mortgage payments using mortgage rates, currently offered by the banks.
When your clients fill out the form inside the Mortgage Calculator Widget, you will receive an email notification with the client's name, contact information, as well as all other parameters that the client has entered.
If you are a Real Estate Agent, you can either contact the client directly to pre-qualify the client and convert them to a real estate lead. Alternatively you can forward the client's information to your affiliated Mortgage Broker and receive a Referral Fee in return.
What are the Benefits of Using a Mortgage Calculator Widget?
Below is an example of a working Morgage Calculator Widget as it will appear on your website. You don't need to know any programming or HTML to have it installed on your website, installation is a simple cut and paste.
Try It Out Below
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 have 2 options:
- If you are not familiar with HTML/JavaScript, you can simply use our Custom Mortgage Calculator Widget Builder and the code will be generated for you automatically.
- If you are confident in your HTML/JavaScript knowledge, you can edit the code manually, please refer to the list of Mortgage Calculator Widget Parameters.