Use your own button

1Turn off the floating button

Pass feedbackWidget: false to init. Only the button goes away; the reporter still loads your project's widget settings when it opens.

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

2Open the reporter from any element

attachReport(element) opens the reporter when the element is clicked. openReport() opens it from your own code, for example a menu item or a keyboard shortcut.

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

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

3React and Next.js

@blipit/nextjs and @blipit/browser export openReport and attachReport. Pass feedbackWidget={false} to the Blipit component, then call openReport() from any client component.

"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>;
}

4Or keep the floating button, icon only

If you keep the floating button but want it smaller, pick Icon only under Button style in the project's Bug report widget settings in the dashboard, or set style in code. The button becomes a round icon in the same colour; its text stays as the tooltip and the screen-reader label. Options in code win over the dashboard.

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

Good to know

• The reporter itself (blipit-report.js) loads on the first open from the same folder as blipit.js, so add https://blipit.io to script-src if your site has a Content Security Policy.
• Hiding the button in the dashboard hides it on every site that uses the key; openReport() and attachReport() still work there too.