Lanternhill Studio · Bank CSV Categorizer

How to Embed a Calculator in WordPress, Squarespace or Wix

Most embeddable calculators arrive as a block of HTML with some CSS and JavaScript (or as an iframe snippet). Every major website builder has a way to paste that in. Here are the steps for each, plus the problems you're most likely to hit.

Before you start

Copy the whole snippet, from the first <script> or <div> to the last closing tag. A partial paste is the most common cause of a blank box.
Set up any branding or config section in the snippet first (firm name, colors, button link).
Know whether the snippet loads anything external, for example a PDF library from a CDN, so your privacy policy is accurate.

WordPress (block editor)

Edit the page and click + to add a block.
Search for Custom HTML and add it.
Paste the snippet and click Preview (the block preview may not run scripts).
Update or publish the page and check it live.

In the classic editor, switch to the Text tab before pasting. WordPress may strip scripts for users without the unfiltered_html capability (on multisite, only super admins have it), so paste as an administrator. Some security plugins also strip scripts. Page builders such as Elementor have their own HTML widget that works the same way.

Squarespace

Edit the page, click Add block and choose Code.
Paste the snippet, keep the mode set to HTML and turn off Display Source.
Save and exit, then view the live page. Scripts often don't run in the editor preview.

Squarespace only runs JavaScript in Code blocks on certain plans (Core/Business or higher on current plans). If the block shows but doesn't calculate, check your plan first.

Wix

In the Editor, click Add → Embed Code → Embed HTML.
Click Enter Code, choose Code, paste the snippet and click Update.
Drag the embed box large enough. Wix puts the code in an iframe of fixed size, so a calculator whose results appear below the inputs needs extra height (often 900 to 1,200 px). Check on mobile view too.

Webflow (bonus)

Add an Embed (Code Embed) element, paste and save. Webflow limits each embed to 50,000 characters, and custom code runs only on the published site, not in the Designer.

Troubleshooting

Blank or unstyled box: part of the snippet is missing, or the platform stripped the <script>. Re-paste the whole thing as an admin.
Works on desktop, cut off on mobile: on Wix, raise the embed height in mobile view.
Two calculators on one page clash: don't paste the same calculator twice on a page.
Theme styles look odd: good embeds scope their CSS, but a theme can still override fonts. That's usually fine to leave.
Nothing happens on click: open the browser console (F12) for errors. A content-security or "disable JavaScript" setting from a plugin or host can block scripts.

Need calculators to embed? Our White-Label Calculator Kit has 9 (tax, mileage, home office, budget, invoice, estimate, hourly rate, margin, break-even) as paste-in HTML with your branding, and the steps above are in its README. To see what an embed looks like first, the demo page shows two of them on a live page.

Frequently asked questions

How do I add a calculator to WordPress?

Add a Custom HTML block, paste the full snippet, preview and publish. Paste as an administrator, since WordPress may strip scripts for users without the unfiltered_html capability.

Why doesn't my calculator work on Squarespace?

Squarespace only runs JavaScript in Code blocks on certain plans (Core/Business or higher on current plans), and scripts often don't run in the editor preview.

Why is my Wix embed cut off?

Wix puts the code in a fixed-size iframe, so drag the embed box taller (often 900 to 1,200 px) and check the mobile view.

For firms: see branded calculators running on a page at the White-Label Calculator Kit demo.