How to Add a Pricing Calculator to Your Webflow Site

Webflow is a powerful visual builder, but it doesn't have a native pricing calculator component. If you want visitors to get an instant quote on your services page — rather than clicking away to fill out a contact form — you need to embed one yourself.

The good news: Webflow's Embed block makes this straightforward. You don't need Developer Mode, custom JavaScript, or a Webflow app. A single <script> tag is all it takes.

This guide covers adding a pricing calculator to a specific page section, making it available across your entire site, and a few Webflow-specific gotchas to watch for.

What you'll need

• An EmbedQuote account with at least one calculator built
• A Webflow site (any plan — this works on all Webflow plans including free)
• About 5 minutes

Step 1: Build your calculator in EmbedQuote

If you haven't already, create an account and build your calculator. Add your fields (number inputs for quantities, dropdowns for service levels, checkboxes for add-ons), set the price adjustment for each field and option, then save it.

Not sure what to build? Check out our guide on getting started with EmbedQuote — it walks through the entire process from scratch.

Step 2: Copy your embed code

In your EmbedQuote dashboard, open your calculator and copy the embed snippet. It looks like this:

<script
  src="https://embedquote.com/embed.js"
  data-calculator-id="your-calculator-id-here">
</script>

The data-calculator-id attribute is unique to your calculator. Keep it private — it's how EmbedQuote knows which configuration to load.

Step 3: Add an Embed block in Webflow

Open your Webflow Designer and navigate to the page where you want the calculator to appear.

1. In the left panel, click the Add Elements icon (the plus icon).
2. Search for "Embed" or find it under the Components section.
3. Drag the HTML Embed block onto your canvas, positioning it where you want the calculator to appear — inside a section, a div, or a grid cell.
4. Double-click the Embed block to open the code editor.
5. Paste your EmbedQuote <script> tag into the editor.
6. Click Save & Close.

Step 4: Preview and publish

Click the Preview button (eye icon) in the top-right of the Designer to open a browser preview. Your calculator should appear and be fully interactive — change inputs and watch the price update in real time.

Once you're happy with the placement, hit Publish. The calculator is now live on your Webflow site.

Adding the calculator to every page (site-wide)

If you want the calculator to appear in a persistent location — such as a floating widget or in a global footer — you can add the script tag to your site's custom code settings instead of an individual page.

1. Go to your Webflow Project Settings.
2. Click the Custom Code tab.
3. Paste your embed snippet into the Footer Code section.
4. Save and publish.

The calculator will now load on every page of your site. This is useful if you want to offer a quote tool in your site's navigation or sidebar on all pages.

Troubleshooting

The calculator isn't appearing after publish

First, check that your EmbedQuote account is active — calculators won't render if the account subscription has lapsed. Then verify the data-calculator-id in your snippet matches what's in your dashboard. A typo in the ID is the most common cause of a blank embed.

The calculator looks unstyled

EmbedQuote injects its own CSS when the script loads, scoped to the widget container. If your Webflow theme has aggressive global resets, they may override the widget styles. Wrapping the Embed block inside a Div with a specific class and using Webflow's style isolation settings can help.

The calculator works in preview but not on the published site

This is rare but can happen if your Webflow hosting has a strict Content Security Policy that blocks external scripts. Check your browser's developer console for any CSP errors. EmbedQuote's script loads from embedquote.com — make sure that origin is allowed.

What to put next to the calculator

The calculator converts best when it's accompanied by context. On your services page, place it below a short description of what's included in the price — not buried at the bottom of a wall of text. A headline like "Get an instant estimate" directly above the calculator sets clear expectations and increases engagement.