How do I embed a Clean Invoice calculator on my website?

Pick a calculator, copy the iframe code and paste it into your page. In WordPress use the "Custom HTML" block, in Wix "Embed > Embed HTML", in Shopify a "Custom Liquid" section.

Is embedding the calculators free?

Yes, all 19 English calculators are 100% free to embed. No signup, no account. We only ask that you keep the "Free calculator by Clean Invoice" attribution link.

Do the embedded calculators work on mobile?

Yes. All calculators are fully responsive and adapt to the width of their container — desktop, tablet and smartphone.

Embed Free Cost Calculators on Your Website

Q: Are the calculators updated automatically?

Yes. The calculator is loaded from Clean Invoice, so new features and updated prices appear automatically without changing your code.

Give your visitors instant cost estimates — roof, kitchen, bathroom, HVAC, solar and 14 more calculators. One copy-paste, no signup, free forever.

💰

100% free

No hidden costs

📱

Responsive

Mobile & desktop

🔄

Always up to date

Automatic updates

📐

Auto-height

Adapts to content

Choose a calculator

Choose your platform

Copy & paste the code

<iframe
  src="https://www.clean-invoice.com/embed/en-roof"
  width="100%"
  height="800"
  frameborder="0"
  style="border:none;border-radius:12px;max-width:650px"
  title="Roof Replacement Cost Calculator by Clean Invoice"
  loading="lazy"
></iframe>
<p style="font-size:12px;color:#64748b;margin:6px 0 0">Free calculator by <a href="https://www.clean-invoice.com/en/calculators/roof-calculator" target="_blank" rel="noopener" style="color:#168840;font-weight:600">Clean Invoice</a></p>
<script src="https://www.clean-invoice.com/embed.js" async></script>

💚 The code includes a small attribution line below the calculator ("Free calculator by Clean Invoice") — please keep it in place.

🌐 HTML / Custom website

Open your HTML file in an editor
Paste the code where you want it inside the <body>
Adjust max-width and height if needed
Save & upload

💡 Tip: For React / Next.js paste the iframe code straight into your JSX component. For Vue / Sveltethe HTML code works without changes too.

✓

Preview: what it looks like

↑ Live preview of the selected calculator

📦 All available calculators (19)

Frequently asked questions

Is embedding really free?

Yes, 100% free. No hidden costs, no signup, no account needed. We only ask that you keep the attribution line (“Free calculator by Clean Invoice”) in place.

Does it work on mobile?

Yes! All calculators are fully responsive and adapt automatically to the screen width – desktop, tablet or smartphone.

Are the calculators updated automatically?

Yes. Since the calculator is loaded from Clean Invoice, you get all updates (new features, corrected values, design improvements) automatically – without changing anything on your site.

The iframe does not show up in WordPress?

Some security plugins (Wordfence, iThemes Security, Sucuri) block iframes by default. Add Clean Invoiceto the allowlist. In the Gutenberg editor use the “Custom HTML” block (not “Paragraph”!).

Do I need to adjust the iframe height?

No. The included script (embed.js) adjusts the height automatically to fit the content – even when the calculator expands as visitors use it. The height value (800px for Roof Replacement Cost Calculator) is just the initial value and acts as a fallback if your platform strips scripts.

What does the attribution look like?

Below the calculator a subtle line appears: “Free calculator by Clean Invoice” with a link. The attribution is part of the free license and must not be removed.

Free calculator widgets for contractor & home improvement websites

All 19 English calculators by Clean Invoice can be embedded on your own website via iframe — for free. It works with WordPress, Wix, Squarespace, Webflow, Shopify and any site that accepts HTML.

The calculators are responsive, auto-adjust their height to the content and update automatically. No registration, no cost. We only ask that you keep the small “Free calculator by Clean Invoice” attribution line below the widget.

Why embed a cost calculator?

Longer visits: interactive tools keep visitors on your page — a strong engagement signal.
More leads: homeowners who just estimated a project cost are ready to request a quote.
Zero maintenance: prices and features update automatically on our side.