Add Financial Calculators to Squarespace
Squarespace powers 3% of all websites
Add interactive financial calculators to your Squarespace website using the built-in Code Injection feature. No developer experience needed — just paste and publish.
Step-by-Step Installation Guide
Follow these steps to add NexTool calculators to your Squarespace site. Most users are done in under 2 minutes.
Open Your Squarespace Page Editor
Navigate to the page where you want the calculator. Click Edit on the page, then click an insert point where you want the calculator to appear.
Add a Code Block
Click the "+" insert point, select "Code" from the block menu. Make sure the "Display Source" toggle is OFF.
<class="code-tag">iframe
src=class="code-string">"https:class="code-commentclass="code-string">">//getnextool.com/embed/mortgage-calculator"
width=class="code-string">"100%"
height=class="code-string">"450"
frameborder=class="code-string">"0"
style=class="code-string">"border: none; border-radius: 8px;"
title=class="code-string">"Mortgage Calculator"
loading=class="code-string">"lazy"
></class="code-tag">iframe>Add Custom CSS (Optional)
To customize the calculator container, go to Design > Custom CSS and add styling rules.
"code-comment">/* Squarespace Custom CSS */
.sqs-block-code .sqs-block-content {
max-width: 800px;
margin: 0 auto;
}
.sqs-block-code iframe {
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}Site-Wide Code Injection (Alternative)
For advanced users: go to Settings > Advanced > Code Injection. Add scripts to the header or footer that apply to all pages.
class=class="code-string">"code-comment"><!-- Add to Footer Code Injection -->
<class="code-tag">script>
class=class="code-string">"code-comment">// Auto-resize NexTool embeds
window.addEventListener(class="code-string">'message', function(e) {
if (e.data && e.data.type === class="code-string">'nextool-resize') {
var frames = document.querySelectorAll(class="code-string">'iframe[src*=class="code-string">"nextool"]');
frames.forEach(function(frame) {
frame.style.height = e.data.height + class="code-string">'px';
});
}
});
</class="code-tag">script>Save and Publish
Click Save on the code block, then publish your page. The calculator will be live immediately. Preview on mobile to confirm it looks good on all screen sizes.
Live Preview
This is how a NexTool calculator will look on your Squarespace site.
<iframe
src="https://nextool.dev/embed/mortgage-calculator"
width="100%"
height="450"
frameborder="0"
title="Mortgage Calculator"
></iframe>Customization Options
Tailor the calculator to match your Squarespace site.
Size
Set custom width and height. Default is 100% width, 450px height. The calculator is fully responsive.
Theme
Choose light or dark theme to match your site. Paid tiers support custom brand colors.
Tools
Choose from 326+ calculators: mortgage, BMI, salary, loan, tax, investment, retirement, and more.
Pricing
Get started for free. Upgrade as you grow.
Frequently Asked Questions
Common questions about using NexTool calculators with Squarespace.
Which Squarespace plan do I need?
Code blocks are available on all Squarespace plans — Personal, Business, Commerce Basic, and Commerce Advanced. You do not need a higher-tier plan to embed NexTool calculators.
Can I add calculators to blog posts?
Yes. When editing a blog post, you can add a Code block just like on any other page. This works great for financial articles where you want readers to interact with a calculator.
Will it match my Squarespace design?
The calculator loads in a clean iframe that works with any Squarespace template. You can add custom CSS to style the container (border radius, shadows, spacing) to match your site's aesthetic.
Can I use the calculator on multiple pages?
Yes. Simply add a Code block with the embed code on each page where you want a calculator. With the free tier you can use 1 calculator (but on multiple pages). Paid tiers unlock more calculator types.
Ready to Add Calculators to Squarespace?
Start with our free tier — no credit card required. Upgrade anytime for more calculators and white-label branding.