How it works

Add a placeholder element with data-ib-calc="calc-slug" and load embed.js once per page. The script finds every placeholder and renders the calculator in a sandboxed iframe that auto-resizes to fit content.

Copy this

<div data-ib-calc="paye"></div>
<script src="https://invoicebook.co.za/embed.js" async></script>

Replace paye with the slug of any calculator. You can place multiple calculators on a single page — only one <script> tag is needed.

Available calculators

Live demo

Here's the VAT calculator running through the embed code above:

What's included

What we ask in return

The embed shows a small "Powered by invoicebook.co.za" link below the calculator. That's the only string attached. No analytics on your end, no scripts beyond the iframe loader, no email signup.

Styling

Wrap the placeholder div in your own container if you want to constrain the width:

<div style="max-width: 540px; margin: 2rem auto;">
    <div data-ib-calc="paye"></div>
</div>
<script src="https://invoicebook.co.za/embed.js" async></script>

The iframe takes the full width of its parent and reports its height to the host page automatically.

Caveats