How to install Calculators on your Website
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 a multi-tool to a single tool 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
Multi-Tool (Default Script)
simple-mtg purchase closing-cost land-transfer
Single Tool Script Examples
Only show the Mortgage Calculator
Only show the Purchase Calculator
Only show the Closing Cost Calculator
Only show the Property/Land Transfer Calculator
Custom Background Colour
You can customize the background colour by adding your HEX code of the background colour in the web code script.
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
If you use the multi-tool script, you can certainly 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 initial tool dynamically in the web code 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
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.
The initial location data field accepts Google Place IDs. Here are a few that may be useful for you
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