Framer 网站 AI 聊天机器人：2026 年配置指南

Framer 已成为真正想要上线营销网站的创始人默认选择的工具。整洁的字体、结构良好的 CMS 集合、流畅的动画 —— 全部无需写一行 React。但第一个访客带着问题到来的那一刻，Framer 就不再帮忙了：没有内置实时聊天，没有 FAQ 小部件，社区现有的少数插件要么是简单的邮件表单，要么被企业级定价封锁。

这个缺口至关重要。B2B 采购决策的大部分都发生在与销售对话之前，而这些研究的相当一部分发生在没人看收件箱的时段。静态 FAQ 页面是交易的坟墓 —— 人们快速浏览，找不到适合自己情况的内容，便关闭了标签页。

真正的 AI 聊天机器人能填补这一缺口。不是 2018 年的决策树，而是一个能读取你的文档、定价、案例研究并附带来源回答的 LLM 助手。专门针对 Framer 来说，合适的聊天机器人有三个特征：

1. 构建时零依赖 —— Framer 项目中无需安装任何东西，没有自定义代码组件，没有 Next.js 重新导出。它作为单个嵌入脚本就能落地。
2. 与 Framer CMS 内容配合 —— 它能抓取你已发布的 Framer 网站，并在你推送新页面时保持同步。
3. 匹配你的视觉体系 —— Framer 设计师对品牌非常执着；看起来像 2019 年支持气泡的聊天机器人会立刻被卸载。

Chatloom 正是为满足这三个约束而构建的，这也是 2026 年在 Framer 创始人 Slack 频道中名字出现得如此频繁的原因。

最快的路径是自定义代码嵌入，在包括免费 Hobby 层的每个 Framer 计划中都可用。完整流程是四个步骤，如果你已经有 Chatloom 账户，3 分钟就能完成。

创建代理 → 抓取 Framer 网站 → 复制嵌入 → 粘贴到 Framer 自定义代码 → 发布

1. 创建你的代理。 在 chatloom.app 注册，给代理起名，选择模型（默认是 GPT-4.1 Mini，每月只需几分钱就能处理 95% 的营销网站问答）。
2. 将其指向你的 Framer 网站。 Chatloom 内置的爬虫接收你已发布的 Framer URL（yourdomain.framer.website 或自定义域名）并索引它能到达的每个页面。对于典型的 12 页网站，这大约需要 90 秒。爬虫遵守 robots.txt 和速率限制，因此不会触发 Framer 自己的爬虫保护。
3. 获取嵌入代码片段。 在代理仪表板中，打开 Install → Custom embed 并复制三行脚本：

<script>
  window.CHATLOOM_AGENT_ID = "agt_xxxxxxxxxxxxxxxx";
</script>
<script async src="https://chatloom.app/widget.js"></script>

1. 粘贴到 Framer。 打开你的 Framer 项目，转到 Site Settings → General → Custom Code，将代码片段粘贴到 End of body 字段。保存、发布。小部件在每个页面上全局显示 —— 包括你以后添加的任何页面。

这就是整个开发者路径。没有 npm，没有 API 路由，没有需要授权的 Framer 插件。小部件在 Chatloom 的 CDN 上自托管并自动更新，因此你再也不用碰这段代码了。

Framer 设计师最在乎的是一件事：聊天机器人不能看起来像是贴上去的。Chatloom 的小部件构建器正是为这个约束而设计的。每个重要的视觉属性都是一个控件，而不是类名。

在构建器的 Widget 部分中，你可以设置：

• 启动器模式 —— 按钮、紧凑面板、全屏叠加或侧边栏。全屏在 Framer 着陆页上运行得很漂亮，因为它尊重英雄视口并使背景变暗。
• 品牌颜色 —— 主色、强调色、表面色。整个聊天表面（标题、气泡、建议、打字指示器）实时重新主题化。
• 圆角半径 —— 匹配 Framer 默认的 12px、为编辑网站设置更尖锐的值，或为活泼的品牌设置完全圆角。
• 自定义字体 —— 上传 .woff2 或从 Google Fonts 中选择。在营销网站上，整个战斗都在字体上进行，这是 Framer 用户最受欢迎的功能。
• 图标和头像 —— 上传你的品牌标志为透明 PNG。启动器按钮尊重 PNG，并在 Retina 屏幕上清晰呈现。
• 聊天背景 —— 渐变、纯色或图像。将其与 Framer 英雄配对，小部件会感觉像是页面的一部分，而不是第三方插入物。

