如何在网站上添加 AI 客服助手（使用 Dify）

摘要：本文介绍如何使用无代码工具 Dify，在 5 个步骤内为网站搭建基于知识库的 AI 聊天机器人。无需重构设计或编写复杂代码，即可让静态站点具备智能问答能力。

您的网站已经发布了买家所需的所有信息：价格表、常见问题（FAQ）、安全说明和联系表单。然而，访客不会主动去挖掘这些信息。他们问一个问题，找不到答案，随即离开且不再回来。解决办法不是重新设计网站，而是引入一个基于事实的 AI 助手，将您现有的内容转化为即时回答。

在今天的教程中，我们将向您展示如何构建、测试并在网站上嵌入 AI 聊天机器人，全程无需编写代码。

步骤一：选择一个模板开始

在 Dify 中，您不需要从零开始搭建所有内容。只需从 客户服务与运营 (Customer Service & Operations) 类别中挑选一个模板即可。您可以先试用或查看该模板的编排详情，确认合适后再点击“基于此样本应用创建”进行定制。

设置友好的开场白以开启对话。
关闭不需要的附加功能：后续建议、文本转语音、文件上传和引用来源追踪等。

步骤二：连接您的知识库

这一步让它成为真正的企业助手，而非通用的聊天机器人。请上传 AI 应回答的内容作为知识源：产品概述、核心功能、价格体系、集成方案、安全策略、常见问题（FAQ）和支持政策等。

步骤三：编辑 LLM 提示词 (Prompt)

这是大多数人会跳过的一步，也是区分“犀利助手”与“啰嗦机器人”的关键所在。系统提示词告诉模型如何使用您的知识库：它是谁（角色）、它能说什么（指南），以及它该做什么（任务）。

一个强大的提示词应涵盖以下五个方面。以下是我们为 CloudDesk 助手设定的内容：

针对您的产品收紧上述各项设定后，提示词将确保助手持续响应、提供建议并避免为客户编造信息。

步骤四：在预览环境中测试

提出真实访客会问的问题进行测试：“哪个方案适合20人的团队？”“你们集成 Slack 吗？”"SOC 2认证准备好了吗？”。确认答案是否直接源自知识库。

这也是尝试不同模型的好时机。Dify 允许您一键切换不同的 LLM，您可以在同一组问题上运行多个模型进行对比：观察回答质量、遵循提示词的程度、响应速度以及成本效益。选择性价比最高且能胜任助手工作的模型即可。

步骤五：发布并嵌入

在 Studio 中完成测试后，现在可以发布聊天机器人应用了。点击 Publish 保存所有更新，然后点击 Embed Into Site。Dify 会为您生成即用型的嵌入式代码片段（Snippet），无需额外编写代码。

将代码片段直接插入到 </body> 标签之前即可。
如果您使用的是 React 或 Next.js，请将其添加到根布局文件（app/layout.tsx 或 pages/_app.tsx）中而不是 body 内。刷新页面后，您的静态站点就拥有了一个可用的助手。

准备就绪！

只需五个步骤，您的静态网站就变成了能基于自身内容回答问题的智能助手。无需重新设计，也无需投入工程开发资源。

Build with Dify (使用 Dify 构建)

您命名需求，我们负责实现。
如果您正在独自创业或组建小团队并自行运营一切？我们正在为个人创作者和小团队推出活动！请告诉我们您想实现的 AI 应用或工作流，我们将尽力在 Dify 上为您搭建。无需额外费用。

Take the Survey (参与调研)

FAQ（常见问题）

Q：我需要写代码才能将助手添加到网站吗？
A：不需要。Dify 会生成嵌入式代码片段。您只需发布、复制并在 </body> 标签前粘贴——或者在 React/Next.js 项目中将其加入根布局文件即可。

Q：它是如何避免胡编乱造的？
A：因为它扎根于由您控制的知识库，回答基于您的内容而非猜测。

Q：它能回答需要实时数据的问题吗？
A：可以 —— 使用 Dify 的 HTTP Request（HTTP请求）节点将其连接到您的 API。它绝不会直接触碰您的数据库。

Q：我在哪里查看所有访客提出的问题？
A：在日志中，每一段对话都会被记录并保存于此。您可以查看访客问了什么、回顾助手的回答质量，并能发现知识库中的空白之处。这不仅是买家需求的直接信号，也能指出您内容内容的不足之处。