Embedding multiple calculators on one page

Learn how to embed multiple calculators on a page more efficiently

In some situations, you need more then one calculator embedded on a page. We don't advise adding the default embed script, for performance reasons.

Step 1. Add preload and embed script

Add the preload link and embed script inside the </head of your page

<link rel="preload" href="https://app.convertcalculator.co/embed.js" as="script" />
<script type="text/javascript" src="https://app.convertcalculator.co/embed.js" defer="true" />

Step 2. Add the calculator containers

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

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

NB. You can find your CALCULATOR_ID in the embed instructions screen.