如何在 Framer 网站添加聊天机器人 —— 5 分钟演练

在你粘贴任何东西到 Framer 之前，准备好三样东西：

• 已发布的 Framer 网站。 你可以在草稿项目中嵌入脚本，但小部件只在已发布（live）的 URL 上运行。如果你还没有按 Publish，先这样做。
• Chatloom 账户。 免费层足够。在 chatloom.app 注册，验证电子邮件，你将进入一个空的仪表板，带有"Create your first agent"的提示。
• 用于训练的简短文本。 即使只有关于你产品的 200 字也足以在第一条测试消息中获得真实答案。从你的英雄部分和关于页面中提取。

这就是整个先决条件列表。你不需要 Framer Pro 计划、自定义域名、Zapier 席位或待命的开发者。

在 Chatloom 仪表板中点击 Create new agent。为其命名（你的公司名称就行），选择语言（Chatloom 支持 95+ 种语言，其中十种提供原生响应），并选择人格预设：Support、Sales 或 Custom。

对于 Framer 营销网站，Sales 几乎总是正确的默认值。它经过调整以资格认定线索、推动演示预订，并自信地回答定价问题，而不是转到联系表单。

代理创建后，你将进入构建器。暂时不要碰任何其他东西 —— 我们将在小部件上线后配置品牌。现在只需获取嵌入代码片段：Install → Custom embed。将两个脚本标签复制到剪贴板。

在 Framer 中，打开你的项目，点击顶部栏中的齿轮图标（Site Settings）。滚动到 General → Custom Code。你将看到三个文本区域：

• Start of head —— 用于需要尽早运行的验证标签、预加载链接、分析代码片段。
• End of body —— 用于应在页面渲染后运行的脚本。Chatloom 在这里。
• End of head —— 用于 CSS 覆盖和元标签。

将步骤 1 中的两个脚本标签粘贴到 End of body 字段。保存。然后点击右上角的 Publish。发布完成后十秒内，小部件将在你已发布的 URL 上上线。

在隐身窗口中打开你已发布的网站。你应该在右下角看到 Chatloom 启动器。点击它；聊天面板打开。输入一个问题。恭喜你 —— 你的 Framer 网站现在有了 AI 聊天机器人。

小部件存在，但还不知道你的产品是什么。这是大多数指南跳过的步骤。

回到 Chatloom，打开 Knowledge base → Add source。你有四个选择：

• Crawl website —— 粘贴你的 Framer 域名。爬虫遍历网站地图并从每个页面拉取渲染后的文本。对于大多数 Framer 网站来说是正确的选择，不到两分钟即可完成。
• Upload files —— 放入你的融资演示稿 PDF、单页或定价表。
• Paste text —— 用于尚未出现在网站上的快速 FAQ、定价详情或"如果...怎么办"的答案。
• Sitemap URL —— 如果你的 Framer 网站有密码保护或有你仍希望机器人知道的非索引页面，使用此选项。

对于典型的 Framer 营销网站，Crawl website + Paste text 是制胜组合。爬取涵盖了网站上已有的所有内容；粘贴字段涵盖了从未进入文案的细微差别。

触发训练。在免费层上这大约需要 60 秒。当知识库可查询时，仪表板会显示"Ready"。

这是将看起来像 2019 年支持气泡的聊天机器人与感觉像 Framer 设计原生一部分的聊天机器人分开的步骤。在构建器中，打开 Widget 部分。

从 Launcher mode 开始。Button 是安全的默认值（右下角的浮动圆圈），但 Fullscreen 值得为着陆页尝试 —— 整个视口变暗，聊天占据舞台中心，这对于英雄 CTA 来说是一个更强的转化模式。

接下来是 Brand colors。Chatloom 公开了主色、强调色和表面色。与你的 Framer 调色板匹配。右侧有一个实时预览，会即时更新。

排版。 上传你正在使用的 Framer 字体的 .woff2（或从 Google Fonts 选择器中选择）。聊天表面、建议芯片和标题将使用新字体重新渲染。在 Retina 显示器上，你无法区分小部件和原生 Framer 组件。

圆角半径。 Framer 在大多数组件中默认为 12 px。匹配它会使小部件消失在设计中。

徽标和头像。 上传透明 PNG。启动器按钮尊重 PNG；AI 头像出现在每个机器人消息旁边。

保存。在隐身模式下重新打开你的 Framer 网站。小部件现在与设计的原生部分难以区分。

在称其为完成之前的最后两步。

限定小部件范围。 默认情况下，Chatloom 在 Framer 网站的每个页面上显示。如果你想从定价页面中移除它（在企业交易中很常见，你希望销售团队可见），使用小部件的 Visibility rules：排除匹配 /pricing、/contact 或你想要的任何模式的 URL。

设置问候。 在构建器 Messages 部分，写一个简短的欢迎行（"嘿 —— 我可以回答关于 Framer 集成、定价或入门的问题。你在做什么？"）和 3-5 个建议提示。建议提示是整个小部件中最高杠杆的转化元素；人们点击它们的次数远多于打字。

测试。 在隐身模式下打开网站，从不同的入口页面进行完整对话，特别是询问你知道文档中尚不存在的问题。观察机器人如何处理"我不知道" —— 如果它产生幻觉，将缺失的答案添加到知识库并重新测试。提前五分钟可以防止一周的糟糕对话。

这就是完整的工作流程。大多数 Framer 创始人在不到 15 分钟内完成整个序列，之后再也不碰嵌入脚本。