Our Embed SDK lets you interact with calculators embedded on your web pages. It provides methods to listen for changes, access elements, and update values, giving you full control over your embedded calculators.
If you embedded your calculator before August 26, 2024, you may need to update the embed code on your website. The new embed code now includes the Embed SDK automatically. Previously, only the iframe code was provided.
To use the Embed SDK, toggle the “Enable JS API” option in your calculator settings.
This method returns an object containing the current response data, which may include formatted results or additional information based on the calculator’s configuration.
To enable debug mode in ActiveCalculator, add ?activeCalculatorDebug=true to your app’s URL.
For example, if you’ve embedded your ActiveCalculator instance in your app hosted at https://example.com, you can activate debug mode by changing the URL to:
Copy
https://example.com?activeCalculatorDebug=true
After adding this parameter, refresh the page and open your browser’s developer console (usually by pressing F12 or right-clicking and selecting “Inspect” then navigating to the “Console” tab).
In this example, we’re showing how to make life easier for users by automatically filling in the interest rate when they pick a mortgage term. We’ve got default rates ready to go, but you can totally swap these out with fresh rates from your backend whenever you need to keep things up-to-date.
Mortgage calculator with custom backend rates
First, let’s set up our default interest rates based on mortgage terms:
global-config.js
Copy
// You can fetch the latest rates from your backend here// Store default weekly interest rates based on mortgage termswindow.mortgageDefaults = { 5: 2.75, // 5 years 10: 3.25, // 10 years 15: 3.75, // 15 years 30: 4.25, // 30 years};
Now, let’s implement the ActiveCalculator integration:
mortgage-calculator.js
Copy
// Wait for the ActiveCalculator to be readywindow.addEventListener("activeCalculatorReady", function () { // Get the calculator instance const calculatorInstance = activeCalculator.getInstance( "MORTGAGE_CALCULATOR_ID" ); // Get specific element instances const mortgageTermSelect = calculatorInstance.getElementInstance( "MORTGAGE_TERM_SELECT_REF" ); // Listen for value changes on the mortgage term select mortgageTermSelect.on("valueChange", function (data) { console.log("Mortgage term changed:", data.value); // Update the interest rate based on the selected mortgage term const defaultRate = window.mortgageDefaults[data.value.value] || 3.5; // Default to 3.5 if not found calculatorInstance.setAnswer("INTEREST_RATE_FIELD_REF", defaultRate); });});
This example demonstrates a more realistic scenario for a mortgage calculator:
We define global default interest rates based on mortgage terms in global-config.js.
In mortgage-calculator.js, we set up the ActiveCalculator integration:
We get instance of the mortgage term select field.
We listen for changes on the mortgage term select and update the interest rate accordingly.