腾讯云智能体平台 ADP Chatbot 前端部署教程

<iframe
  src="https://adp-chat-ui.vercel.app" //此处替换为你的部署地址
  style="width: 100%; height: 600px; border: 0;"
  allow="clipboard-write *; microphone; camera"
></iframe>

你可以根据页面需要调整宽高与样式。

方式二：用 script 动态注入悬浮窗（简易版）

在任意网页底部加入如下脚本，即可生成一个固定在右下角的聊天悬浮窗：

<script>
(function () {
  var url = 'https://adp-chat-ui.vercel.app'; // 你的部署地址
  var iframe = document.createElement('iframe');
  iframe.src = url;
  iframe.style.cssText = [
    'position:fixed',
    'right:24px',
    'bottom:24px',
    'width:380px',
    'height:600px',
    'border:1px solid #e5e7eb',
    'border-radius:12px',
    'box-shadow:0 10px 30px rgba(0,0,0,.15)',
    'z-index:2147483647',
    'background:#fff'
  ].join(';');
  iframe.setAttribute('allow', 'clipboard-write *; microphone; camera');
  document.body.appendChild(iframe);
})();
</script>

方式三：一行脚本（推荐）

本仓库已在 public/ 提供优化的 embed.min.js，部署后可通过一行脚本接入。特性包括：

🎨 与主应用配色一致：使用 teal 色系 (#0d9488)
✨ 流畅动画效果：展开/收起带 0.2s 缓动动画
🎯 优化图标设计：28x28 像素清晰聊天图标
🧹 简洁界面：无冗余标题，专注聊天体验
💾 状态记忆：localStorage 保存展开/最小化状态

最简接入

<script>
  window.adpChatbotConfig = {
    baseUrl: 'https://adp-chat-ui.vercel.app' // 替换为你的部署域名
  };
</script>
<script src="https://adp-chat-ui.vercel.app/embed.min.js" defer></script>

完整配置示例

<script>
  window.adpChatbotConfig = {
    baseUrl: 'https://adp-chat-ui.vercel.app', // 你的部署域名
    width: 380,           // 聊天窗宽度
    height: 600,          // 聊天窗高度
    right: 24,            // 距离右边距离
    bottom: 24,           // 距离底部距离
    bubbleColor: '#0d9488', // 气泡按钮颜色（默认 teal 色）
    iframePath: '/',      // 聊天页面路径
    allow: 'clipboard-write *; microphone; camera' // iframe 权限
  };
</script>
<script src="https://adp-chat-ui.vercel.app/embed.min.js" defer></script>

调用控制

// 在外部页面中可随时控制：
window.ADPChatbot.open();   // 打开
window.ADPChatbot.close();  // 最小化
window.ADPChatbot.toggle(); // 切换

样式自定义

<style>
  /* 自定义气泡按钮颜色 */
  [data-adp-chatbot="bubble"] {
    background-color: #your-color !important;
  }
  
  /* 自定义聊天窗尺寸 */
  [data-adp-chatbot="wrap"] {
    width: 400px !important;
    height: 650px !important;
  }
</style>

:::warning[注意事项]

该嵌入方式不会暴露 TENCENT_SECRET_ID/KEY 等敏感信息：iframe 内的应用会自行调用其同域的 /getDemoToken 接口完成鉴权
确保部署域名允许被其它站点 iframe：不要设置 X-Frame-Options: DENY，若使用 CSP，请为 frame-ancestors 配置允许的上级域名
若目标站点使用严格的 CSP，请为 script-src/frame-src 增加你的部署域名
高级联动（如页面与聊天窗的双向通信）可通过 postMessage 实现 :::