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
Watch this 3-minute video to learn how to install your web code on a WordPress site.
- Create a new page.
- Paste the embed code in the HTML code editor
- Save and Publish the page
- Add an item to your navigation menu to point to the new page
Watch this 2-minute video to learn how to install your web code on a KV Core site.
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; only this time, 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 different from what you see in the browser’s address box. Your calculators will tell you that you haven’t authorized that domain.
Copy that long fileusr domain in the error message and add it to your alternative domains. More instructions here.
We 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.
Mary Gronkowski from DLC has recorded this fantastic easy-to-follow video.
Contact us to create a unique embed code to paste into your Profile Plus and upgrade your Centum agent page.
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 |
| 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 support page.