brily-nps-react

React component for the Brily NPS widget. Drops a floating feedback bubble into your app, collects 0–10 Net Promoter scores + optional comments, streams them to your Brily dashboard.

• Zero CSS leakage (widget runs in Shadow DOM)
• ~5 KB gzipped, lazy-loaded
• Works with any React 17+ or 18+ app (Next.js, Remix, CRA, Vite)
• TypeScript types included

Install

npm install brily-nps-react
# or
pnpm add brily-nps-react
# or
yarn add brily-nps-react

Quick start

Grab your survey key from the Brily dashboard: NPS → your survey → Embed on your site → React tab. It looks like sk_nps_xxxxxxxxxxxxxxxxxxxxxxx.

import { BrilyNps } from 'brily-nps-react';

export default function App() {
  return (
    <>
      <YourApp />
      <BrilyNps surveyKey="sk_nps_xxxxxxxxxxxxxxxxxxxxxxx" />
    </>
  );
}

That's it. A floating bubble appears in the bottom-right corner of every page the component is mounted on. Clicking it opens the NPS card, collects a score, and silently posts to the Brily API.

Identify your users

Pass your customer's ID and/or email so the responses in the Brily dashboard are correlated to real people rather than anonymous visitors:

<BrilyNps
  surveyKey="sk_nps_..."
  customerId={user.id}
  customerEmail={user.email}
/>

The identity is used for:

• Cross-referencing responses in the Brily dashboard
• Detractor follow-up email flow
• Segmenting promoters/detractors in reports

If you don't pass these, responses are collected anonymously (IP + user-agent for basic dedup).

Auto-open after an event

By default the bubble waits for a click. For event-driven NPS (e.g. after a user saves their first project), set autoOpen:

function FirstSaveCelebration() {
  const [showNps, setShowNps] = useState(false);

  return (
    <>
      <SuccessToast onDone={() => setShowNps(true)} />
      {showNps && (
        <BrilyNps
          surveyKey="sk_nps_..."
          customerId={user.id}
          autoOpen
        />
      )}
    </>
  );
}

The 30-day per-user de-dup still applies, so a returning user won't be spammed.

Programmatic control

For fine-grained control from outside React (e.g. plain JS event handlers), use the hook:

import { useBrilyNps, BrilyNps } from 'brily-nps-react';

function FeedbackButton() {
  const { show, reset } = useBrilyNps();
  return (
    <>
      <BrilyNps surveyKey="sk_nps_..." />
      <button onClick={show}>Give feedback</button>
      <button onClick={reset}>Reset dedup</button>
    </>
  );
}

• show() — open the card immediately
• reset() — clear the local "already shown" flag (useful in dev)
• setCustomer(id, email) — update the identity at runtime

Self-hosted or staging

If you're running your own Brily instance, override the host:

<BrilyNps
  surveyKey="sk_nps_..."
  host="https://dashboard.your-company.internal"
/>

Default: https://dashboard.brily.app.

Privacy

• No cookies set by the widget
• localStorage used only for the 30-day de-dup flag (stores a timestamp)
• IP + user-agent stored server-side with each response (for debugging + fraud prevention)
• All requests go to your own Brily dashboard; nothing leaves it

License

MIT © Brily