Embed options
Embed a mortgage calculator on your website your way
Your website builder shouldn't decide whether you can capture a borrower's numbers.
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 on your website with PrequalFunnel, paste one div and one script tag where you want it. Choose the mode: inline (style-isolated, no iframe), inline in a frame, popup button, floating bubble, your own button or link, a direct link, or a classic iframe. It works on HighLevel, WordPress, Wix, Squarespace and Webflow.
Key takeaways
- One line of code: a div plus one script.
- Inline mode is style-isolated, so your site's CSS can't break the calculator.
- Popup, floating, your-own-trigger, direct link and classic iframe for every other case.
- Works on any builder that accepts custom HTML, including HighLevel funnels.
01
How does the embed code work?
The embed is a single element that names the calculator plus a small loader script. The loader finds the element, fetches your saved settings (theme, colors, copy) and mounts the calculator in place. Because your settings load at run time, changes you make in the dashboard show up on your site without editing the code again.
In the default inline mode there is no iframe. The calculator renders inside an isolated container on your page, so your theme's CSS can't change its fonts or spacing, and its styles can't leak out and change your page. If the inline mount can't complete, it falls back to a framed version automatically, so the borrower still sees a working calculator.
Inline mode can also carry optional crawlable content inside the element: a heading, a short introduction, the definitions and the disclaimer, with optional structured data. That gives search engines something to read on the page that hosts the calculator. It doesn't promise rankings; it just avoids a blank box where the calculator sits.
Every mode uses the same lead form, so leads arrive in your built-in CRM with the same inputs, results and traffic source whichever mode you choose.
What does the embed code look like?
This is the shape of the snippet the dashboard gives you. Your real key and calculator are filled in when you copy it. Change data-mode to switch modes.
<!-- FHA calculator, inline (default) -->
<div data-prequal="fha-loan" data-key="ak_…" data-mode="inline" data-lang="en"></div>
<script src="https://app.prequalfunnel.com/embed.js" async></script>
<!-- Same calculator as a floating bubble, bottom left -->
<div data-prequal="fha-loan" data-key="ak_…" data-mode="floating"
data-label="Estimate my FHA payment" data-color="#0f5c4a" data-position="bl"></div>
<!-- Open it from your own button -->
<button class="open-calculator">Check my numbers</button>
<div data-prequal="fha-loan" data-key="ak_…" data-mode="trigger" data-trigger=".open-calculator"></div>Which embed mode should you use?
Start with inline. Use the others when the page layout or the builder calls for it.
| Mode | How it appears | Best for |
|---|---|---|
| Inline (default) | In the page flow, style-isolated, no iframe | Calculator pages and loan-program pages |
| Inline in a frame | In the page flow inside an auto-resizing frame | Builders that restrict scripts on the page itself |
| Popup button | A button that opens the calculator in a popup | Hero sections and pricing-style blocks |
| Floating bubble | A corner button on every page (bottom or top, left or right) | Site-wide coverage |
| Your own button or link | Any element matching a CSS selector opens it | Existing CTAs, menu items, images |
| Direct link | A full-page calculator URL | Email, SMS, social bios, QR codes |
| Classic iframe | A standard iframe | Older platforms that only accept iframes |
Inline or iframe: what's the practical difference?
Both work. Inline is the better default for most LO websites.
Inline (no iframe)
- Sizes naturally with the page; no scroll-inside-a-scroll
- Isolated styles in both directions
- Can carry crawlable heading, definitions and disclaimer
- Keeps first and last traffic source across pages on your site
- Falls back to a frame automatically if needed
Classic iframe
- Accepted by almost any platform
- Fixed box unless the auto-resizing frame mode is used
- Content sits on another page, invisible to your page's crawl
- Knows the host page but not the full campaign history unless the page URL is passed
- Fine as a fallback for restrictive builders
What should be on the page around the calculator?
The calculator includes its own disclaimer, but the page it sits on is your advertising. Keep your NMLS ID, Equal Housing Opportunity statement and state licensing information visible, and make sure the consent text on the lead form matches what your compliance team approved for calls and texts. See TCPA consent for background, and check with your compliance team or counsel for your situation.
Keep reading
FAQ · 10 questions
Questions loan officers ask
How do I embed a mortgage calculator on WordPress?
Add a Custom HTML block where the calculator should appear and paste the snippet from your dashboard. The loader script can live in the same block. If a security plugin strips scripts, allow the script or use the inline-in-a-frame or classic iframe mode.
Does it work in HighLevel funnels and websites?
Yes. Paste the snippet into a custom code element on the funnel or website page. To send the leads on into a workflow, see the HighLevel integration, which uses a webhook on Producer or Brokerage.
Does it work on Wix, Squarespace and Webflow?
Yes. Use each builder's custom code or embed element. If a builder sandboxes embeds in its own frame, the calculator still works; the frame-based modes are there for builders that block scripts entirely.
Will my website's styles break the calculator?
Not in inline mode. The calculator renders in an isolated container, so your theme's fonts, margins and button styles don't reach it, and its styles don't affect your page.
Can I open the calculator from a button I already have?
Yes. Use trigger mode and give your button or link a CSS class or selector. Any matching element opens the calculator in a popup, so you keep your existing design.
Can I set the calculator to Spanish by default?
Yes. Add data-lang="es" to the element. Visitors can still switch languages inside the calculator. See bilingual calculators for more.
Do I need to change the code when I restyle the calculator?
No. Theme, colors and copy load from your saved settings each time the calculator mounts, so dashboard changes appear on your site without a new snippet.
Can I put several calculators in one embed?
Yes, with a widget. A widget groups calculators into a floating launcher, tabs, buttons or cards using the same one-line approach.
Can embed codes use my own domain?
Yes, on Producer and Brokerage. Once a custom domain is active, embed codes and the calculators they load are served from it instead of app.prequalfunnel.com.
Is the direct link useful on its own?
Yes. The direct link opens a full-page calculator with your branding, which works well in emails, texts, social bios and QR codes on flyers, where you can't embed code.
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.