Embedding via an iFrame

Learn how to embed a calculator via an iFrame

WARNING: Embedding via an iFrame directly is no longer best practice. Instead, we've created an embed method that uses iFrames under the hood. Please check out this guide.

In some rare instances, a calculator doesn't look right when embedded on your website. In almost all cases, these issues are caused by third-party libraries (e.g., WordPress plugins) or issues related to your website's design (CSS or HTML issues).

The proper way of solving these issues is by addressing them directly: fix the issues on the website. If you are unable to solve these issues or if you are ok with some limitations, you can embed a calculator via an iFrame.

How to embed a calculator via an iFrame

iFrame embed
Add the following script in the place on your website where you want to display the calculator:
HTML
<iframe style="border:none" width="100%" height="600px" srcdoc='
  <html>
    <head>
      <script src="https://app.convertcalculator.co/embed.js" defer type="text/"></script>
    </head>
    <body>
      <div class="calculator" data-calc-id="CALCULATOR_ID"></div>
    </body>
  </html>'
></iframe>

NB. Replace CALCULATOR_ID with your unique Calculator ID. You can find your Calculator ID via the Install instructions in the editor.

Making the calculator look good

When embedding via an iFrame, our code cannot adapt the calculator styles to those of the website. This means that the font family, size, and weights are not applied. This can be fixed by adding some general styles to the calculator. In order to do this, click on the ⚙️ icon in the editor and select the styles tab. There you can set the header and body font family, font weights, and font sizes in order to match the calculator style with your website.

Related articles

Learn more about embedding via i frame in one of the following articles