Publishing Calculators to your front-end JavaScript framework

With our single line of JavaScript, you can easily embed calculators on any page of your website. For sites using JavaScript frameworks, dynamic script loading may be required. Here’s how you can achieve this:

Dynamic Script Loading

To load a script file dynamically, follow these basic steps to create a virtual script tag and manually append it to the DOM:

const script = document.createElement('script');
script.src = "<https://embed.signalintent.com/js/embedded.js?org-guid=abcdefg-bcc9>";
script.async = true;
document.body.appendChild(script);

Note: This is demo code. Do not directly copy and paste because the 'org-guid' value will be placeholder text.

Once the script is in place, you’ll need to add thetag wherever on the page you’d like the calculator to appear. If you’re implementing a widget, it will automatically appear based on the targeting settings, requiring no additional div tags.

Advanced Implementation Techniques

If standard methods don’t render your calculators effectively, especially in single-page applications like React or Angular, try the following advanced technique:

After embedding the script, it adds a Chimney function to the window object, which allows you to specify where calculators should be rendered:

window.Chimney.calculators.createCalc(DOMelementID, guid)

To use this function:

1. Add the script to your page as shown above.
2. Call window.Chimney.calculators.createCalc, passing in the DOM element ID where the calculator should appear and the guid for the calculator.

Here’s an example of how to implement it:

window.Chimney.calculators.createCalc = function (targetId, guid) {
const targetElement = document.getElementById(targetId);
if (targetElement) {
const newCalc = document.createElement('div');
newCalc.id = 'sgi';
newCalc.class = 'chimney_calc';
newCalc.setAttribute('data-guid', guid);
targetElement.appendChild(newCalc);
}
}