The plan doesn't allow scripts
If the script line disappears or nothing renders on the live page, your plan probably blocks custom code. Use the direct link on a button instead.
Platform guide: Squarespace
How to add a mortgage calculator to Squarespace
Check your plan, paste one snippet into a Code block, and the calculator sits on your page in your colors.
Free plan, no card. Paid plans include a 14-day trial.
Key takeaways
- Use a Code block in the page editor.
- Running custom code depends on your Squarespace plan; check before you start.
- Scripts often don't run in the editor; judge it on the live site.
- No custom code on your plan? Link a button to the calculator's direct link.
To add a mortgage calculator to Squarespace, add a Code block to the page section where it should appear, paste the snippet from your PrequalFunnel Embed tab, save and view the live page. Whether Code blocks can run scripts depends on your Squarespace plan, so check that first; a button linked to the direct link works on any plan.
01
Can your Squarespace plan run the calculator?
Check this first. As of October 2026, Squarespace limits custom code, including Code blocks that run scripts and site-wide code injection, to certain plans. If your plan doesn't allow it, the Code block may be missing, or it may save but strip the script so nothing appears. Look at your plan's features in Squarespace's own billing settings; we don't list their plans or prices because they change.
If custom code isn't available, you still have a working option: add a normal Squarespace button or text link that points at the calculator's direct link, copied from the Embed tab. The borrower opens a full-page calculator in your branding, and the lead lands in your CRM exactly the same way.
If your plan does allow custom code, the inline mode is the best default. It is style-isolated, so your Squarespace template's fonts and button styles won't change the calculator.
How do you embed the calculator with a Code block?
Menu names describe the Squarespace editor as of October 2026.
-
Copy the snippet
Open the calculator's Embed tab in your PrequalFunnel dashboard, choose Inline and copy the snippet.
-
Add a Code block
Edit the page, click an insert point or add-block control in the section you want, and choose Code from the block menu.
-
Paste the snippet
Paste the full snippet. Leave the display-source-code option off and keep the mode set to HTML so the code runs instead of being shown as text.
-
Save and exit the editor
Save the page. The editor often shows a placeholder instead of running scripts, which is normal.
-
Check the live page
Open the live URL in a private window, run a calculation and submit a test lead.
What goes into the Code block?
A placeholder version showing the shape of the code. Copy the exact snippet from the Embed tab in your dashboard; it is the source of truth.
<!-- DTI calculator, inline -->
<div data-prequal="dti" data-key="ak_…" data-mode="inline" data-lang="en"></div>
<script src="https://app.prequalfunnel.com/embed.js" async></script>Why isn't the calculator showing on Squarespace?
Work through these in order.
The code displays as text
The Code block is set to show source code or a plain-text mode. Switch it back to HTML.
Only the editor is blank
Squarespace often doesn't run scripts while you edit. Check the published page.
Site is password-protected or unpublished
The calculator loads, but you can't test from a logged-out window until the site is public, so test while logged in or publish first.
Layout looks cramped
Narrow columns squeeze the calculator. Give it a full-width section, or use the Compact theme or the popup button mode.
How do you send a test lead from Squarespace?
On the live page, run a realistic calculation and submit the lead form with your own name and email. Confirm the contact appears in your built-in CRM with every input, result and the page URL, and that the alert email arrives. Visit once with ?utm_source=test on the URL to see the traffic source recorded. On Producer or Brokerage, check your webhook's receiving tool got the same lead. Add a note to the test contact so it doesn't skew your reporting.
Keep reading
FAQ · 8 questions
Questions loan officers ask
Which Squarespace plan do I need?
One that allows custom code in Code blocks. Squarespace sets which plans include it and changes that over time, so check your plan's features in Squarespace. We don't quote their prices.
Can I use the calculator without custom code?
Yes. Add a button or link that points at the calculator's direct link from the Embed tab. Borrowers get a full-page branded calculator and the lead still lands in your CRM.
Will my Squarespace template change the calculator's look?
Not in inline mode. The calculator is style-isolated, so template fonts and buttons don't reach it. Set colors and fonts in PrequalFunnel to match your site.
Why do I only see a placeholder in the editor?
Squarespace commonly holds back scripts while you edit. Save, then check the published page.
Can I add a floating calculator bubble site-wide?
If your plan includes site-wide code injection, paste the Floating bubble snippet into the footer area so it loads on every page. Otherwise, add the bubble snippet to a Code block on the key pages.
Can I use Squarespace's own form instead?
You can, but you lose the numbers. The calculator's own lead form attaches every input and result to the lead, which is the point of a pre-qual funnel.
Does the calculator work on Squarespace mobile layouts?
Yes. Inline mode sizes to the width of its section. Check the page on a phone after publishing.
How do I send Squarespace leads to HighLevel?
On Producer or Brokerage, add a webhook pointing at a HighLevel Inbound Webhook workflow. See the HighLevel integration.
PrequalFunnel
Your next borrower is already on your site.
Give them the numbers they came for, and get the lead with those numbers attached.
Free forever on Originator. Upgrade when you want webhooks and your own brand. 14-day free trial on monthly and yearly. Cancel before it ends and you pay nothing.