How to add a calculator to Webflow
Webflow's Embed element is designed for third-party widgets — it accepts iframes, scripts, and custom markup while the Designer handles everything else. Drop one on a page, paste the snippet, and set its size.
Step by step
Copy the tool's embed code
Choose the calculator you want and copy the one-line iframe snippet from its embed section.
Add an Embed element
In the Designer, open the Add panel, scroll to Components, and drag an Embed element onto the page where the calculator belongs.
Paste the snippet
Double-click the Embed canvas and paste the iframe code into the HTML editor. Click Save & Close.
Size it and publish
Drag the Embed's edges or set width to Full and a fixed height, then publish. The calculator is live.
What it looks like embedded
Good tools to embed on Webflow
Good to know
- Webflow strips iframes outside an Embed element, so the snippet must go inside the Embed's code editor, not a Rich Text field.
- Set the Embed to Full width and give it a height (about 560–640px works for most calculators) so the widget has room.
- Reusable components accept Embeds too — put the calculator in a component to reuse it across CMS template pages.
Frequently asked questions
Quick answers before you start.
Where does the Embed element live in Webflow?
In the Add panel under Components. Drag it onto the canvas, then double-click it to open the code editor where you paste the iframe.
Can I use a calculator inside a Webflow CMS template?
Yes. Add the Embed to a Collection item template, or wrap it in a component and drop that component into the template, and every CMS page gets the calculator.
Why does my Embed show up blank?
The most common cause is pasting into a Rich Text field, which strips iframes. Make sure the code is inside an Embed element's editor, and give the element an explicit height.