Add a free concrete calculator to your website

See it on this page

This is the live widget, loaded with the exact snippet below. Change the shape, switch between imperial and metric, and the result updates as you type. The credit line underneath is the only thing we ask you to keep.

Build your snippet

Pick how the calculator should start. The code box updates as you choose, then copy it and paste it into your page. Everything here is optional except the credit line, which stays in the snippet.

The accent color is six hex digits with no hash, for example 1d4ed8. Leave it blank for the neutral default. Any value that is not six hex digits is ignored, so a typo can never break the calculator.

How to add it to your site

The snippet is plain HTML, so it works anywhere you can paste an HTML or embed block. Copy your code from the builder above first, then follow the step for your platform.

Plain HTML

Paste the snippet into your page where you want the calculator to appear, inside the body of the document. The script tag can sit next to it; it is safe to include more than once if you add several calculators.

WordPress

Edit the page or post, add a Custom HTML block, and paste the snippet into it. Update the page. If your theme strips script tags, use the iframe version below instead.

Wix

Wix does not run pasted scripts in a normal embed, so use the iframe version below. Add an Embed element, choose Embed HTML, and paste the iframe snippet. Resize the element to suit your layout.

Squarespace

Edit the section, add a Code block, set it to HTML, and paste the snippet. Save. If the script is blocked on your plan, use the iframe version below.

Shopify

In the theme editor, add a Custom Liquid section or block to the page and paste the snippet into it, then save. A page section added through an app that accepts HTML works the same way.

The no-script version

If a platform will not run the loader script, paste this fixed-height iframe instead. It needs no script and keeps the same credit line. Set the height to suit the shape you start on.

<iframe src="https://calculatingconcrete.com/embed/concrete-calculator/?shape=slab&units=imperial" title="Concrete calculator" width="100%" height="520" style="border:0" loading="lazy"></iframe>
<p>Calculator by <a href="https://calculatingconcrete.com/">CalculatingConcrete.com</a></p>

Add &accent=1d4ed8 to the iframe URL to set a color, the same six hex digits used in the builder.

Prefer a menu link?

Some sites would rather send people to the full calculator than embed one. A plain link in your navigation or resources menu does that and still helps visitors. Use this as a menu item or an in-text link:

<a href="https://calculatingconcrete.com/">Concrete Calculator</a>

Point it at the page that fits best: the homepage for the all-in-one tool, or a specific one such as the slab calculator or the footing calculator.

The terms, in plain English

• It is free to use on any site, personal or commercial. There is no charge and no signup.
• It sets no cookies, runs no analytics, and loads no third-party code on your page.
• Keep the credit line visible. The link back to CalculatingConcrete.com is the one condition.
• You may style the text around the widget to match your site, but please do not hide the credit.
• We may update the calculator over time, so fixes and improvements reach everyone automatically.