Near the top of a calculator page
If the page exists for the calculator, don't make borrowers scroll past three paragraphs to find it.
Platform guide: plain HTML
How to embed a mortgage calculator in an HTML page
If you or your developer edit HTML directly, this is the shortest path: two lines and a test lead.
Free plan, no card. Paid plans include a 14-day trial.
<div data-prequal="mortgage"
data-key="YOUR_EMBED_KEY"
data-mode="inline"></div>
<script src="https://app.prequalfunnel.com/embed.js" async></script>To embed a mortgage calculator in an HTML page, paste the div and script tag from your PrequalFunnel Embed tab where the calculator should appear, inside the body. The script loads asynchronously and mounts the calculator in place. If your site sends a content security policy, allow scripts and connections from app.prequalfunnel.com, then send a test lead.
Key takeaways
- Paste the div where the calculator should render; the script can sit with it.
- The script is async and doesn't block your page.
- Allow app.prequalfunnel.com in any content security policy.
- Works in static sites, hand-built templates and any builder with an HTML box.
What is the HTML embed code?
One element and one script. Placeholders show the shape; copy the exact snippet from the Embed tab in your dashboard; it is the source of truth.
<!doctype html>
<html lang="en">
<body>
<h1>Estimate your monthly payment</h1>
<!-- Mortgage payment calculator, inline -->
<div data-prequal="mortgage" data-key="ak_…" data-mode="inline" data-lang="en"></div>
<script src="https://app.prequalfunnel.com/embed.js" async></script>
<!-- Optional attributes: data-color-mode="light|dark|auto", data-lang="es" -->
</body>
</html>How do you add it to your page?
Four steps, whatever your stack.
-
Copy the snippet
Open the calculator's Embed tab in your PrequalFunnel dashboard, choose a mode and copy the snippet.
-
Paste it in the body
Put the div exactly where the calculator should render, inside the body. Keep the script line as copied.
-
Allow the domain if you use a CSP
If your server sends a content security policy, add app.prequalfunnel.com (or your custom domain on Producer and Brokerage) to the script and connect sources.
-
Deploy and test
Deploy the page, open it in a private window, run a calculation and submit a test lead.
Where should the calculator go on the page?
Placement affects how many visitors reach the lead form.
In a full-width container
Inline mode sizes to its container; avoid fixed heights and narrow columns.
Floating bubble in a shared footer
For site-wide coverage, add the Floating bubble snippet to your footer template so it loads once per page.
Next to your compliance details
Keep your NMLS ID, Equal Housing Opportunity statement and licensing information visible on the same page.
How do you debug the embed?
Open your browser's developer tools; the console usually names the problem.
| Console or symptom | Cause | Fix |
|---|---|---|
| Refused to load the script | Content security policy blocks the domain | Add the domain to script-src and connect-src |
| Nothing renders, no errors | Div missing or attributes edited | Re-copy the snippet from the Embed tab |
| Error about an unknown or inactive key | Key mistyped or calculator not active | Check the calculator is switched on and re-copy |
| Calculator renders, lead never arrives | Contact limit reached or form blocked by an extension | Check your plan limit and test without extensions |
| Frame mode shows a scroll bar | Fixed height on the container | Remove the height so the frame can resize |
How do you send a test lead?
Open the deployed page in a private window with ?utm_source=test on the URL, run a realistic calculation and submit the lead form with your own name and email. Confirm the contact in your built-in CRM shows every input, result, the page URL and the test source, and that the alert email arrives. On Producer or Brokerage, confirm your webhook receiver got the same payload. Note the test contact so it stays out of your reporting.
Keep reading
FAQ · 8 questions
Questions loan officers ask
Does the script need to go in the head?
No. Keep the snippet as copied, with the script next to the div inside the body. It loads asynchronously, so it doesn't block your page.
Can I load the script with defer instead of async?
Keep the attributes as copied from the Embed tab. Changing them isn't necessary and makes troubleshooting harder.
Will my CSS affect the calculator?
Not in inline mode. The calculator renders in an isolated container, so your styles don't reach it and its styles don't leak out.
What CSP entries do I need?
Allow app.prequalfunnel.com, or your custom domain if you use one, for scripts and connections. Frame modes also need it in frame-src.
Can I set dark mode from the HTML?
Yes. Add data-color-mode with light, dark or auto to override the saved mode for that embed.
Can I add crawlable text with the calculator?
Inline mode can carry an optional heading, introduction, definitions and disclaimer inside the element. Choose that option in the Embed tab and copy the longer snippet.
Does it work in single-page apps?
Yes, as long as the div is in the page when the script runs. If you render the div later, load the script after the div exists.
Can I use an iframe instead?
Yes. Copy the Classic iframe snippet from the Embed tab. Inline is the better default; see embed options for the trade-offs.
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.