How to embed a calculator widget on your website
Every Calcly calculator comes with one embed snippet that works on any site — a static HTML page, WordPress, Webflow, or a landing page builder. Here is how to put it live.
1. Build the calculator
Sign up and create a calculator: add the input fields visitors will fill in and the formula that turns them into a result.
2. Copy the embed snippet
Each calculator has its own snippet in your dashboard. It is a small piece of HTML that loads the calculator and renders it wherever you place it on the page — no separate JavaScript file to host yourself.
3. Paste it into your page
- WordPress: add a "Custom HTML" block where you want the calculator and paste the snippet in.
- Webflow / Squarespace / similar builders: use the "Embed" or "Code" element and paste the snippet in.
- A hand-coded site: paste the snippet directly into your HTML where the calculator should appear.
4. Check it loads and matches your page
Preview the page. The calculator should render inline, without a visible border or iframe chrome, so it looks like a native part of your page. If anything looks off, remove any earlier version of the snippet first — leaving two copies on the same page is the most common cause of a duplicated widget.
5. Watch the submissions come in
Every completed calculator shows up in your Calcly dashboard with the visitor's inputs and result, so you have the context for any follow-up.