监控

使用你自己的按钮

安装 feedbackWidget: false + Blipit.openReport()

浏览器 SDK 会在每个页面的角落放置一个“报告问题”按钮。如果你的应用已有帮助菜单或页头按钮，可以关闭悬浮按钮，从那里打开同一个报告器：截图、标注、元素选择器、录屏和上下文的工作方式完全相同。

1关闭悬浮按钮

向 init 传入 feedbackWidget: false。只有按钮会消失；报告器打开时仍会加载项目的小组件设置。

html

<script src="https://blipit.io/sdk/0.3.2/blipit.js"></script>
<script>
  Blipit.init({ key: "<public key>", feedbackWidget: false });
</script>

2从任意元素打开报告器

attachReport(element) 会在点击该元素时打开报告器。openReport() 可从你自己的代码中打开，例如菜单项或键盘快捷键。

html

<button id="report-bug">Report a bug</button>
<script>
  Blipit.attachReport(document.getElementById("report-bug"));
</script>

从你自己的代码

menu.on("report", () => Blipit.openReport());

3React 和 Next.js

@blipit/nextjs 和 @blipit/browser 都导出 openReport 和 attachReport。向 Blipit 组件传入 feedbackWidget={false}，然后在任意客户端组件中调用 openReport()。

tsx

"use client";
import { Blipit, openReport } from "@blipit/nextjs";

export function Monitoring() {
  return <Blipit publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!} feedbackWidget={false} />;
}

export function ReportBug() {
  return <button onClick={() => openReport()}>Report a bug</button>;
}

4或保留悬浮按钮，仅显示图标

如果你想保留悬浮按钮但让它更小，可在控制台中项目的问题报告小组件设置里，将“按钮样式”设为“仅图标”，或在代码中设置 style。按钮会变成同色的圆形图标；文字保留为提示和读屏标签。代码中的选项优先于控制台设置。

Blipit.init({ key: "<public key>", feedbackWidget: { style: "icon" } });

须知

报告器本身（blipit-report.js）在首次打开时从 blipit.js 所在的同一目录加载；如果你的网站设置了内容安全策略（CSP），请将 https://blipit.io 加入 script-src。
在控制台中隐藏按钮会在所有使用该密钥的网站上隐藏它；openReport() 和 attachReport() 在那里依然可用。

遇到问题？发邮件至 support@blipit.io。每个项目的密钥和确切的 DSN 在 app.blipit.io 的“API 密钥”下。