Skip to content

How to embed calculators on your website

Step 1: Generate your Embed Code

Your first step is to generate your unique domain-specific embed code. If you have already created your code, you can skip this step. Otherwise complete the wizard here to generate your first embed code. 

Once you have your embed code, you may install it on your website.

Step 2: Add it to your Website

Customizations

Table of Contents

Convert to a single tool page

There are two options for displaying the calculators on your website. 

By default you get the web code snippet with the assumption that you want a  single page on your website that show off all calculators.

If you ever want to create dedicated pages on your website where you showcase one tool at a time, you can easily do so with the same web code script but some slight modifications.

For instance, you may want to add your own drop-down menu or drive traffic to a landing page with a grid menu.

Converting your web code from the Calculator Hub to a single tool installation is super easy.  

Locate “tools” in the web code you’ve received and change the tools=all to specify a key for a single tool

Calculator Hub (Default)

				
					<div class="bendigi-calculators" 
    apikey="YOUR_APIKEY" 
    terms="https://canadianmortgageapp.com/terms" 
    navpositiontop="0px" 
    tools="all">
</div> 
<script src="https://tools.bendigi.com/assets/calculators.js"></script>
				
			

Available Keys

				
					simple-mtg
purchase
closing-cost
land-transfer
stress-test
minimum-income
gds-tds
compare
				
			

Single Tool Script Examples

Log in to your admin dashboard to copy your single-tool embed codes, complete with YOUR_API_KEY

Only show the Mortgage Calculator

				
					<div class="bendigi-calculators" 
    apikey="YOUR_API_KEY" 
    terms="https://canadianmortgageapp.com/terms" 
    navpositiontop="0px" 
    tools="simple-mtg">
</div> 
<script src="https://tools.bendigi.com/assets/calculators.js"></script>
				
			

Only show the Purchase Calculator

				
					<div class="bendigi-calculators" 
    apikey="YOUR_API_KEY" 
    terms="https://canadianmortgageapp.com/terms" 
    navpositiontop="0px" 
    tools="purchase">
</div> 
<script src="https://tools.bendigi.com/assets/calculators.js"></script>
				
			

Only show the Closing Cost Calculator

				
					<div class="bendigi-calculators" 
    apikey="YOUR_API_KEY" 
    terms="https://canadianmortgageapp.com/terms" 
    navpositiontop="0px" 
    tools="closing-cost">
</div> 
<script src="https://tools.bendigi.com/assets/calculators.js"></script>
				
			

Only show the Property/Land Transfer Calculator

				
					<div class="bendigi-calculators" 
    apikey="YOUR_API_KEY" 
    terms="https://canadianmortgageapp.com/terms" 
    navpositiontop="0px" 
    tools="land-transfer">
</div> 
<script src="https://tools.bendigi.com/assets/calculators.js"></script>
				
			

Custom Background Colour

You can customize the background colour by adding your HEX code of the background colour in the web code script.

				
					<div class="bendigi-calculators" 
    apikey="YOUR_API_KEY" 
    terms="https://canadianmortgageapp.com/terms" 
    navpositiontop="0px" 
    tools="all" 
    background="#138F45">
</div> 
<script src="https://tools.bendigi.com/assets/calculators.js"></script>

				
			

Default Language

By default, the calculators will load in English, and the user can switch the language on the tool; however, there is a way to configure it in the script to load up in french by default. You may use the data field initialLanguage to achieve this behaviour.

  • “en” to start in English
  • “fr” to start in French
				
					<div class="bendigi-calculators" 
    apikey="YOUR_API_KEY"
    terms="https://canadianmortgageapp.com/terms"
    navpositiontop="0px"
    tools="all"
    initialLanguage="fr">
</div>
<script src="https://tools.bendigi.com/assets/calculators.js"></script>

				
			

Initial tool

If you use the Calculator Hub script, you can configure the order of the tabs from your admin dashboard, but the initial tool loaded will always be the first tab. You may want the initial tool loaded to be dynamic. In this case, you can set the initialActiveTool dynamically in the web code script.

				
					<div class="bendigi-calculators" 
    apikey="YOUR_API_KEY"
    terms="https://canadianmortgageapp.com/terms"
    navpositiontop="0px"
    tools="all"
    initialActiveTool="simple-mtg">
</div>
<script src="https://tools.bendigi.com/assets/calculators.js"></script>

				
			

In the example above, the initial tool loaded will be the Mortgage Calculator, even though it is not the first tool in the tab. Options are 

  • simple-mtg
  • purchase
  • land-transfer
  • closing-cost
  • stress-test
  • minimum-income
  • gds-tds
  • compare

Hiding Tool Titles

By default, the calculators will show their respective titles, for example. “Purchase Calculator,” “Mortgage Calculator,” etc. If you wish to hide the titles, inject the hideToolTitle flag in the embed code.

				
					<div class="bendigi-calculators"
    apikey="YOUR_API_KEY"
    terms="https://canadianmortgageapp.com/terms"
    navpositiontop="0px"
    tools="all"
    hideToolTitle="true">
</div>
<script src="https://tools.bendigi.com/assets/calculators.js"></script>
				
			

Dynamic Location

Although the global default location can be set in your admin dashboard; there may be a situation where you would want the calculators to start with a dynamically set location. For instance, you have a page that loads a specific property and would like to configure the tool before load. Or you have the tool loaded for your agents, and you want to personalize it for them on the first load. In this case, you must pass the initialLocation via the web code script.

				
					<div class="bendigi-calculators" 
    apikey="YOUR_API_KEY"
    terms="https://canadianmortgageapp.com/terms"
    navpositiontop="0px"
    tools="all"
    initialLocation="ChIJvWxUSUIToFMR6eNALdnTZ-Q">
</div>
<script src="https://tools.bendigi.com/assets/calculators.js"></script>

				
			

The initial location data field accepts Google Place IDs. Here are a few that may be useful for you

City

PlaceId

BarrieChIJbSDXGjejKogRWlNLqAAPLh0
CalgaryChIJ1T-EnwNwcVMROrZStrE7bSY
EdmontonChIJI__egEUioFMRXRX2SgygH0E
HalifaxChIJwfrbBxQhWksR3C2LQ6bja2Y
KamloopsChIJMTsNPdMsflMR50VpmqqWPtI
KelowanaChIJszDH47aMfVMR98S02j3l-E4
LangleyChIJ5wZlx8zPhVQRqWwaj2q20FI
MontrealChIJDbdkHFQayUwR7-8fITgxTmU
Niagara FallsChIJuU2C7F5E04kRiKK9VmHF0kY
OttawaChIJrxNRX7IFzkwR7RXdMeFRaoo
Sherwood ParkChIJvWxUSUIToFMR6eNALdnTZ-Q
TorontoChIJpTvG15DL1IkRd8S0KlBVNTI
VancouverChIJs0-pQ_FzhlQRi_OBm-qWkbs
VictoriaChIJcWGw3Ytzj1QR7Ui7HnTz6Dg
WinnipegChIJESsa-ftz6lIRZMq5xvoaKis

You can use your own Google Place API key to retrieve other place ids, but you can also use our convenience API here to get it. Please note that the place lookup is a billable API and will be counted toward your monthly usage.

https://developers.canadianmortgageapp.com/#4816fd64-9faa-4c30-95bf-83023fb996a0

More Customizations

Please refer to our support page.

Need help? Book a call with us