You already have the calculator. It lives in a spreadsheet — a pricing model, a savings estimate, an ROI projection — and it works, because you've refined it for years. The missing piece is getting it onto your website as an embeddable calculator that visitors can actually use: no Excel required on their end, no rebuilt logic on yours, and no risk of exposing the formulas that make it valuable. This guide walks through exactly that — how to turn a spreadsheet into a website calculator and add it to WordPress, Webflow, Wix, or any other CMS with a single iframe.
Two Ways to Add a Calculator to Your Website
When teams decide they need a calculator widget for their website, they usually face a choice:
- Rebuild the logic in a calculator tool or in JavaScript. Every formula gets translated by hand into the tool's own formula language or into code. For a three-field mortgage widget that's fine. For a real model — tiered pricing, lookup tables, conditional logic, edge cases you've patched over years — translation is where errors creep in. And from then on you maintain two versions of the truth: the spreadsheet your team trusts and the copy on the website that slowly drifts out of sync.
- Keep the spreadsheet as the engine. The model you already trust does the calculating; the website gets a clean interface on top of it. Nothing is translated, so nothing can be mistranslated.
airrange takes the second path: it builds website calculators, quoting tools, and dashboards directly from your Excel file or Google Sheet. You design the interface with drag & drop, publish, and embed — and your formulas stay 100% intact throughout. That's the approach this guide follows.
From Spreadsheet to Embeddable Calculator, Step by Step
1. Bring in your model. airrange works with local Excel files, Hosted Files (encrypted and hosted in the EU), Excel files in Microsoft 365, and Google Sheets (import & sync). Upload the workbook, connect your Microsoft 365 account, or import the Sheet — whichever is home to your calculator today.
2. Build the interface. Pick the cells that should be inputs and the cells that show results, then arrange them with drag & drop into a real interface: pages, input controls, your wording. Visitors see a clean tool, not a spreadsheet grid — and the app wizard ensures all your formulas continue working seamlessly underneath.
3. Publish and grab the embed code. When your calculator is ready, you share it — by link, by email, or as an embed. Generate a sharing link for the app and the embed code is provided right there. That code is a standard iframe snippet, which is exactly what makes the next step work everywhere.
Building is free — you can sign up and build unlimited apps without paying. Publishing and sharing them requires a paid plan, which starts at €59 per creator/month (Pro, billed annually).
Embedding the Calculator in WordPress, Webflow, Wix, or Any CMS
Because the embed is a plain iframe, there is no plugin to install and no platform-specific integration to configure. If your CMS can render a block of HTML — and every mainstream one can — it can host your calculator:
- WordPress: add a Custom HTML block (block editor) or paste the snippet into the text view of the classic editor.
- Webflow: drop an Embed element onto the page and paste the code.
- Wix: use Embed HTML (iframe embed) and paste the snippet.
- Everything else — Squarespace, HubSpot pages, Shopify, a hand-written static site — has an equivalent HTML embed option. Paste, publish, done.
Two practical tips for a clean result: set the iframe width to 100% so the calculator fills its container rather than a fixed pixel width, and give it enough height for the full tool so visitors aren't scrolling inside a scrolling page. Test the page at phone width once — which brings us to the next point.
Responsive by Default
An embedded calculator is only as good as it looks on the device your visitor happens to hold. airrange apps are fully responsive, JavaScript-based web apps: the same calculator adapts its layout to the width it's given, whether that's a full-width section on a desktop landing page or a narrow column on a phone. One real-world example from the airrange showcase is a health insurance pricing calculator embedded on the insurer's website — it displays only the rows a visitor needs, adds new lines for additional family members, and adjusts responsively to the screen it's on. You build the app once; the embed handles the rest.
Your Formulas Never Ship to the Browser
This is the part that separates embedding a spreadsheet-based app from uploading a spreadsheet somewhere. If your calculator encodes your pricing structure, margins, or hard-won domain expertise, "just put it online" sounds like giving it away. With airrange, that's not the trade you're making:
- You share a web app — never your original workbook. Visitors interact with inputs and results; no one sees or copies your formulas.
- When you share an app, airrange bundles only the formulas and data that app actually needs into an encrypted Calculation Package — never your full workbook. Whatever else lives in that file stays yours.
- Formulas remain hidden, and your IP stays hidden from end users — no one gets full access to your formulas and data.
So the calculator on your website behaves like any SaaS tool from the visitor's perspective, while the logic behind it stays under your control. If quoting is what your calculator does, the price quote use case shows this pattern in the wild: instant configure-and-price tools where the rate logic is precisely what must not leak.
Updating the Calculator Without Touching the Website
Prices change, assumptions change, the model improves. With a rebuilt calculator, every change means editing the website version too. With a spreadsheet-driven one, updating a calculation is as simple as adjusting the formula in Excel — no developers, no release cycle, and the embedded calculator reflects the current model without anyone touching the CMS. The iframe on your site keeps pointing at the same app; the app keeps calculating with your latest logic.
If You're Coming from Calculator Studio
A note for the many teams whose embedded calculators were built on Calculator Studio: since its shutdown, those widgets need a new home, and the rebuild-versus-reuse question above applies with force. If the underlying model exists in a spreadsheet — or can be moved into one, which is usually faster than relearning a proprietary formula language — the migration path is straightforward. The Calculator Studio migration guide covers the specifics of moving over and re-embedding.
Get Your Calculator on Your Website
The short version: don't rebuild a model you already trust. Upload or connect the spreadsheet, design the interface with drag & drop, generate the sharing link, and paste the provided iframe into whatever CMS runs your website. The calculator builder page shows the full picture, from the builder itself to finished examples. Building your first embeddable calculator is free — sign up, bring the spreadsheet, and see it running on a test page before lunch.