跳到主要内容
版本：2.0.x

使用 EmbeddedAgent 将 Agent 嵌入外部网页

EmbeddedAgent 引用已有的 Agent 实例，将其包装后嵌入第三方网站。网页可调用 Agent，Agent 也可调用网页暴露的 JavaScript 函数，实现双向交互。

EmbeddedAgent 适合什么场景​

核心优势：AI 操控网页 + 网页驱动 AI 的双向交互能力。

典型场景：企业官网智能客服、SaaS 产品内嵌 AI 助手、已有系统的 AI 赋能（无需改造后端）。

创建和配置​

在元素目录树中依次点击 +、AI Agent、Embedded Agent，填写名称后进入编辑器。

编辑器包含三个页签：表单配置、嵌入代码、源码。

关联 Agent 和基本设置​

  • 选择要嵌入的 Agent 实例
  • 设置占位符文本、欢迎语、开场白（预置问题列表）

控制访问安全​

  • AccessKey：网页认证密钥，可生成和刷新
  • 域名白名单：限制可嵌入的域名
  • 认证回调 URL：用户身份验证接口
  • 允许无 Referer 访问：支持本地开发调试

嵌入网页​

编辑器自动生成嵌入代码，复制到网页中即可使用。需要引入 JS SDK。

JS SDK 功能​

嵌入代码通过 JS SDK 提供以下能力：

  • 初始化嵌入：配置容器、认证信息和外观（欢迎语、开场白等）
  • 发送消息：网页主动触发 AI 执行任务
  • 监听事件：订阅 AI 执行过程中的状态变化
  • 注册网页函数：将网页中的 JavaScript 函数注册为 AI 可调用的工具
  • 驱动 AI：通过按钮点击等交互向 AI 提问或触发分析

双向交互​

AI 调用网页函数​

在平台中声明可供 AI 调用的函数，然后在网页中实现这些函数并通过 SDK 注入。SDK 也内置了一些常用函数，如获取页面文本内容的 getPageInnerText、获取页面 HTML 的 getPageInnerHtml。

网页驱动 AI​

通过按钮点击触发 AI 分析，或网页主动向 AI 提问。

完整示例​

以客户管理系统为例，一个典型集成流程是：

  • 在平台中创建用于客户服务的 Agent，并验证它能回答客户、订单和售后问题。
  • 创建 EmbeddedAgent，关联该 Agent，并配置访问控制、欢迎语和预置问题。
  • 将编辑器生成的嵌入代码放到客户管理系统页面中。
  • 在网页中注册客户详情查询、页面跳转、表单填充等可供 AI 调用的函数。
  • 用真实页面测试双向交互：用户在网页中触发 AI，AI 根据页面上下文给出建议或调用网页函数。