Why is my Webflow embed not showing in the Designer?

This is expected behaviour. Webflow does not render iframe content inside the Designer canvas — you will see a placeholder box instead. Switch to Preview mode (the eye icon) or publish the site to see the calculator working. The embed is not broken.

Does adding a calculator count against my Webflow plan limits?

An Embed element counts as one element toward your page element count, which is generous on all plans. The calculator itself is hosted externally on CalcIQ's CDN, so it uses none of your Webflow bandwidth or hosting resources.

Can I use a calculator embed on the Webflow free plan?

Yes. The Embed element is available on all Webflow plans including the free Starter plan. You can add and preview embeds while building, though you need a paid Site plan to publish to a custom domain.

Will the calculator be responsive in Webflow?

Yes. The embed snippet uses width 100 percent, so it fills whatever parent container you place it in. Set the parent div width in each Webflow breakpoint and the calculator follows. Increase the iframe height at mobile breakpoints since fields stack vertically.

How to Add a Calculator in Webflow (Free, 2 Minutes)

The short version

Webflow's Embed element (under Advanced in the Add panel) accepts raw HTML. Paste an iframe snippet from the embed library and you have a working calculator. One thing to know upfront: embeds do not render in the Designer canvas — you must use Preview mode or publish to see it. That trips up most people.

Step-by-step

1Copy an embed code

Open the CalcIQ embed library and click Copy on any calculator. You get a snippet like this:

<iframe src="https://calciq.app/app?calc=emi" width="100%" height="500" style="border:none;border-radius:8px;" title="EMI Calculator - CalcIQ"></iframe>
<p style="font-size:12px;text-align:center;margin:8px 0 0">Powered by <a href="https://calciq.app" target="_blank" rel="noopener" style="color:#10b981;font-weight:600;text-decoration:none">CalcIQ</a></p>

2Drag in an Embed element

In the Designer, press A to open the Add panel (or click the + icon). Scroll to Advanced and drag Embed onto your canvas.

Shortcut: place it inside a Div Block or Container first — that gives you a wrapper to control width and padding per breakpoint.

3Paste and save

The HTML Embed Code Editor opens automatically. Paste the iframe snippet and click Save & Close.

Webflow will show a validation warning if the HTML is malformed — a clean iframe snippet passes without complaint.

4Preview or publish

The canvas shows an empty placeholder box. That is normal and not a bug. Click the eye icon for Preview mode, or publish the site. The calculator renders on both.

Responsive setup across breakpoints

The iframe is already width="100%", so it inherits the width of its parent. Control the parent, not the iframe.

Wrap the Embed element in a Div Block
Set the Div's max-width on Desktop (e.g. 600px) and centre it with auto margins
On Tablet and below, set the Div to 100% width
Increase iframe height at mobile breakpoints — fields stack vertically and need more room

Breakpoint	Suggested iframe height
Desktop (≥992px)	500–550px
Tablet (768–991px)	580px
Mobile landscape (568–767px)	620px
Mobile portrait (<568px)	650–700px

To vary height per breakpoint you need two approaches: either duplicate the Embed element and show/hide per breakpoint, or set a single height that works everywhere (650px is a safe universal value).

Where these work well on Webflow sites

Real estate templates — Drop the EMI or Rent vs Buy calculator onto property detail pages. Visitors check affordability without leaving the listing.
Financial advisor sites — Add SIP or FD calculators above your booking form. Prospects self-qualify before they contact you.
CMS blog templates — Add an Embed element inside your blog post Rich Text or as a fixed section below it, so every article gets a relevant calculator.
Landing pages — An interactive calculator holds attention longer than static copy, which matters for conversion-focused pages.
Course and membership sites — Embed calculators in lesson pages so students practise with real numbers.

Troubleshooting

Nothing shows in the Designer — Expected. Webflow never renders iframes in the canvas. Use Preview mode or publish.
Blank on the published site too — Check that the snippet was pasted into an Embed element and not a Rich Text block. Rich Text escapes HTML.
Calculator is cut off — Increase the iframe height. If an internal scrollbar appears, add 100px and re-publish.
Too narrow on desktop — The parent Div is constrained. Raise its max-width or remove the constraint.
Validation error on save — A character was dropped during copy. Re-copy the full snippet from the embed library.

Popular calculators for Webflow sites

FAQ

Why is my embed not showing in the Designer?

Webflow does not render iframe content inside the Designer canvas — you get a placeholder box instead. Switch to Preview mode or publish. The embed is working.

Does this count against my Webflow plan limits?

The Embed element counts as one page element, which is generous on every plan. The calculator is hosted on CalcIQ's CDN, so it uses none of your Webflow bandwidth or hosting.

Can I use this on the free Starter plan?

Yes. The Embed element is available on all plans. You need a paid Site plan only to publish to a custom domain.

Will it be responsive?

Yes — the snippet is width 100%, so it fills its parent container. Set the parent width per breakpoint and the calculator follows.

Is it free, and does it track visitors?

Free with no signup or API key. Zero tracking, no cookies — calculations run in the visitor's browser and their numbers never leave their device.