网站嵌入AI助手
为了提升用户体验和增强业务竞争力，越来越多的企业会构建 AI 助手，以便全天候（7x24）回应客户咨询。在百度智能云上，您无需编写代码，即可快速为网站添加一个 AI 助手。
只需几步，即可为网站添加一个 AI 助手
方案架构
借助千帆 AppBuilder，应用发布后可直接选择"网站嵌入"渠道，获取一段 JavaScript 嵌入代码，插入网站前端即可让访客直接在页面上与 AI 助手对话。 相比阿里云需要通过 AppFlow 这一独立产品完成"模型服务"与"网页"之间的对接，千帆 AppBuilder 的应用发布环节自带网站嵌入渠道，创建应用到拿到嵌入代码之间少了一层中间产品，配置路径更短。
部署步骤
Step 1. 创建大模型问答应用
- 登录百度智能云千帆 AppBuilder 控制台，进入应用管理页面，点击"创建应用"，弹出"创建 Agent"窗口。
- 窗口提供三种创建方式：
- 空白创建：从零配置，需先选择 Agent 类型
- 模板创建：从官方模板库中选择已配置好的 Agent（如汽车专家、旅行规划专家、百度优选智能购物助手等），基于模板快速改造成自己的场景。
- AI 创建：用一句话描述需求（如"创建一个能查天气、查航班的应用"），由 AI 自动生成 Agent 配置，当前仅支持生成自主规划 Agent 类型，生成内容仅供参考，建议生成后再人工核对调整。
在当前的网站智能客服场景，建议选择"空白创建"→"自主规划 Agent"，或从模板库中挑选客服/问答类模板作为起点。
- 填写 Agent 名称、描述（将在应用发布后固定展示），可选配置头像，点击"确定"完成创建。
- 在应用配置页面选择模型，根据问答场景的推理效果、成本和速度需求选择合适档位。
- 在"角色指令"中填写 Prompt，设置 AI 助手的人设，例如：
1你叫AI小助手，可以帮助用户解答产品选购、使用等方面的问题。- 在页面右侧可以直接提问验证模型效果。此时它还无法准确回答您公司的商品信息，这一点将在第 3 步通过知识库解决。
- 点击右上角"发布"，进入多渠道发布管理页面。
Step 2. 发布为网站嵌入渠道，获取嵌入代码
- 在多渠道发布管理页面找到"网站嵌入"，点击配置。
- 确认嵌入网站信息：可为网站命名，用于区分不同域名产生的调用量；如需绑定具体域名，在此处配置（用于限制允许调用服务的来源方，提升资源安全性；调试阶段可先不配置，正式上线前请务必完成域名配置）。
-
获取嵌入代码时，可选择两种嵌入方式：
- 全页面：将应用对话页面完整铺开并嵌入到目标页面中，体验更沉浸，可展示更多内容
- 聊天气泡：以对话窗口的形式悬浮在页面上，可在浏览页面其他内容时随时开启或关闭
- 复制生成的 JavaScript 代码，参数说明如下：
| 参数名称 | 类型 | 是否必选 | 说明 |
|---|---|---|---|
| appId | string | 必选 | 应用 ID |
| code | string | 必选 | 鉴权密钥，一个网站下所有域名共享，如意外泄露请及时重新生成并再次嵌入网站 |
| renderConfig.width | string | 可选 | 全页面嵌入时对话窗口宽度，默认 100% |
| renderConfig.height | string | 可选 | 全页面嵌入时对话窗口高度，默认 100% |
示例代码
1 以下代码请放入前端html文件的body内
2
3<script src="https://agi-dev-platform-web.cdn.bcebos.com/ai_apaas/embed/output/embedLiteSDK.js"></script>
4
5<script>
6 new EmbedLiteSDK({appId: '您的应用ID', code: '您的鉴权密钥'});
7 </script>- 将代码粘贴到网站 HTML 的
标签内，刷新页面即可看到 AI 助手。
Step 3. 为 AI 助手增加私有知识
通过前面的步骤，我们已经拥有了一个可以和客户对话的 AI 助手。但如果想让 AI 助手像公司员工一样，精准且专业地回答与商品相关的问题，还需要为应用配置知识库。
假设您在一家售卖智能手机的公司工作，网站上会有很多与智能手机相关的信息，如支持双卡双待、屏幕、电池容量、内存等。可以让大模型在面对客户问题时参考这些文档，产出更准确的回答。
- 进入应用配置页面的"知识库"模块，点击"创建知识库"。
- 上传产品说明文档（支持 PDF、Word、网页等格式）。
- 选择切分方式（按标点符号或固定长度切分文档），系统会自动对文档分片并提取关键信息构建索引。
- 将知识库与应用关联，保存配置。
- 返回对话调试页面，验证 AI 助手能否基于上传的文档准确回答产品相关问题。
使用须知
当您使用该服务将应用嵌入自有网站时，应确保您的终端用户在已完成实名认证的前提下进行应用对话，且嵌入的网站所提供的服务应严格遵守法律法规、监管政策，以及相关服务协议、用户协议、隐私协议等协议规定。
常见问题
网站嵌入后看不到对话窗口，或出现请求错误
- 检查嵌入代码中的 appId 和 code 是否与应用详情页面一致。
- 确认域名白名单配置正确：如果已配置域名白名单，当前访问网站的域名必须在白名单内，否则请求会被拦截。
- 使用浏览器开发者工具（F12）查看控制台和网络请求，确认请求是否发送到了正确的服务地址。
- 如果自定义了前端组件样式，确认没有覆盖或屏蔽嵌入代码生成的容器元素。
技术方案的广泛应用场景
企业官网智能客服
7×24 小时响应网站访客咨询，替代或补充人工客服首轮问答，结合知识库回答产品选型、售后政策等常见问题，可选择聊天气泡形式减少对页面原有布局的干扰。
电商详情页导购助手
嵌入商品详情页，基于产品知识库回答用户的选购疑问，减少因信息不对称导致的流失。
百度智能云为您提供云产品免费试用
- 千帆 AppBuilder：新用户可领取应用创建与模型调用的免费体验额度
-
相关文档：
评价此篇文章