构建器的每个部分都有一个 Test Live 按钮，它在模拟的视口中打开真正的小部件。在通过 Test Live 目测之前，不要发布任何东西。

知识库为空的聊天机器人比没有聊天机器人更糟 —— 它会编造答案并吓跑访客。Framer 网站训练起来异常容易，因为内容已经是结构化的：英雄部分有清晰的标题，CMS 项目有一致的字段，定价表存在于 Framer 自己的组件中。

Chatloom 提供四种导入路径，所有路径都适用于 Framer 项目：

1. 爬取 —— 一次粘贴你的 Framer 域名，Chatloom 遍历网站地图，提取主要内容，剥离 Framer 的 UI 外壳（导航栏、cookie 横幅、页脚），并将其余部分分块以供 RAG 使用。仅此就涵盖了 80% 的营销问答。
2. 网站地图上传 —— 如果你的网站受密码保护或你想训练子集，上传一个 sitemap.xml 并选择要训练的 URL。
3. PDF 和文档上传 —— 放入你的融资演示稿、单页、定价 PDF 或入门文档。Chatloom 使用与爬取相同的嵌入管道解析它们。
4. 手动文本 —— 对于尚未出现在网站上的微妙答案（"如果我在试用中途取消怎么办？"），直接输入知识库。当访客问那个确切问题时，它们成为一流的块并超越爬取结果。

底层的混合搜索引擎（密集向量 + BM25 + RRF + Cohere 重排器）意味着你不必考虑关键词重叠。输入"如何降级"的访客即使文档说"更改计划"也能得到正确答案。

AI 不是 Framer 网站的全部产品。当机器人遇到认真的买家时，它必须让开。Chatloom 内置了三种升级路径：

人工交接。 任何对话都可以由人工客服在 Chatloom 收件箱中接管。客服看到完整的对话记录、访客的页面路径（即 Framer 网站的哪个部分触发了聊天）以及 AI 发出的置信度分数。Framer 创始人通常在第一个月亲自处理这些事情，然后移交给自由职业者或合同 SDR。

线索捕获。 机器人可以在自然对话中收集姓名、电子邮件和一两个资格问题，然后通过 Webhook、Zapier 或直接 HubSpot/Pipedrive 集成将线索推送到你的 CRM。无需表单。

日历预订。 将 Cal.com 或 Calendly 链接放入机器人的系统提示中，当买家说"我能看演示吗"或"我如何开始"时，它会分发预订 URL。对于高意向销售，这比导航中静态的"预订演示"按钮转化得更好。

所有三条路径都共享同一个对话记录。如果 AI 回答了前三条消息，而人工在第四条消息接管，CRM 将收到完整的历史记录 —— 没有"你能重复你对机器人说的话吗"的时刻。

这是 Framer 创始人通常为 Intercom 报价做好准备的地方。现在经济学完全不同了。

Chatloom Free（0 美元/月）涵盖每月 100 条 AI 消息、无限页面爬取、品牌定制和嵌入脚本。对于启动等候列表的 Framer 着陆页，这真的足够了。

Chatloom Starter（29 美元/月）解锁 2,000 条消息、实时聊天交接、分析、CRM Webhook，并移除"Powered by Chatloom"徽章。这是大多数创始人在有真实流量后停留的层级。

Chatloom Pro（99 美元/月）增加了自定义模型路由、优先支持、更高的消息上限和多席位访问 —— 当合同 SDR 或兼职支持人员共享收件箱时很有用。

与现有玩家相比：

对于 Framer 构建的营销网站来说，这些既有数字与流量完全不成比例。损益平衡计算也比人们预期的更友好：在 Starter 价格下，如果聊天机器人每月转移两封本来会发给每小时 75 美元自由职业虚拟助理的电子邮件，它就能收回成本。实际上，这个比率更接近 40 比 1。