feedbackwidget

Voice-first feedback widget with AI analysis, GitHub issues, and Slack alerts.

Quick Start

npm install @feedbackwidget/react

import { FeedbackWidget } from '@feedbackwidget/react'

function App() {
  return (
    <>
      <YourApp />
      <FeedbackWidget apiKey="fw_xxx" />
    </>
  )
}

That's it. Users can now send voice or text feedback. You get:

• Whisper transcription of voice recordings
• AI analysis (bug/feature/question classification)
• GitHub issues (if configured)
• Slack alerts (if configured)

Features

Feature	Free	Pro ($19/mo)	Team ($49/mo)
Submissions	100/mo	1,000/mo	10,000/mo
Voice duration	30s	2min	5min
Screenshots	✓	✓	✓
AI analysis	✓	✓	✓
GitHub integration	-	✓	✓
Slack integration	-	✓	✓

Props

<FeedbackWidget
  apiKey="fw_xxx"              // Required
  position="bottom-right"       // bottom-right | bottom-left | top-right | top-left
  theme="light"                 // light | dark | auto
  accentColor="#BDE0C2"        // Hex color
  allowVoice={true}            // Enable voice recording
  allowText={true}             // Enable text input
  allowScreenshots={true}      // Enable screenshot uploads
  maxVoiceDuration={120}       // Max recording seconds
  user={{                      // Optional user context
    id: "user_123",
    email: "user@example.com",
    name: "John Doe",
    plan: "pro"                // Custom attributes work too
  }}
  metadata={{                  // Custom data on every submission
    version: "1.0.0",
    environment: "production"
  }}
  onSubmit={(feedback) => {}}  // Callback after successful submission
  onError={(error) => {}}      // Callback on error
/>

Headless Hook

Build your own UI:

import { useFeedback } from '@feedbackwidget/react'

function CustomFeedback() {
  const { open, submit, isSubmitting } = useFeedback({
    apiKey: "fw_xxx"
  })

  return (
    <button onClick={open}>
      Give Feedback
    </button>
  )
}

Monorepo Structure

feedbackwidget/
├── packages/
│   └── widget/          # npm package (@feedbackwidget/react)
├── apps/
│   └── web/             # API + dashboard (api.feedbackwidget.dev)
└── supabase/
    └── schema.sql       # Database schema

Development

# Install dependencies
npm install

# Run development servers
npm run dev

# Build widget
npm run widget:build

# Publish widget
npm run widget:publish

Self-Hosting

You can self-host the API:

1. Clone this repo
2. Set up Supabase and run supabase/schema.sql
3. Configure environment variables (see .env.example)
4. Deploy apps/web to Vercel/Railway/etc.
5. Point the widget at your API:

// In your app, before rendering the widget:
window.__FEEDBACK_API_URL__ = "https://your-api.com/api/v1"

License

MIT