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.
| Parameter | Values | What it does |
|---|---|---|
v | a number | Fills the value field. |
p | a number | Fills the percentage field. |
mode | decrease · increase ·percentof · of | Which calculation opens. Defaults to decrease. |
cur | gbp · eur ·usd · none | Currency symbol on the value field and the answer. |
dp | 0–6 | Decimal 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=noneSizing
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;
}
});