Add a calculator to Squarespace
Squarespace has a Code Block that takes raw HTML, which is all a widget needs. It sits in the page like any other block, so it can go inside a column, between paragraphs, or on its own row.
Step by step
- 1
Copy the snippet
Pick the widget and set the theme and accent colour before copying, so it arrives matching your site.
- 2
Insert a Code Block
Edit the page, click an insertion point, and search the block menu for Code. Choose the Code block, not Markdown or Embed.
- 3
Paste and switch off Display Source
Paste the snippet into the block. Make sure the Display Source checkbox is unticked, or Squarespace prints the code as text on the page instead of running it.
- 4
Save and view the live page
Code blocks often show a placeholder in the editor rather than running. Save and open the page normally to see the calculator.
What you are pasting
Every widget is the same two lines. A div marking the spot, and a script that fills it. The builder on each widget page writes the attributes for you.
<div class="cc-mortgage-calculator"
data-theme="light"
data-accent="#0e7490"></div>
<script src="https://calculatorcastle.com/embed/mortgage.js" async></script>The class decides which calculator appears. The data attributes are optional, and anything you leave out falls back to a sensible default. Change data-accent to your brand colour and the calculator picks it up for buttons, highlights and the result panel.
Speed, and what it does to your SEO
The script is around 12 KB, roughly 4.5 KB compressed over the wire, and it loads with the async attribute so it never blocks the page from rendering. There are no libraries behind it, no web fonts and no images, which is why it stays that small.
It will not move your Core Web Vitals in a way you can measure. The calculator renders into a div that already occupies its space, so nothing shifts on the page as it arrives and your Cumulative Layout Shift is untouched. Because the script is async, Largest Contentful Paint is decided by your own content rather than by the widget.
For search, a calculator is the kind of thing that keeps someone on the page and gives them a reason to come back, which is worth more than the small amount of script it costs. The calculator itself is not indexed as your content, since it renders in a shadow root, so it will not compete with your writing or create duplicate text.
Pick a calculator
Each has a builder for the colours and options, and gives you the snippet to paste into Squarespace.
When it goes wrong
The code shows as text on my page
Display Source is ticked in the Code Block settings. Untick it and save.
The block shows a grey placeholder in the editor
Expected. Squarespace does not run scripts inside the editor. View the saved page.
Which Squarespace plans allow this?
Code Blocks need a Business plan or higher. On Personal, link to the calculator rather than embedding it.