Platform guide: Webflow
How to add a mortgage calculator to Webflow
In Webflow, the calculator appears when you publish, not before; plan your testing around that.
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 add a mortgage calculator to Webflow, drag an Embed (custom code) element onto the page, paste the snippet from your PrequalFunnel Embed tab, save, then publish. Webflow's Designer doesn't run embedded scripts, so you only see the calculator on the published site, which is where you test it and send a test lead.
Key takeaways
- Use the Embed element and paste the full snippet.
- The Designer shows a placeholder; publish to see the calculator.
- Test on the staging domain first, then on your custom domain.
- Give the Embed element a full-width parent so the calculator can size itself.
How do you embed the calculator in Webflow?
The steps describe the Webflow Designer as of October 2026.
-
Copy the snippet
In your PrequalFunnel dashboard, open the calculator's Embed tab, choose Inline and copy the snippet.
-
Add an Embed element
Open the Add panel in the Designer, find the Embed (code embed) element and drag it into a section or container where the calculator should sit.
-
Paste and save the code
Paste the snippet into the code editor that opens and save. The canvas shows a placeholder, which is expected.
-
Set the parent width
Give the Embed element, or its parent, a width of 100% and no fixed height, so the calculator can grow as results appear.
-
Publish and test
Publish to the staging domain, open the page in a private window, run a calculation and submit a test lead. Then publish to your custom domain.
Why is the calculator blank in the Webflow Designer?
Webflow doesn't execute custom scripts inside the Designer canvas or, in some cases, its preview mode. The calculator loads only on a published page. That is normal, not a broken snippet. Publish to the staging domain to check it without touching your live site. Custom code on a published site may also depend on your Webflow plan, so check your plan's features in Webflow; we don't list their prices.
What do you paste into the Embed element?
Placeholders show the shape. Copy the exact snippet from the Embed tab in your dashboard; it is the source of truth.
<!-- FHA calculator, inline -->
<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>
<!-- Or open it from a Webflow button that has the class open-calculator -->
<div data-prequal="fha-loan" data-key="ak_…" data-mode="trigger" data-trigger=".open-calculator"></div>04
How do you send a test lead from Webflow?
Test on the staging domain first. Open the published page in a private window, run a realistic calculation and submit the lead form with your own name and email. You should see a new contact in your built-in CRM with every input and result plus the page URL, and a lead alert email.
Repeat once on your custom domain after you publish there, with ?utm_source=test on the URL, so you can confirm the source is recorded on the live address you will advertise. If you connected a webhook on Producer or Brokerage, check the receiving tool got both tests and map fields from the second one.
Add a note or status to test contacts so they don't count in your reporting.
How do you fix common Webflow embed problems?
Most issues are publish-related or layout-related.
| Symptom | Likely cause | Fix |
|---|---|---|
| Blank in the Designer | Scripts don't run in the canvas | Publish and check the staging page |
| Blank on the live domain only | Site published to staging but not to the custom domain | Publish to both domains |
| Calculator squashed or cut off | Fixed height or narrow flex parent | Set width 100% and height auto on the parent |
| Your own button does nothing | Class on the button doesn't match data-trigger | Use the same class in Webflow and the snippet |
| Code saved but not published | Custom code unavailable on the current plan | Check your Webflow plan's custom code features |
Keep reading
FAQ · 8 questions
Questions loan officers ask
Why can't I see the calculator in the Webflow Designer?
The Designer doesn't run embedded scripts. Publish to the staging domain and view the page there.
Should I put the snippet in page settings custom code instead?
For an inline calculator, use an Embed element so it appears where you place it. Page or site custom code areas suit the Floating bubble, which isn't tied to a spot on the page.
Can I open the calculator from a Webflow button?
Yes. Give your button a class such as open-calculator and use the trigger-mode snippet with a matching data-trigger. The calculator opens in a popup.
Will Webflow styles change the calculator?
Not in inline mode. The calculator is style-isolated. Match your site by setting colors, fonts and radius in PrequalFunnel.
Does it work in Webflow CMS collection pages?
Yes. Put the Embed element in the collection template. To show a different calculator per item, store the calculator snippet in a field and bind it, or keep one calculator per template.
Do I need a paid Webflow plan?
Publishing custom code may depend on your Webflow plan. Check your plan's features in Webflow; we don't list their prices.
How do I test without changing my live site?
Publish to the staging domain only. Test there, then publish to your custom domain when you're happy.
Can I serve the calculator from my own domain?
On Producer and Brokerage, yes. With a custom domain active, the snippet loads calculators from your domain instead of ours.
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.