Skip to content
Percentage Guru

Embed this calculator

Free to use on any site — a teaching blog, a school intranet, an accountancy page. One iframe, no script tag, no tracking pixel, and nothing to sign up for. The only condition is that you keep the credit line.

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/reverse-percentage-calculator">Percentage Guru</a>
  </p>
</div>

Live preview

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

Powered by Percentage Guru

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 credit inside a cross-origin iframe belongs to our page, not yours, so your readers would never see it as part of your page. Keeping it in your HTML keeps the credit visible with the calculator — and it is all we ask in return.

You are welcome to restyle that line to match your site, move it above the calculator, or word it differently. Keep it a visible link to percentageguru.com; if your site's policy calls for rel="nofollow" on outbound links, add it — that is fine with us.

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 it never sends or saves what visitors type.
  • 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.

Parameters

The widget reads its opening state from the query string, so an embed can start on the calculation your page is about. Every parameter is optional.

ParameterValuesWhat it does
va numberFills the value field.
pa numberFills the percentage field.
modedecrease · increase ·percentof · ofWhich calculation opens. Defaults to decrease.
curgbp · eur ·usd · noneCurrency symbol on the value field and the answer.
dp0–6Decimal places in the answer. Defaults to 2.

Three ready-made starting points:

<!-- UK VAT: remove 20% from a gross price -->
https://percentageguru.com/embed/widget?mode=increase&p=20&cur=gbp

<!-- US sales tax: back out 8.25% -->
https://percentageguru.com/embed/widget?mode=increase&p=8.25&cur=usd

<!-- GCSE practice: no currency, plain numbers -->
https://percentageguru.com/embed/widget?mode=decrease&v=80&p=20&cur=none

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. The first line matters: a message listener receives events from every frame on your page, so check the origin before trusting the payload.

addEventListener('message', (e) => {
  if (e.origin !== 'https://percentageguru.com') return;
  if (e.data?.type === 'pg-embed-height') {
    document.querySelector('.percentage-guru-embed iframe').height = e.data.height;
  }
});