Basic

The calculator widget is a JavaScript plugin that can used on any web page or application that supports JavaScript. To embed the widget in your page copy and paste the code snippet below, replacing the two occurrances of myId with your calculator Id.

<script id="myId">
    (function(id) {
        var dc=document.createElement('script'),r=encodeURIComponent(window.location.href),
        b='https://go.intouchapp.co.uk';dc.type='text/javascript';dc.async=true;dc.setAttribute('data-cid', id);
        dc.setAttribute('data-b',b);dc.src= b+'/c.js?r='+r;
        var s=document.getElementById(id);s.parentNode.insertBefore(dc, s);
    })("myId");
</script>

Advanced

For more advanced usage, such as custom HTML and CSS a global variable can be defined called intouchCalcConfig, like so;

<script id="myId">
    var intouchCalcConfig = {
        containerElementId: "id-of-container-element-for-the-widget",
        includeCss: true,
        logTemplatesToConsole: false,
        useOwnTemplates: true;
        questionTemplateId: "my-question-template-id";
        calculatorTemplateId: "my-calculator-template-id";
    };

    (function(id) {
        var dc=document.createElement('script'),r=encodeURIComponent(window.location.href),
        b='https://go.intouchapp.co.uk';dc.type='text/javascript';dc.async=true;dc.setAttribute('data-cid', id);
        dc.setAttribute('data-b',b);dc.src= b+'/c.js?r='+r;
        var s=document.getElementById(id);s.parentNode.insertBefore(dc, s);
    })("myId");
</script>

Custom CSS Styling

Within the InTouch dashboard there are basic styling configurations for each calculator widget, however you may wish to have a more unique design.

By default, the widget will load it’s own stylesheet. But you can disable this by setting includeCss to false.

You are now free to use your own CSS rules to style the calculator in any way, without being encumbered by existing CSS rules. You may find it easiest to work from a copy of the original stylesheet.

Auto select specific calculator

Auto select a specific calculator by adding a Query String parameter called ‘selectedcalculator’ to the page that this calculator is embedded on. E.g. www.mywebsite.com/quote?selectedcalculator=Sale

KnockoutJs

Under the covers, the widget uses KnockoutJs to perform data binding to HTML elements. If window.ko is not available on the page, the widget will add it. If it is available, it will use the version available.

If you are using Knockout Templates already, you will have to supply your own templates at per ‘Custom HTML Templates’ above.

Support

Any issues or bugs please email [email protected]