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></head> of your page.

HTML
<link rel="preload" href="https://app.convertcalculator.co/embed.js" as="script" />
<script type="text/" 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:

HTML
<!-- Calculator container -->
<div class="calculator" data-calc-id="CALCULATOR_ID"></div>
NB. You can find your CALCULATOR_ID in the embed instructions screen.

Related articles

Learn more about embedding multiple calculators in one of the following articles