How to install Calculators on your Website
Platform Specific Installation Steps
Adding web calculators to your Squarespace website is super easy. Our clients have done it hundreds of times.
Here are a few steps
1. Create a new page
2. Add an “Embed” section
3. Edit the new Section by clicking the pencil icon
4. In the popup, under the Code Snippet tab. Click on “Embed data“
5. Paste your web code there and save
If your website is on WIX.
1. Log into wix.com and edit Website
2. Add a Blank Page
3. Add a Blank Section
4. Quick edit on the Section
5. Add Elements using the button on the right
6. Choose Embed Code, then Embed HTML
7. Paste your Web Code
8. You will see an “oops” message, but ignore that for now and let’s continue
9. Drag the Element box from the corners to give it ample height. About 1,000 px.
10. Click on the Stretch Icon and make it full width, drag the slider to about 150 px margins
11. For best results. Also, change the background colour of the section to white colour.
11. Publish your page from the top right Publish button
Now, open a new browser tab and go to your published calculator page. You will see the oops message again but the error message will give you the WIX domain that you need to copy. (Side note: WIX loads all embed codes in an iFrame using a hidden domain that is different than what you see in the browser’s address box. Since you haven’t authorized that domain, it will show the error)
Copy that fileusr domain in the oops message and contact us right way.
When opening up a support ticket, please make sure to tell us the published page URL as well as the WIX domain so we can turn on a few flags and authorize WIX’s hidden domain for you.
Hope this helped.
Do you know Jackson? So do we. He is one great man. We had a meeting not too long ago and he reassured us that he would take care of all his deploy clients obtaining the web calculators and help them install it on their websites.
Please reach out to him and let him know. You will need to forward him your web code email so he can add it for you.
If you have a Roar website, you are in luck because all you have to do is forward your web code email and politely ask their customer service team to install it.
Roar has been extremely fast in responding to client requests. Give it a shot.
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 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)
<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
Single Tool Script Examples
Only show the Mortgage Calculator
<div class="bendigi-calculators"
apikey="YOUR_APIKEY"
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_APIKEY"
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_APIKEY"
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="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="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="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 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.
<div class="bendigi-calculators"
apikey="API_KEY"
terms="https://canadianmortgageapp.com/terms"
navpositiontop="0px"
tools="all"
initialTool="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
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="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 |
| Barrie | ChIJbSDXGjejKogRWlNLqAAPLh0 |
| Calgary | ChIJ1T-EnwNwcVMROrZStrE7bSY |
| Edmonton | ChIJI__egEUioFMRXRX2SgygH0E |
| Halifax | ChIJwfrbBxQhWksR3C2LQ6bja2Y |
| Kamloops | ChIJMTsNPdMsflMR50VpmqqWPtI |
| Kelowana | ChIJszDH47aMfVMR98S02j3l-E4 |
| Langley | ChIJ5wZlx8zPhVQRqWwaj2q20FI |
| Montreal | ChIJDbdkHFQayUwR7-8fITgxTmU |
| Niagara Falls | ChIJuU2C7F5E04kRiKK9VmHF0kY |
| Ottawa | ChIJrxNRX7IFzkwR7RXdMeFRaoo |
| Sherwood Park | ChIJvWxUSUIToFMR6eNALdnTZ-Q |
| Toronto | ChIJpTvG15DL1IkRd8S0KlBVNTI |
| Vancouver | ChIJs0-pQ_FzhlQRi_OBm-qWkbs |
| Victoria | ChIJcWGw3Ytzj1QR7Ui7HnTz6Dg |
| Winnipeg | ChIJESsa-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 google doc here