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 = "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 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');
newCalc.id = 'sgi';
newCalc.class = 'chimney_calc';
newCalc.setAttribute('data-guid', guid);
targetElement.appendChild(newCalc);
}
}
The full publishing FAQ and instructions can be found here: http://answers.signalintent.com/publishingfaq