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 -->
<div class="calculator" data-calc-id="CALCULATORID" />

<!-- 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>