独自のボタンを使う

1フローティングボタンをオフにする

init に feedbackWidget: false を渡します。消えるのはボタンだけで、レポーターは開くときにプロジェクトのウィジェット設定を読み込みます。

<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() は、メニュー項目やキーボードショートカットなど独自のコードから開きます。

<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() を呼び出します。

"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 と同じフォルダから読み込まれます。サイトに Content Security Policy がある場合は script-src に https://blipit.io を追加してください。
• ダッシュボードでボタンを非表示にすると、そのキーを使うすべてのサイトで非表示になります。その場合も openReport() と attachReport() は動作します。