嵌入智能体交互

概述

查看示例 AIP产品官网 (opens new window)。

本方案提供一种轻量级、可配置的网页端智能体（AI Chatbot）嵌入方式。通过在页面中引入一段 <script> 标签，即可在用户选中文本或主动调用时，弹出一个内嵌聊天窗口，与指定的 AI 智能体进行交互。

该组件支持以下核心能力：

• 通过 data-* 属性灵活配置外观与行为；
• 支持“选中文本后快速咨询”功能（高亮触发）；
• 提供全局 JavaScript 函数 aiChatWidget() 手动唤起对话；
• 自动适配响应式布局，确保良好用户体验。

---

配置说明

1. 引入脚本

在 HTML 页面底部（建议在 </body> 前）添加如下 <script> 标签：

<script 
  src="https://alinesno-static.linesno.com/aip-cdn/ai-chat-widget.js" 
  id="chatbot-iframe"
  data-bot-src="AI智能体的地址"
  data-width="620"
  data-enable-highlight="true"
  data-highlight-text="💬 咨询Agent"
  data-highlight-prompt="关于以下内容，请用通俗易懂的方式解释：{text}"
></script>

⚠️ 必须包含 id="chatbot-iframe"，否则组件无法初始化。

2. 可配置参数说明

属性名	类型	必填	默认值	说明
data-bot-src	URL 字符串	✅ 是	—	智能体对话页面的完整 URL（需包含 shareId 等参数）
data-width	数字 / 百分比字符串	否	"400"	聊天面板宽度（单位：px 或 %，如 "620" 或 "90%"）
data-height	数字 / 百分比字符串	否	"600"	聊天面板高度（推荐使用 "80%" 以适配移动端）
data-enable-highlight	"true" / "false"	否	"false"	是否启用“选中文本后显示咨询按钮”功能
data-highlight-text	字符串	否	"🤖 咨询Agent"	高亮按钮上显示的文本（仅当 enable-highlight=true 时生效）
data-highlight-prompt	模板字符串	否	"关于以下内容，请用通俗易懂的方式解释：{text}"	高亮按钮上显示的文本（仅当 enable-highlight=true 时生效）

💡 data-bot-src 中的 URL 应为已发布的智能体公开链接，通常形如：
https://.../chat/publish?shareId=xxx&showHistory=false

---

功能特性

1. 手动唤起对话（全局函数）

在任意 JavaScript 上下文中，可调用：

aiChatWidget('你好，请问怎么使用这个系统？');

• 参数为预设提问内容（字符串），可为空。
• 将自动打开右侧聊天面板，并将问题自动发送给智能体。

集成示例：

<button onclick="aiChatWidget('你好，请问怎么使用这个系统？')">
  点击咨询智能体
</button>

2. 选中文本快速咨询（高亮模式）

当 data-enable-highlight="true" 时：

• 用户在页面任意位置选中文本；
• 在选区右上方自动出现浮动按钮（如 “🤖 咨询Agent”）；
• 点击按钮后，自动打开聊天面板，并将所选文本作为问题发送；
• 按 ESC 键或点击页面其他区域可关闭按钮和面板。

此功能适用于知识库、文档站、帮助中心等场景，提升用户获取信息效率。

---

其它

浏览器兼容性

• 支持现代浏览器（Chrome、Edge、Firefox、Safari 最新版）
• 不支持 IE

安全与性能

• 组件使用 iframe 隔离，不影响主站安全；
• 仅在用户交互（点击/选中）时加载 iframe，避免首屏性能损耗；
• 使用 z-index: 2147483647 确保面板始终置顶。

故障排查

• 若未显示面板，请检查控制台是否有 [aiChatWidget] 相关错误；
• 确保 data-bot-src 是有效且可公开访问的 URL；
• 确认页面未阻止第三方 iframe（如 CSP 策略限制）。