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
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)
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
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 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.
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
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.
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.