Quickstart

web

From zero to your first report in the inbox, in about five minutes. One script, one init call — your testers get a feedback button, you get the technical context.

1. Get your project key

Open your project's dashboard → Settings. Copy the public key (pk_live_…) and make sure the domain you'll test on is in the allowed origins list — reports from anywhere else are rejected with a 403.

2. Load the SDK

The script tag is the fastest path — it works on any stack:

index.html

<script type="module" src="https://cdn.tracebird.dev/tracebird.js"></script>
<script type="module">
  Tracebird.init({ projectKey: "pk_live_a1b2c3" });
</script>

Or install the package and initialize it from your bundle:

terminal

npm install @tracebird/web

main.ts

import { init } from "@tracebird/web";

init({
  projectKey: "pk_live_a1b2c3",
  environment: "staging",
  release: "1.4.2",
});

noteThe core is ~11 KB gzipped and loads async. The heavy pieces — session recorder, screenshot editor, DOM snapshot — are separate chunks fetched only when a tester actually uses them. The SDK never blocks your app's rendering.

noteBuilding a mobile app? The Flutter SDK follows the same flow — shake-to-report, one pub.dev package, same inbox.

3. Send your first report

Open your app — the Tracebird button sits bottom-right.
Click it, optionally hit Capture & annotate this screen and draw on the capture.
Write one sentence, send.

The report lands in your inbox with the console logs, network calls, environment and a DOM snapshot attached — the tester did nothing but click and type.

Verify it worked

In the dashboard, open your project and switch the inbox to All reports: your report appears with a live marker. Click it to see the annotated capture, the context tabs and the rebuilt DOM snapshot.

next →Configuration