Free Material Calculator Widget for Your Website
Quick answer: copy the embed code below and paste it into any web page (WordPress, Wix, Squarespace, Shopify, or plain HTML). Your visitors get a free calculator for cubic yards, tons, and concrete bags. You can preselect the material your business sells. The widget is free, has no ads, and sets no tracking cookies.
Landscape supply yards, ready-mix and gravel suppliers, contractors, and DIY bloggers use calculators like this to answer the question their customers ask most: “How much do I need to order?” The widget uses the same formulas and densities as our full calculators.
Live preview
Get the embed code
How to add it to your site
- WordPress: edit the page, add a Custom HTML block, paste the code, and publish.
- Wix: Add → Embed Code → Embed HTML, paste the code, and resize the box to about 480 × 410 px.
- Squarespace: add a Code block and paste the code.
- Shopify: Online Store → Pages → Show HTML (<>), paste the code, and save.
- Plain HTML: paste it where you want the calculator to appear.
What the widget calculates
- Cubic yards and cubic feet from length × width (ft) × depth (in)
- Tons using typical densities: gravel and crushed stone 1.4, sand 1.35, topsoil 1.3, fill dirt 1.2, and mulch 0.55 tons per cubic yard
- Concrete bag counts for 80 lb and 60 lb premix bags
Please keep the small “by YardsCalculator.com” credit line under the widget. It tells your visitors where the numbers come from and keeps the widget free.
Frequently asked questions
Is the calculator widget really free?
Yes. There is no charge, no sign-up, and no ads inside the widget. We only ask that you keep the small credit line under it.
Will the widget slow down my website?
No. It is a single lightweight page with no external scripts, loaded lazily in an iframe, so it does not block your own page from loading.
Does the widget track my visitors?
No. The widget page sets no cookies and loads no analytics or advertising scripts.
Can I set the material to what I sell?
Yes. Pick a default material above and the embed code updates. Visitors can still switch materials in the dropdown.
Can I change the densities to match my products?
The public widget uses typical densities. If you need custom densities, prices, or your own branding, contact us through the contact page.
Related calculators and guides
Updated: October 17, 2026 by the YardsCalculator editorial team. Figures are planning estimates; confirm weights, truck capacity, and prices with local suppliers and haulers.