Embedding your calculator on your website

ConvertCalculator can be installed on virtually any website using the universal JavaScript embed code.

Check out these article for integration on specific platforms:

Before you start

  • Make sure you have created a calculator that is ready for use. Read this article about creating a calculator for more information
  • You will need to be able to edit the HTML of the website you are installing ConvertCalculator on.
  • If you use the scripts in this article, make sure you grap the calculatorId . You can find the calculatorId in the first line of the embed script between the " in data-calc-id .

To find the embed script will completing these steps:

  1. Navigate to the ConvertCalculator App
  2. Select the calculator you want to embed by clicking on the title
  3. Click on the navigation item "Embed on your website", which has the "website layout" icon.
  4. Copy the embed script found in the pane.

Embed code

This is the JavaScript embed code which loads and displays a calculator on your website. In the embed code we distinguish two bits of code, the "Global Script" and the "Calculator container". Although you can place the entire script in one place, it's advisable to place the Global Script in the section of your website and the "Calculator container" on the place where you need it.

Calculator container

Add the calculator container on the place on your website where you want to display the calculator:

<!-- Calculator container -->
<div class="calculator" data-calc-id="CALCULATORID"></div>

Global Script

The global script can be loaded asynchronously to prevent your page from being blocked while the code for the calculator is loaded. Under normal circumstances this is the preferred way. Place the following code snippet in the section of your website:

<!-- Global script -->
<script type="text/javascript" id="convertcalculator-embedder-null" class="convertcalculator-async-script-loader">
  (function() {
    function async_load(){
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      var url = 'https://app.convertcalculator.co/embed.js';
      s.src = url + ( url.indexOf("?") >= 0 ? "&" : "?") + 'ref=' + encodeURIComponent(window.location.href);
      var embedder = document.getElementById('convertcalculator-embedder-null');
      embedder.parentNode.insertBefore(s, embedder);
    }
    if (window.attachEvent)
      window.attachEvent('onload', async_load);
    else
      window.addEventListener('load', async_load, false);
  })();
</script>

It's also possible to load the script synchronously. This is recommended when the calculator is in view directly and you want to limit the loading time of the calculator after your page is loaded. Place the following code snippet in the section of your website:

<script type="text/javascript" src="https://app.convertcalculator.co/embed.js"></script>