Put a working calculator on your page

Every calculator on this site can be dropped into yours with one line of HTML. It works straight away, it costs nothing, and it stays free. All we ask is that you keep the small credit link underneath it.

The terms, in full

  • Free forever. Not a trial, not a freemium tier.
  • No signup. No account, no API key, no email address.
  • No tracking. No analytics, no cookies, no local storage, no third-party requests. Nothing to disclose in your privacy policy.
  • Keep the credit link. One line under the calculator reading “Calculator by MaterialMath”, linking to the tool. That is what we get out of this, and it is the only thing we ask.
  • Any site. Commercial, personal, a client's, behind a login. No permission needed.
  • No lock-in. Delete the line of HTML and it is gone. Nothing left behind.

What it looks like

This is the mulch calculator, embedded on this page exactly the way it would be on yours — the same snippet, unmodified.

Copy a calculator

Paste the snippet where you want the calculator to appear. Nothing else is needed — it sizes itself to the width you give it and works at the default height without any script.

Concrete

  • <iframe src="https://materialmath.app/embed/slab-calculator/" width="100%" height="640" style="border:0;max-width:640px" title="Concrete slab calculator by MaterialMath" loading="lazy"></iframe>
  • <iframe src="https://materialmath.app/embed/bags-calculator/" width="100%" height="620" style="border:0;max-width:640px" title="Concrete bag calculator by MaterialMath" loading="lazy"></iframe>
  • <iframe src="https://materialmath.app/embed/post-hole-calculator/" width="100%" height="660" style="border:0;max-width:640px" title="Post hole concrete calculator by MaterialMath" loading="lazy"></iframe>

Landscaping

  • <iframe src="https://materialmath.app/embed/mulch-calculator/" width="100%" height="600" style="border:0;max-width:640px" title="Mulch calculator by MaterialMath" loading="lazy"></iframe>
  • <iframe src="https://materialmath.app/embed/gravel-driveway-calculator/" width="100%" height="640" style="border:0;max-width:640px" title="Gravel driveway calculator by MaterialMath" loading="lazy"></iframe>
  • <iframe src="https://materialmath.app/embed/topsoil-calculator/" width="100%" height="620" style="border:0;max-width:640px" title="Topsoil calculator by MaterialMath" loading="lazy"></iframe>

Interior

  • <iframe src="https://materialmath.app/embed/paint-calculator/" width="100%" height="660" style="border:0;max-width:640px" title="Paint calculator by MaterialMath" loading="lazy"></iframe>
  • <iframe src="https://materialmath.app/embed/tile-calculator/" width="100%" height="620" style="border:0;max-width:640px" title="Tile calculator by MaterialMath" loading="lazy"></iframe>
  • <iframe src="https://materialmath.app/embed/drywall-calculator/" width="100%" height="640" style="border:0;max-width:640px" title="Drywall calculator by MaterialMath" loading="lazy"></iframe>

Conversions

  • <iframe src="https://materialmath.app/embed/square-footage-calculator/" width="100%" height="660" style="border:0;max-width:640px" title="Square footage calculator by MaterialMath" loading="lazy"></iframe>

Optional: make it resize itself

The snippet above ships with a fixed height that fits the calculator and its result. If you would rather the frame grow and shrink with the content, add this once anywhere on the page. It is genuinely optional — skip it and everything still works.

<script>
window.addEventListener('message', function (e) {
  if (e.origin !== 'https://materialmath.app') return;
  var d = e.data;
  if (!d || d.type !== 'materialmath:height') return;
  var f = document.querySelector('iframe[src*="/embed/" + d.slug + "/"]');
  if (f) f.style.height = d.height + 'px';
});
</script>

Who this is for

  • Landscaping suppliers and garden centres. A mulch, topsoil or gravel product page where people already ask “how much do I need?” — and usually have to work it out somewhere else.
  • Builders' merchants and hardware stores. Bag counts next to the bags, so the quantity question is answered on the page where the order happens.
  • Concrete, paving and fencing contractors. A slab or post-hole calculator on a services page gives a visitor a reason to stay and a number to bring to the enquiry.
  • DIY, gardening and self-build sites. Any how-to that currently says “measure your area and multiply by the depth” can show the answer instead of describing it.
  • Trade schools and college resource pages. A worked calculator alongside the method, for students who are learning to estimate.

Questions we get asked

Will it slow my page down?

It loads lazily, so it costs nothing until a visitor scrolls to it, and the whole thing is under 100KB including fonts.

Do I need to tell anyone about cookies?

No. It sets none, stores nothing, and makes no third-party requests.

Can I restyle it to match my site?

Not currently — it renders in a frame, so your CSS does not reach inside it. It is deliberately plain so it sits quietly on most pages. If it clashes badly with yours, tell us.

Will the numbers change under me?

The calculations are the same ones on this site, and every constant is sourced and documented. If a figure is corrected, your embed gets the correction automatically — which is the point of hosting it here rather than copying the maths onto your page.