Embedding your calculator on your website

Learn how to embed a calculator on your website

ConvertCalculator can be installed on virtually any website or platform using our universal JavaScript embed code.

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.
Note that you need to be able to edit the HTML of the website on which you are installing ConvertCalculator.
If you use the scripts in this article, make sure you grab the CALCULATORID. You can find the CALCULATORID in the first line of the embed script, e.g. data-calc-id="8nyatmt3mGGD7vNh3".

The following steps will lead you to the embed script:

Go to the editor of the calculator you want to embed on the dashboard;
Navigate to the Share tab via the top navigation;
Click on the "Embed" button in the sub top menu;
Select "other" for platform;
Follow the instructions on the screen.

Embed code

The JavaScript embed code 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 <head> section of your website and the Calculator container where you want to display your calculator on your website.

Calculator container

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

Global Script

HTML
<!-- Global script -->
<script src="https://scripts.convertcalculator.com/embed.js" async="true"></script>
</script>

Asynchronous loading

By default, the global script is 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 above code snippet in the <head> section of your website.

Synchronous loading

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 <head> section of your website:

HTML
<script type="text/" src="https://scripts.convertcalculator.com/embed.js"></script>

Framed Embed vs. In-Page embed

We distinguish two embed types, namely (1) Framed and (2) In-Page.

The default and recommended way of embedding is "framed" because embedded calculators are isolated from the pages they are embedded on. This will prevent a lot of appearance issues that can occur because of the way a website is styled. Calculators also load a lot faster with framed embed. Make sure you set a font family in your calculator's general settings because otherwise, it falls back to Times New Roman (ugly!).

Sometimes it can be useful to use "in-page" embedding. For instance, when you specifically want the calculator contents to be affected by the website (CSS inheritance) or you use custom CSS or custom JS code hosted on your website to interact with a calculator. If you are not an experienced web designer, we advise you to use framed embed instead.

<!-- Framed -->
<div class="calculator" data-calc-id="CALCULATORID"  data-type="framed"></div>

<!-- In Page -->
<div class="calculator" data-calc-id="CALCULATORID" data-type="in-page"></div>

Learn more about embedding in one of the following articles

Embedding your calculator on your website

Before you start

Embed code

Asynchronous loading

Synchronous loading

Framed Embed vs. In-Page embed

Related articles

Improve load speed

Appearance Issues

Embedding multiple calculators

Embedding via iFrame

Webflow

Weebly

Squarespace

Wordpress

Wix