ConvertCalculator Icon

Embedding via an iFrame

Learn how to embed a calculator via an iFrame

WARNING: Embedding via an iFrame directly is depreciated. 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 able 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 selected 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.