Embed the calculator on your site

The Bulk Material Calculator is free to embed on your own website, blog or intranet: a contractor site, a landscaping supplier, a DIY guide, a real-estate or property-management page. Copy the snippet below into your HTML and the full calculator loads in an <iframe>. No account, no key, no script tag.

1. Copy the code

2. Live preview

This is exactly what your visitors will see. It resizes itself to fit its content.

Options

All options are query parameters on the src URL.

Parameter Values What it does
material gravel, concrete, mulch, sand, topsoil … any calculator slug also works (e.g. gravel-calculator) Locks the widget to one material and hides the picker. Omit it to let visitors pick.
theme light, dark Forces the colour scheme. Omit it to follow the visitor's saved preference.

Example: https://bulkmaterialcalculator.com/embed?material=concrete&theme=dark embeds a dark concrete calculator.

Auto-resize (optional)

The frame posts its height to the parent window whenever its content changes. Drop this next to your iframe to make it grow and shrink with no inner scrollbar:

<script>
  window.addEventListener('message', function (e) {
    if (e.origin !== 'https://bulkmaterialcalculator.com') return;
    if (e.data && e.data.type === 'bmc-embed-height') {
      document.getElementById('bmc-frame').style.height = e.data.height + 'px';
    }
  });
</script>

(Give the iframe id="bmc-frame" for the snippet above.)

Terms of use

Questions, or want a size or feature the embed doesn't cover? Get in touch.