One script tag, any site

The tag

<script
  src="https://app.brainbox.sh/widget.js"
  data-project="pk_your_project_key"
  data-endpoint="https://app.brainbox.sh/ingest"
></script>

Your project key is in the dashboard. It is public by design: it only lets a page send reports to your project, and it ships in your HTML.

Options

Who is signed in

After the tag, call identify() with whatever you know about the user. Calls made before the widget has finished starting are kept and applied.

<script>
  window.Brainbox.identify({ id: "u_123", email: "maya@example.com", name: "Maya Patel" })
</script>

setFields() adds your own details to every report, shown under the person who sent it: window.Brainbox.setFields([{ label: "Plan", value: "Pro" }]).

Your own button

Any element marked data-brainbox opens the widget, anywhere on the page. screenshot goes straight to marking up the page, record to a recording of the page and feature to a feature request; an empty value opens the chooser. Clicks are delegated, so elements rendered later work too.

<button data-brainbox="screenshot">Report a bug</button>
<button data-brainbox="feature">Request a feature</button>

From code, window.Brainbox.open() shows the chooser and window.Brainbox.start("feature") goes straight to one flow. To hide our floating button and keep only yours, add data-mode="mount" to the tag.

After a report is sent

The widget fires brainbox:submitted on window, with the report's id, for a thank-you of your own or your analytics:

<script>
  window.addEventListener("brainbox:submitted", (event) => {
    console.log("report", event.detail.id)
  })
</script>

Pages that swap their body

Some tools navigate by replacing <body> instead of loading a page: Turbo, Livewire's wire:navigate, htmx's hx-boost, Astro's view transitions. The widget moves itself into each new body and ignores a second run of its tag, so it stays on the page, once.

Passwords and personal data

Typed values are always masked in recordings, so passwords, emails and card numbers never leave the browser as plain text. Add the rr-block or rr-mask class to anything else you want kept out.