Embedding via an iFrame

Learn how to embed a calculator via an iFrame

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 webdesign related issues (CSS or HTML issues).

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

How to embed a calculator via an iFrame

Step 1. Add preload and embed script

Add the following script in the place on your website where you want to display the calculator:

<iframe style="border:none" width="100%" height="600px" srcdoc='
  <html>
    <head>
      <script src="https://app.convertcalculator.co/embed.js" defer type="text/javascript"></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.