Put a working calculator on your page
The terms, in full
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.
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.