How to Embed a Calculator on Your Website Without a Plugin
Updated June 2026 · 7 min read
You want to offer a cost calculator on your site — but without installing yet another plugin. Good call. An embedded calculator needs no plugin at all: a single iframe snippet does the job in WordPress, Wix, Squarespace, Shopify and any other builder that allows HTML. Here is why that is the better choice and how to do it in minutes.
Grab a ready-made embed code
Pick a calculator, see a live preview and copy the snippet — free, no signup.
An “embed” is a small piece of HTML that loads an external page inside a frame (<iframe>) on your own page — much like an embedded YouTube video. The calculator keeps running on the provider’s server but appears seamlessly on your site.
Why an iframe beats a plugin
| Criterion | Calculator plugin | iframe embed |
|---|---|---|
| Setup | Find, install, configure | Paste one line of code |
| Security | Extra attack surface, regular updates | No code on your server, nothing to patch |
| Performance | Loads CSS/JS on every page view | Lazy-loads, does not block your page |
| Maintenance | Can break on WordPress/PHP updates | Updated centrally by the provider |
| Cost | Premium features often paid | Free, permanently |
| Staying current | Logic goes stale without updates | Rates & rules updated at the source |
That last point matters most for cost tools: when a tax credit expires or a price changes, the provider updates the calculator centrally — your embedded version keeps showing the correct numbers with no action from you. (For exactly why that matters in 2026, see our heat pump savings calculator, which reflects the expired federal credit while most tools still show it.)
Embed a calculator in WordPress — no plugin
WordPress users often assume everything needs a plugin. An embed does not. Here it is in the block editor (Gutenberg):
1. Get the code
On the embeddable calculators page, pick a calculator and click "Copy code" to grab the iframe snippet.
2. Open your page or post
Edit the page where the calculator should appear.
3. Add a "Custom HTML" block
Click the + button, search for "Custom HTML", and insert the block.
4. Paste the code
Drop the copied iframe code into the block.
5. Preview
Use "Preview" to see the calculator in your layout — the raw editor only shows the code, which is normal.
6. Publish
Save or update the page. Done — the calculator is live.
Classic editor: switch from “Visual” to the “Text” (HTML) tab and paste the code.
Page builders (Elementor, Divi, WPBakery): use the “HTML” widget/element (Elementor: HTML widget, Divi: Code module). No extra plugin needed.
Other website builders
Same principle everywhere — you just look for the HTML/code element:
| Platform | How to add the iframe |
|---|---|
| Wix | Add → Embed Code → "Embed HTML" (paste the iframe) |
| Squarespace | Add block → "Code" → HTML mode |
| Shopify | In the page editor, "Show HTML" → paste the code |
| Webflow | Add an "Embed" element and paste the code |
| Jimdo / GoDaddy | Add content → "Widget / HTML" |
| Static HTML | Paste the code directly into your source where you want it |
Common issues — and how to fix them
The height is wrong / it scrolls inside the frame
Good embeds auto-resize via a small script. Make sure you pasted the full code including the <script> part — not just the <iframe> tag.
"Mixed content" warning / the calculator will not load
Your page runs over https://, so the embedded content must too. Reputable providers serve only over HTTPS — check that the iframe src starts with https://.
Nothing shows after I paste it
Clear your page cache first (caching plugin / host cache). Often an old cached version of the page is being served.
AMP pages
Standard iframes are restricted on AMP; use amp-iframe there, or link to the calculator instead. Regular pages have no such restriction.
Privacy & what you get out of it
An iframe loads content from another domain, so the same privacy rules apply as for embedded maps or videos — what matters is whether the embedded service tracks users. A pure calculator whose inputs stay in the visitor’s browser, sets no cookies and sends no personal data is low-risk; still, name the embedded service in your privacy policy for completeness. The Clean Invoice calculators are built exactly that way: they run entirely in the browser, set no cookies and transmit no inputs.
And the payoff is real: a visitor who works out their cost on your page stays longer, comes back, and associates the value with your business — without a developer, a plugin, or ongoing fees.
Frequently asked questions
Do I really need a plugin to add a calculator to WordPress?↓
Will an embedded calculator slow down my website?↓
Does the calculator resize its height automatically?↓
Is embedding the calculator free?↓
Does an embedded iframe work on mobile?↓
Do I have to update the embed when tax credits or rates change?↓
Add a free calculator to your site in 2 minutes
Pick a widget, copy one line of code, paste it in. No plugin, no signup, no monthly fee.
Browse the free widgets →