Embed this calculator

The snippet

Paste this wherever you want the calculator to appear.

<div class="percentage-guru-embed">
  <iframe
    src="https://percentageguru.com/embed/widget"
    title="Reverse Percentage Calculator"
    width="100%"
    height="420"
    style="border:1px solid #e7e5e4;border-radius:12px"
    loading="lazy"
  ></iframe>
  <p style="font-size:12px;margin-top:6px">
    Powered by <a href="https://percentageguru.com/">Percentage Guru</a>
  </p>
</div>

Live preview

This is the widget itself, embedded exactly as the snippet above would embed it.

Why the credit line sits outside the frame

You will notice the "Powered by" line is in the snippet itself rather than inside the calculator. That is deliberate. A link inside a cross-origin iframe belongs to our page, not yours, so search engines never see it as a link between your site and ours. Putting it in your HTML is the only version that means anything — and it is the entire payment we ask for.

You are welcome to restyle that line to match your site, move it above the calculator, or word it differently. Keep it a real, followable link to percentageguru.com and we are square.

Terms, briefly

• Free, commercial use included. No licence fee and no limit on traffic.
• Nothing is tracked through the widget. It sets no cookies, and calculations never leave the visitor's browser.
• Keep the attribution link. Removing it is the one thing that withdraws permission.
• It may change. We fix bugs and improve the tool; the URL and the embed contract stay stable.

Sizing

420px is enough at most widths. If you want it to fit exactly, the widget posts its height to the parent window, so you can listen for it:

addEventListener('message', (e) => {
  if (e.data?.type === 'pg-embed-height') {
    document.querySelector('.percentage-guru-embed iframe').height = e.data.height;
  }
});