Smart Calculations, Smarter Decisions

Add a Calculator to Squarespace

One Code block, two minutes. Works on Squarespace 7.1 and 7.0.

Before you start

Squarespace Code blocks require the Business plan or above. Personal plans do not include them — that is a Squarespace restriction, not an embed limitation. If you are on Personal, you can still link visitors to the calculator instead of embedding it.

Step-by-step

1Copy an embed code

Open the CalcIQ embed library and click Copy on any calculator:

<iframe src="https://calciq.app/app?calc=fd" width="100%" height="500" style="border:none;border-radius:8px;" title="FD Calculator - CalcIQ"></iframe> <p style="font-size:12px;text-align:center;margin:8px 0 0">Powered by <a href="https://calciq.app" target="_blank" rel="noopener" style="color:#10b981;font-weight:600;text-decoration:none">CalcIQ</a></p>

2Add a Code block

Edit your page, hover where you want the calculator, and click an insert point (the + or a thin line). Search for Code and select the Code block.

3Paste and set the mode to HTML

Delete the placeholder content, then paste the iframe snippet. Check the mode dropdown — it must read HTML, not Markdown. Markdown mode escapes tags and shows the code as plain text on your page.

Leave "Display Source" unchecked.

4Save, then check the live page

Click Save. Squarespace often suppresses iframe rendering inside the editor, so a blank block while editing is not a failure. Open the live page (or an incognito window) to confirm.

Sizing

The snippet is width="100%", so it fills the block's column. Adjust height for the calculator's complexity:

Calculator typeHeight
Tip, age, BMI450–500px
EMI, SIP, FD550–650px
Rent vs Buy, Loan Comparison650–700px
Placed in a narrow column700px+

In Squarespace 7.1 you can also drag the Code block wider or narrower on the page grid. Give financial calculators at least half the page width so input fields sit side by side rather than stacking.

Troubleshooting

Popular calculators for Squarespace sites

FAQ

Which Squarespace plan do I need?

Business or above — Code blocks are not included on Personal plans. This is a Squarespace restriction.

Why does my Code block show HTML instead of the calculator?

The block mode is set to Markdown. Open the block settings and switch it to HTML.

Does it render in the editor?

Often not. Squarespace suppresses iframe rendering while editing. Save and view the live page to confirm.

Is it free?

The CalcIQ embed is free — no registration or API key. You still need a paid Squarespace plan for Code blocks. Each embed includes 3 free calculations per visitor per day.

Does it track visitors?

No. Zero tracking, no cookies. Calculations run in the visitor's browser and their numbers never leave their device.

Browse all 19 calculators

Financial, lifestyle, regional, and utility calculators — all free to embed.

Open the embed library →

Other platforms

WordPress

Custom HTML block

Webflow

Embed element

Wix

Embed HTML

All platforms

Full library