跳转到内容
BugCapturer BugCapturer Docs

5 分钟上手：嵌入 SDK 收到第一条访客反馈

这篇带你从0到1，收获你的网站的第一条访客报告：创建项目、粘贴代码、点悬浮球。

创建项目

Section titled “创建项目”

登录 控制台 → 集成与协作 → 团队项目，按三步向导走：

  1. 给项目起名字（比如 Checkout UAT）
  2. 域名白名单 —— 允许加载组件的域名：精确（uat.example.com）或通配符（*.example.com）
  3. 路由与 Widget —— 可选绑定一个集成（飞书多维表格 / 通用 Webhook）、选悬浮球默认位置，以及匿名访客是否必须留联系方式

粘贴接入代码

Section titled “粘贴接入代码”

将接入代码粘到所有需要出现悬浮球的页面的</body> 之前：

<script>
  window.BugCapturerConfig = {
    key: "bcpk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    position: "bottom-right",
    requireContact: false,
    reporter: { uid: "", name: "", email: "" } // 按当前登录用户填，绝不写死某个人的名字
  };
</script>
<script src="https://api.bugcapturer.com/sdk/bugcapturer.js" async></script>

完成——悬浮球出现在你的站点上。每个字段的完整说明见配置项参考。

像访客一样点一下悬浮球

Section titled “像访客一样点一下悬浮球”
  1. 浏览器弹出原生的「是否允许www.xxx.com（你的网站域名）查看此选项卡」
  2. 点击允许，SDK 会抓取当前浏览器的屏幕截图
  3. 之后在编辑器内进行：标注、裁剪、写描述等；
  4. 点击提交

查看报告

Section titled “查看报告”
  • 报告出现在控制台反馈记录里（SDK 来源、可按项目筛选）
  • 绑定了集成的话，这一行会自动派发到你的系统内
  • 技术上下文随报告一起：页面 URL（参数已脱敏）、浏览器、系统、屏幕、Console 报错、失败请求

首次接入的常见情况

Section titled “首次接入的常见情况”
现象原因处理
悬浮球始终不出现key 抄错 / 项目被暂停 / 主机不在白名单SDK 与插件排错
提交返回 403页面主机未被允许把确切主机（或一级通配）加进白名单
提交返回 429触达每日限额（Free：30 条/天/项目、10 条/天/IP）等待或升级订阅
访客取消了授权弹窗拒绝了屏幕共享报告会不带截图提交