Publishing Calculators to your front-end JavaScript framework (React, Vue, Angular, etc)

With our single line of JavaScript, you can easily publish calculators on any page of your website.

Q: How do I publish my calculators to a JavaScript Framework?

A: For loading a script file dynamically using JavaScript, the basic steps are to create a virtual script tag and manually append it to the DOM. 

  const script = document.createElement('script');

  script.src = "";
  script.async = true;


Note: this is demo code, do not directly copy and paste because the `org-guid` value will be dummy text.

For calculators, the remaining step is to add the `div` tag to the html wherever on the page it's designed to go. If you’re installing a widget, no nee to worry about the div, it will appear on its own based on the targeting settings. 

Q: I tried using the above technique but just cannot get the calculators to render, what else can I try?

A: There is a second option for how to embed a calculator on the page. Once the script is embedded to the page, it will add a Chimney function to the window object. It takes two arguments, the first arg is the ID to the <div> where you want the calculator to be rendered. The second arg is the guid for the calculator that should be rendered there.

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

So add the script to the page and then call this function will also render calculators to your React, Angular, or other type of single page application.

For a look "under the hood" at the source code to see how this is working internally, take a look at this screenshot. Sometimes that helps make these explanations easier to understand.

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

The full publishing FAQ and instructions can be found here: