Free Embeddable Solar Calculator Widget for Your Website
Add a free solar panel calculator to your website in minutes. Customise the look, capture leads directly from visitors, and let them estimate solar costs, savings, and payback — no coding required. Just copy and paste the embed code below.
Calculator Tools
Select one or both. When both are enabled, users can switch between them with tabs.
Theme & Colors
Used for buttons and active tab highlights
Layout
Auto-resizes after load via the included script
Lead Capture
Require users to enter their contact details before seeing calculator results. Leads are emailed directly to you.
Tracking
Identifies where calculations come from. Shows as "embed:your-ref" in your analytics.
Preview
LiveEmbed Code
<iframe
src="https://www.solar-estimator.io/embed"
width="100%"
height="800"
frameborder="0"
style="border: none; border-radius: 12px; max-width: 100%;"
title="Solar Calculator"
loading="lazy"
></iframe>
<p style="font-size:12px;text-align:center;margin-top:6px;color:#9ca3af;">
Calculator by <a href="https://www.solar-estimator.io" style="color:#d97706;text-decoration:none;" target="_blank" rel="noopener">Solar-Estimator.io</a>
</p>
<script>
window.addEventListener('message', function(e) {
if (e.data && e.data.type === 'solar-embed-resize') {
var iframes = document.querySelectorAll('iframe[src*="solar-estimator.io/embed"]');
iframes.forEach(function(iframe) { iframe.style.height = e.data.height + 'px'; });
}
});
</script>Paste this into your HTML. The script auto-resizes the iframe to fit the content.
URL Parameters Reference
| Parameter | Default | Description |
|---|---|---|
| tools | calculator | Comma-separated: calculator, map |
| tab | first tool | Default active tab |
| theme | light | light or dark |
| accent | #f59e0b | Accent / button color |
| bg | #ffffff | Background color |
| text | #111827 | Text color |
| radius | 12 | Border radius (px) |
| border | none | none, thin, thick |
| shadow | none | none, sm, md, lg |
| padding | normal | compact, normal, spacious |
| fontsize | base | sm, base, lg |
| ref | unknown | Tracking reference ID |
| leadgate | off | Set to 1 to require lead capture before results |
| leademail | — | Email to receive lead notifications |
Why Add a Solar Calculator to Your Website?
Solar installers, energy consultants, and green-energy blogs use embedded calculators to turn passive visitors into qualified leads. When someone runs a calculation on your site, they're already interested in going solar — capturing their details at that moment gives you the highest-intent leads possible.
Generate Leads on Autopilot
Enable the lead capture gate and receive an email with full contact details and solar estimate every time a visitor uses the calculator.
Fully Customisable
Match your brand with custom colours, light or dark themes, adjustable layout, and your own tracking reference for analytics.
No Coding Required
Copy a single code snippet into any HTML page, WordPress site, Wix, Squarespace, or website builder. The widget auto-resizes to fit.
How It Works
- Choose your tools — include the solar panel calculator, the interactive map estimator, or both.
- Customise the design — pick a theme, set your brand accent colour, and adjust layout options.
- Enable lead capture (optional) — enter your email to gate results behind a contact form. Leads are emailed to you instantly.
- Copy & paste — grab the embed code and add it to your website. The calculator auto-resizes and works on any device.
What Visitors Can Calculate
The embedded solar calculator estimates everything a homeowner needs to make a decision:
- Recommended system size and number of panels
- Installation cost range based on their country
- Annual energy generation in kWh
- Yearly electricity bill savings
- Payback period and 25-year return on investment
- CO2 emissions saved per year
- Battery storage recommendations
Frequently Asked Questions
Is the embedded solar calculator really free?
Yes, 100% free. There are no usage limits, no watermark fees, and no paid tiers. The widget is supported by the Solar Estimator platform.
Do I need coding skills to add it to my site?
No. Customise the calculator above, copy the generated code snippet, and paste it into any HTML page. It works with WordPress, Wix, Squarespace, Webflow, and any other website builder that supports custom HTML.
How does the lead capture gate work?
When enabled, visitors fill out the calculator as normal but must enter their name, email, and optional phone number before seeing results. Their contact details and full solar estimate are emailed to you instantly.
Which countries does the calculator support?
The calculator covers the US, UK, Canada, Australia, New Zealand, Ireland, Spain, Mexico, and Colombia with country-specific electricity prices, solar irradiance data, and installation costs.
Can I customise the colours to match my brand?
Yes. Choose a light or dark base theme, set a custom accent colour for buttons and highlights, or switch to fully custom mode to control the background and text colours.
Will the calculator slow down my website?
No. The calculator loads inside a lightweight iframe and uses lazy loading by default. It has zero impact on your page's main-thread performance and Core Web Vitals.
Can I include the map estimator as well?
Yes. You can enable the interactive map tool alongside the calculator. When both are active, users see tabs to switch between the solar calculator and the map-based estimator.
How do I track which leads come from the embed?
Set a Reference ID (e.g. "my-company-blog") when configuring the embed. All calculations and leads are tagged with "embed:your-ref" so you can track performance by source.