@dnosaj/feedback-widget

Drop-in floating feedback widget for React prototypes. Single <FeedbackWidget /> component, shadow-DOM isolated, talks to the feedback-service backend at a URL you provide.

Install

npm install github:studioEIGen/feedback-widget
# or pin to a tag:
npm install github:studioEIGen/feedback-widget#v0.1.0

Use

// app/layout.tsx (Next.js App Router)
import { FeedbackWidget } from "@dnosaj/feedback-widget";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <FeedbackWidget
          projectSlug="report-analyzer"
          apiUrl={process.env.NEXT_PUBLIC_FEEDBACK_API_URL}
          userName={session?.user?.name}           // optional
          hideOnPaths={["/login", "/legal"]}       // optional
        />
      </body>
    </html>
  );
}

.env.local

NEXT_PUBLIC_FEEDBACK_API_URL=https://your-feedback-service.vercel.app

Props

| Prop | Type | Required | Notes | |---|---|---|---| | projectSlug | string | yes | Must match a row in the service's projects table. | | apiUrl | string | at least one | Overrides NEXT_PUBLIC_FEEDBACK_API_URL. | | userName | string | no | Pre-fills the name field. Overrides localStorage + URL param. | | hideOnPaths | string[] | no | Suppress the pill on these paths. | | position | "bottom-right" | "bottom-left" | no | Default bottom-right. | | onSubmit | (fb) => void | no | Called after successful submit. |

Connecting a new prototype

1. Go to the Feedback Admin and click + next to the project dropdown.
2. Enter a name — the slug auto-generates (this is what you pass to projectSlug). Hit Create project.
3. Copy the env var snippet and add it to your prototype's .env.local:

   NEXT_PUBLIC_FEEDBACK_API_URL=https://feedback-service-nu.vercel.app

4. Add the widget to your layout with the slug from step 2:

   <FeedbackWidget projectSlug="your-slug" apiUrl={process.env.NEXT_PUBLIC_FEEDBACK_API_URL} />

That's it. The project accepts submissions from any origin by default — no extra configuration needed.

Tip: After creating the project, double-check the slug in the admin dropdown or in Supabase → projects table. If the project name had a trailing space, the slug may end with a dash (e.g. my-project-). Fix it in the table before wiring up the widget, or you'll get a 404 "unknown_project" error on submit.

What's captured

Every submission includes: page URL, page path, viewport size, user-agent, timestamp, plus the text + category + optional screenshot.

Keyboard shortcuts

• ⌘⇧F / Ctrl⇧F toggles the panel
• Esc closes it

Deferred to stage 2

• Pen/arrow annotation on screenshots
• Voice capture + transcription
• Three capture modes (anonymous / session pseudonyms / QR handoff)
• Claude Code auto-plan pipeline

See the design spec for the full roadmap.