Browser JavaScript SDK

<script src="/static/churn-warn.umd.min.js"></script>
<script>
ChurnWarn.configure({
  apiKey: "<your-bearer-token>",
  serverUrl: "https://your-gateway.example.com", // omit if same-origin
  tenantId: "00000000-0000-0000-0000-000000000000", // optional
  autoCapture: true
});

// After login, once you know the account id:
ChurnWarn.identify("account-external-id-123");
</script>

ChurnWarn.captureEvent("acct-1", ChurnWarn.Metrics.FEATURE_USED, { feature: "export_csv" });
ChurnWarn.captureEvent("acct-1", ChurnWarn.RawEvents.APP_LOGIN);

Add the ChurnWarn browser SDK to this web app.

How it works: load churn-warn.umd.min.js, call ChurnWarn.configure({ ... }) once as early as
possible, and ChurnWarn.identify("<account-id>") right after login. With autoCapture on it
then emits page views, sessions, clicks, feature usage, rage clicks, form abandonment and JS
errors on its own. Manual events use ChurnWarn.captureEvent(accountId, name, extraData?) —
fire-and-forget, never throws.

Please:
1. Load the script and call configure({ apiKey: "<bearer-token>", serverUrl: "<gateway-url or
 omit if same-origin>", autoCapture: true }) as early in page load as possible.
2. Call identify("<account-id>") as soon as the account id is known after login, using the
 account id from our own system (the org/tenant id, not the per-user id). Call it on every
 page load for a logged-in user so the first session and page view aren't missed.
3. Tag the value-delivering UI sections with data-feature="<name>" so feature usage is
 captured automatically, and put stable names on key buttons with
 data-churn-warn-label="<name>".
4. Mark any sensitive UI with data-churn-warn-ignore.

Don't manually send page_viewed / session / click / error events — autoCapture covers those.

Add the client-side business signals that feed ChurnWarn's default Product Health dashboard
but are NOT auto-captured, using ChurnWarn.captureEvent("<account-id>", name, extraData?).
autoCapture already handles page views, sessions, clicks, feature usage, frustration and JS
errors — don't duplicate those. Add only the signals below, each in the handler described:

- ChurnWarn.Metrics.ONBOARDING_COMPLETED — in the final step of your onboarding/setup flow
(the "Finish"/"Done" handler, or the effect that marks onboarding complete). Fire once.
- ChurnWarn.Metrics.PLAN_UPGRADED — on the upgrade-success / checkout-confirmation screen
(the component shown after a successful upgrade). Fire once.
- ChurnWarn.Metrics.NPS_RESPONSE — in your NPS survey widget's submit handler.  { score: <0-10> }
- ChurnWarn.Metrics.CSAT_RESPONSE — in your CSAT survey widget's submit handler. { score: <1-5> }
- ChurnWarn.Metrics.REFERRAL — in the success handler of your referral/invite flow (a referral
sent or accepted).
- ChurnWarn.Metrics.FEATURE_USED — only for a feature that is NOT inside a data-feature
section; call it in that feature's own click/use handler.  { feature: "<name>" }

Use the same account id you pass to ChurnWarn.identify().

Make these changes non-breaking — they must be pure additive telemetry:
- Add captureEvent only inside existing handlers, in the success branch (inside the .then /
after the await resolves), as a side-effect. Never change component logic, state, props, or
what a handler returns.
- captureEvent never throws and is non-blocking — do NOT await it and do NOT wrap surrounding
UI code in new try/catch for it.
- Guard one-time events (onboarding, upgrade) so React re-renders / StrictMode don't
double-fire them (use a ref, or an effect with correct dependencies).
- Don't re-send anything autoCapture already covers, and don't re-call configure or identify.
- If you can't confidently find the right handler for a signal, SKIP it and leave a
// TODO: ChurnWarn <metric> here comment instead of guessing.