用 PrequalFunnel 在网站上嵌入房贷计算器，只需在想放的位置粘贴一个 div 和一个 script 标签。可选模式：内嵌（样式隔离，无 iframe）、框架内嵌、弹窗按钮、悬浮气泡、自定义按钮或链接、直接链接，或传统 iframe。支持 HighLevel、WordPress、Wix、Squarespace 和 Webflow。
要点
- 一行代码：一个 div 加一个脚本。
- 内嵌模式样式隔离，您网站的 CSS 无法破坏计算器。
- 弹窗、悬浮、自定义触发、直接链接和传统 iframe，覆盖其他所有情况。
- 适用于任何接受自定义 HTML 的建站工具，包括 HighLevel 漏斗。
01
嵌入代码如何运作？
嵌入代码由一个指明计算器的元素和一个小型加载脚本组成。加载脚本找到该元素，获取您保存的设置（主题、颜色、文案），并在原位挂载计算器。由于设置在运行时加载，您在后台所做的修改无需再次编辑代码就会显示在网站上。
在默认的内嵌模式下没有 iframe。计算器在您页面上的一个隔离容器中渲染，您主题的 CSS 无法改变它的字体或间距，它的样式也不会外泄改变您的页面。如果内嵌挂载无法完成，它会自动回退到框架版本，借款人看到的仍是一个能用的计算器。
内嵌模式还可以在元素内携带可选的可抓取内容：标题、简短介绍、定义和免责声明，以及可选的结构化数据。这让搜索引擎在承载计算器的页面上有内容可读。它不保证排名；只是避免计算器所在位置变成一个空白框。
嵌入代码是什么样的？
这是后台提供给您的代码结构。复制时会自动填入您真实的密钥和计算器。修改 data-mode 即可切换模式。
<!-- 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>应该使用哪种嵌入模式？
先用内嵌。当页面布局或建站工具有需要时，再使用其他模式。
| 模式 | 显示方式 | 最适合 |
|---|---|---|
| 内嵌（默认） | 位于页面内容流中，样式隔离，无 iframe | 计算器页面和贷款项目页面 |
| 框架内嵌 | 位于页面内容流中，置于自动调整高度的框架内 | 限制页面本身运行脚本的建站工具 |
| 弹窗按钮 | 一个按钮，点击后在弹窗中打开计算器 | 首屏区域和类似价格表的版块 |
| 悬浮气泡 | 每个页面角落的按钮（底部或顶部，左侧或右侧） | 全站覆盖 |
| 自定义按钮或链接 | 任何匹配 CSS 选择器的元素都能打开它 | 现有的行动号召、菜单项、图片 |
| 直接链接 | 一个整页计算器网址 | 邮件、短信、社交媒体简介、二维码 |
| 传统 iframe | 标准 iframe | 只接受 iframe 的老旧平台 |
内嵌还是 iframe：实际区别是什么？
两者都能用。对大多数贷款专员网站来说，内嵌是更好的默认选择。
内嵌（无 iframe）
- 随页面自然调整大小；不会出现“滚动里套滚动”
- 双向样式隔离
- 可携带可抓取的标题、定义和免责声明
- 在您网站的各个页面间保留首次和末次流量来源
- 需要时自动回退到框架
传统 iframe
- 几乎所有平台都接受
- 除非使用自动调整高度的框架模式，否则是固定大小的方框
- 内容位于另一个页面，您页面的抓取看不到
- 知道宿主页面，但除非传入页面网址，否则不了解完整的推广历史
- 作为限制较多的建站工具的备选方案没问题
计算器周围的页面上应该有什么？
计算器自带免责声明，但它所在的页面属于您的广告。请保持 NMLS 编号、平等住房机会声明和州执照信息清晰可见，并确保线索表单上的同意条款与合规团队批准的电话和短信联系条款一致。背景知识请看 TCPA 同意，具体情况请咨询您的合规团队或律师。
延伸阅读
常见问题 · 10 个问题
贷款专员常问的问题
如何在 WordPress 上嵌入房贷计算器？
在计算器要出现的位置添加一个“自定义 HTML”区块，粘贴后台提供的代码。加载脚本可以放在同一个区块中。如果安全插件会过滤脚本，请放行该脚本，或改用框架内嵌或传统 iframe 模式。
能在 HighLevel 漏斗和网站中使用吗？
能。把代码粘贴到漏斗或网站页面的自定义代码元素中。如果要把线索继续送进工作流，请看 HighLevel 集成，它在 Producer 或 Brokerage 方案中使用 webhook。
能在 Wix、Squarespace 和 Webflow 上使用吗？
能。使用各建站工具的自定义代码或嵌入元素。如果建站工具把嵌入内容放在自己的沙盒框架中，计算器照样能用；框架类模式就是为完全屏蔽脚本的建站工具准备的。
我网站的样式会破坏计算器吗？
内嵌模式下不会。计算器在隔离容器中渲染，您主题的字体、边距和按钮样式影响不到它，它的样式也不会影响您的页面。
可以用我现有的按钮打开计算器吗？
可以。使用触发模式，并给您的按钮或链接指定一个 CSS 类或选择器。任何匹配的元素都会在弹窗中打开计算器，您的现有设计保持不变。
可以把计算器默认设为西班牙语或其他语言吗？
可以。在元素上添加 data-lang="es"（或 zh、ko、vi、ar）。访客仍可在计算器内切换到其他语言。更多信息请看双语计算器。
重新设置计算器样式时需要改代码吗？
不需要。每次计算器挂载时，主题、颜色和文案都从您保存的设置中加载，后台的修改无需新代码就会显示在网站上。
可以在一个嵌入中放多个计算器吗？
可以，使用小组件。小组件用同样的一行代码方式，把多个计算器组合成悬浮启动器、标签页、按钮或卡片。
嵌入代码可以使用我自己的域名吗？
可以，在 Producer 和 Brokerage 方案中。自定义域名启用后，嵌入代码及其加载的计算器会从您的域名提供，而不是 app.prequalfunnel.com。
直接链接单独使用有用吗？
有用。直接链接会打开一个带有您品牌的整页计算器，非常适合邮件、短信、社交媒体简介和传单上的二维码这些无法嵌入代码的场合。
PrequalFunnel
您的下一位借款人已经在您的网站上。
给他们想要的数字，然后收到附带这些数字的线索。
Originator 永久免费。需要 webhook 和自有品牌时再升级。 按月和按年方案均有 14 天免费试用。试用结束前取消，不收取任何费用。