Install guides / SvelteKit

Bug reports from your SvelteKit app

src/app.html is the page template every route renders into, so the widget goes there once. SvelteKit's client-side navigation only replaces what's inside %sveltekit.body%, so the widget stays on the page.

The tag, in src/app.html

After the element that wraps %sveltekit.body%:

src/app.html

<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
  <script
    src="https://app.brainbox.sh/widget.js"
    data-project="pk_your_project_key"
    data-endpoint="https://app.brainbox.sh/ingest"
  ></script>
</body>

If you set a Content Security Policy in SvelteKit's csp option, add https://app.brainbox.sh to script-src and connect-src.

Who is signed in

Return the user from your root layout's load, then hand it to the widget in the layout component. Effects only run in the browser.

src/routes/+layout.svelte

<script lang="ts">
  let { data, children } = $props()

  $effect(() => {
    const user = data.user
    if (user) window.Brainbox?.identify({ id: user.id, email: user.email, name: user.name })
  })
</script>

{@render children()}

TypeScript

window.Brainbox comes from a script tag, so TypeScript doesn't know it. Declare it once:

src/brainbox.d.ts

declare global {
  interface Window {
    Brainbox?: {
      identify(user: { id?: string; email?: string; name?: string }): void
      open(): void
      start(mode: "screenshot" | "record" | "feature"): void
      close(): void
    }
  }
}

export {}

Your own button

Any element marked data-brainbox opens the widget, in any component. 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.

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.

Try it before you install it

The button in the corner of this page is the real widget. Report something on this page and it lands in our inbox, the way your users’ reports will land in yours.

Get started