Use this guide to add Connective’s HTML calculators to your website. These tools help clients complete quick queries such as borrowing capacity, fees, and extra repayments.
Calculator types you can add
You can embed any of the following calculators on your website:
Property Fees Calculator
How Much Can I Borrow Calculator
Extra Repayments Calculator
You can place them on a single page or across multiple pages.
Click here to view a Sample Website containing HTML Calculators.
Adding the calculators to your website
Step 1: Copy the embed code
Add the following code snippet to your webpage where you want the calculators to appear.
<script src="https://mercury.connective.com.au/calculators/js/CodeEmbeder.js" type="text/javascript"></script>
<div id="connective-borrowing-capacity-calculator"></div>
<div id="connective-repayments-calculator"></div>
<div id="connective-property-fees-calculator"></div>
You may choose to display calculators on separate pages. In that case, include the script line plus the individual calculator <div> you want to display.
Tip: Keep your calculator containers near the main content area to avoid layout issues. Additionally, ensure you use a single embed code for the calculators and avoid using multiple lines of code to prevent functionality issues.
Step 2: Choose your colour settings (Note: Branding and colour customisation can only be applied after your website is live.)
Visit the colour selection tool: Calculators demo page
Use this page to generate the colour code that styles your calculators. On the demo page:
preview the calculator styling
select colour options for each section
click 'Get Color Codes'
copy the generated code
Step 3: Request HTML calculator activation
Before calculators will work, the Mercury Helpdesk support must whitelist each webpage where calculators will appear. This includes test or staging environments. Activation is required even in development or staging environments, and errors will not resolve automatically when the site goes live.
Until the Mercury Helpdesk activates your calculator page, you will see the following message: “The calculators have not been configured correctly. Please contact the Connective Mercury Helpdesk.” This error message will persist regardless of whether the site is in development or live mode until activation is completed.
Contact the Mercury Helpdesk support via [email protected] and ask them to activate your HTML calculators page. Provide:
the URL of the page where the calculators are installed,
the colour code from the demo page,
confirmation if the page is a test or live page.
Troubleshooting Calculator Issues
If you encounter errors with calculators during the development phase, follow these steps:
Verify Embed Code: Ensure you are using the correct single embed code for the calculators. Avoid using multiple lines of code.
Request Activation: Provide the exact URL of the page where the calculators are embedded and request activation (whitelisting) from the Connective team.
Check Activation Status: Errors will not resolve automatically when the site goes live. Activation is required for the calculators to function, whether the site is in development or live.
Need help?
If you need help activating the calculators to your website, contact your
Partnership Manager or email [email protected].