Free embeddable widget · CC-BY 4.0
Roofing Cost Calculator
State-aware estimate of full roof replacement cost — asphalt, metal, or premium materials.
Best for: Roofing contractors · storm/disaster recovery · insurance-claim blogs
One-tag script (recommended)
- ✓ One tag installs every HavenCostGuide calculator on your page
- ✓ Auto-resizes to fit content — no scrollbars, no fixed heights
- ✓ Optional
data-state="CA"attribute to pre-fill the user's state - ✓ Free under CC-BY 4.0 (the attribution link is auto-inserted)
Where to embed it
- •Roofing contractor service pages — by far the single best calculator for contractor sites; pairs with the Storm Damage Claim Calculator on the same page.
- •Storm/hail/hurricane recovery news desks — drop into post-event coverage so locals price out a replacement immediately.
- •Home-insurance blogs explaining claims and depreciation — readers can self-check before talking to their adjuster.
Live preview
FAQ
Is the embed free?
Yes — every HavenCostGuide widget, including the roofing cost calculator, is free under Creative Commons Attribution 4.0. Commercial use is allowed; the only requirement is to keep the "Powered by HavenCostGuide" link in the iframe footer (already rendered automatically).
Will the embed break my page's design?
No. The iframe is sandboxed with a `border-radius:12px` + `max-width:720px` wrapper and zero external CSS leakage. It's mobile-responsive (the iframe content reflows under 640px wide). You can adjust the wrapper styles freely.
Does it send my visitors' data to HavenCostGuide?
No. All math runs in your visitor's browser. We receive zero analytics from the iframe content. Only outbound clicks (e.g., 'Open the full calculator') hit our server, and only at click time.
Will the embed stay in sync with the full calculator?
Yes. We ship a fresh build every 2 weeks. Since the embed is loaded from a live URL (not a static copy), your visitors always see the most current math without you having to update anything.
Can I customize the embed's height or width?
Yes — the snippet above uses width="100%" and height="620" as a tested default. Increase the height if you find the iframe shows a scrollbar on mobile; decrease if you want it more compact. The internal layout will adapt.
How do I attribute properly?
The "Powered by HavenCostGuide" link in the iframe footer satisfies CC-BY 4.0 attribution. Don't hide it with CSS. Beyond that, a dofollow link from your post body to havencostguide.com is appreciated but not required.
Embeddable on your site — Pin our "Roofing Cost Calculator" so it's a one-tap iframe drop next time you write a blog post on the topic.
Pin this