Zum Inhalt springen

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.

Browse widgets →

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

CriterionCalculator pluginiframe embed
SetupFind, install, configurePaste one line of code
SecurityExtra attack surface, regular updatesNo code on your server, nothing to patch
PerformanceLoads CSS/JS on every page viewLazy-loads, does not block your page
MaintenanceCan break on WordPress/PHP updatesUpdated centrally by the provider
CostPremium features often paidFree, permanently
Staying currentLogic goes stale without updatesRates & 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:

PlatformHow to add the iframe
WixAdd → Embed Code → "Embed HTML" (paste the iframe)
SquarespaceAdd block → "Code" → HTML mode
ShopifyIn the page editor, "Show HTML" → paste the code
WebflowAdd an "Embed" element and paste the code
Jimdo / GoDaddyAdd content → "Widget / HTML"
Static HTMLPaste 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?
No. An embedded calculator loads through an iframe, which is standard HTML that every browser and CMS understands. A plugin would only add attack surface, load time and maintenance with no advantage over the iframe. In WordPress you paste the code into a "Custom HTML" block — no plugin required.
Will an embedded calculator slow down my website?
Not if the embed loads lazily (deferred until the visitor scrolls to it). The calculator runs on the provider's server, not yours — your page only renders a small frame. A well-built embed has negligible impact on your Core Web Vitals.
Does the calculator resize its height automatically?
With a good embed, yes: a small script reports the content height to the parent page so there is no scrollbar inside the frame. The requirement is that you paste the full embed code including the script, not just the iframe tag.
Is embedding the calculator free?
With Clean Invoice, yes — permanently, with no account and no view limit. We only ask that you keep the small "Free calculator by Clean Invoice" attribution line beneath the calculator.
Does an embedded iframe work on mobile?
Yes. The calculators are responsive and adapt to the width of the frame. Place the iframe in a normal content area and it scales down on phones automatically.
Do I have to update the embed when tax credits or rates change?
No. That is the key advantage of an iframe over a plugin: the calculation logic lives with the provider and is updated centrally. Your embedded calculator keeps using the current values automatically — you change nothing.

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 →
How to Embed a Calculator on Your Website Without a Plugin (2026) | Clean Invoice