Roof Cost Calculator Widget for Roofing Websites
This roof cost calculator widget is a free roof cost calculator for roofing websites: homeowners type their address, trace the roof on a satellite view, pick a material and see a range built from your rates, then leave their details to have it sent. One copy-paste, no plugin, no cost.
What your visitors see.
The same estimator flow we built for a Raleigh roofing company, made embeddable. Try it: this demo sends its leads to us, yours will go to you.
- Address autocomplete — the homeowner starts typing and picks their address from Google's suggestions; the satellite view opens right on their roof.
- Outline the roof on a satellite view — click the corners, the footprint is measured automatically. No Google account or API key needed from you.
- Or type the footprint — if a roof is hard to see from above, the homeowner enters the home's footprint instead.
- Pitch, shape, stories, tear-off — the questions that swing a roofing price, each priced in automatically.
- Your materials, your rates — untick what you don't install; set your own low/high $/sq ft for the rest.
- Contact details before the number — name, phone, email and the address land in your inbox with the full estimate.
Three steps. About five minutes.
1. Pick your materials & rates
Tick the roofing you install and enter your installed price per square foot for each. We pre-fill typical ranges so you can just adjust.
2. Paste the code
Three lines into any page — WordPress, Squarespace, Wix, Webflow, plain HTML. Address autocomplete and the satellite view are included; nothing to set up on Google's side.
3. Leads hit your inbox
Every completed estimate is emailed to you with the homeowner's name, phone, email, address, roof details and the range they saw. We don't keep their details.
Why it's free: the embed code carries a one-line credit linking back to The Digital Keystone. That link is the whole deal. It stays, and in return you get the tool, the hosting and the updates for nothing. Want it with no credit line, or built around your exact services? That's a custom job, and we're happy to quote it.
Build your estimator.
Fill this in once and your embed code is ready. Need to change your rates later? Come back and run it again with the same email — your existing code updates automatically.
Paste this where you want the calculator to appear.
Where to paste it
- WordPress: add a Custom HTML block to the page and paste the code into it.
- Squarespace: add a Code block (not Embed) and paste; make sure "Display Source" is off.
- Wix: Add → Embed Code → Embed HTML, paste, then resize the box to fit.
- Webflow: drop in an Embed element and paste.
- Any other site: paste it into the page's HTML where the calculator should show.
Keep all three lines together, including the credit line. Changing your settings later? Run this generator again with the same email address — the code you already pasted picks up the new numbers automatically.
Questions roofers ask.
Yes. There is no charge, no trial and no upsell inside the widget. The only condition is the one-line credit that links back to The Digital Keystone — that link is how we get paid, in the form of exposure. If it is removed, the calculator re-adds it.
No. Address autocomplete and the satellite view run on our key, so it works the moment you paste the code. If you already have your own Google Maps key and would prefer the map usage to count against it instead, there is an optional field for that in the generator.
No — the homeowner traces the outline themselves by clicking the corners on the satellite view, and the tool measures the shape. Automatic detection would need Google's paid Solar API on every estimate, which would make the tool impossible to offer free. Manual tracing is quick and, with the pitch question, gives a solid ballpark.
Straight to the email address you enter when you generate the code — every completed estimate, with the homeowner's name, phone, email, address, roof details and the range they were shown. We relay the email; we do not store the homeowner's details or contact them.
Any time. Come back to this page and run the generator again with the same email address. Your existing embed code keeps working and uses the new settings on the next page load — nothing to re-paste.
As accurate as your rates. The footprint is converted to roof surface using the pitch the homeowner picks, then adjusted for shape, stories and tear-off, and shown as a range between your low and high $/sq ft — clearly labeled as a preliminary estimate, not a quote.
Want automatic roof detection, or a calculator built for your exact services?
We build custom estimators — including satellite auto-measurement — into roofing websites, along with before/after sliders, storm-damage checklists and insurance-claim workflows.