A beautiful, customizable feedback widget for React applications. Collect user feedback effortlessly with a sleek modal that integrates seamlessly into your app.
- 🎨 Customizable - Colors, position, and appearance via dashboard
- 📱 Responsive - Works on all screen sizes
- ⚡ Lightweight - Minimal bundle size
- 🔒 TypeScript - Full type support included
- 🎯 Categories - Bug reports, feature requests, questions, general feedback
# npm
npm install feedinbox
# yarn
yarn add feedinbox
# pnpm
pnpm add feedinbox
# bun
bun add feedinbox- Sign up at feedinbox.com
- Create a new project
- Copy your Project Key from the project settings
import { Feedinbox } from 'feedinbox';
function App() {
return (
<div>
<h1>My App</h1>
{/* Add the Feedinbox component */}
<Feedinbox projectKey="your-project-key" />
</div>
);
}
export default App;That's it! A feedback button will appear in the bottom-right corner of your app.
import { Feedinbox } from 'feedinbox';
function App() {
return <Feedinbox projectKey="your-project-key" />;
}Use your own button or element to open the feedback modal:
import { Feedinbox } from 'feedinbox';
function App() {
return (
<Feedinbox
projectKey="your-project-key"
trigger={
<button className="my-custom-button">
Give Feedback
</button>
}
/>
);
}Handle submission success and errors:
import { Feedinbox } from 'feedinbox';
function App() {
return (
<Feedinbox
projectKey="your-project-key"
onSubmit={(data) => {
console.log('Feedback submitted:', data);
// { message: "...", category: "bug", userEmail: "..." }
}}
onError={(error) => {
console.error('Error submitting feedback:', error);
}}
/>
);
}For Next.js 13+ with App Router, you can use it in any client component:
'use client';
import { Feedinbox } from 'feedinbox';
export default function FeedbackWidget() {
return <Feedinbox projectKey="your-project-key" />;
}Then import it in your layout or page:
// app/layout.tsx
import FeedbackWidget from './FeedbackWidget';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<FeedbackWidget />
</body>
</html>
);
}| Prop | Type | Required | Description |
|---|---|---|---|
projectKey |
string |
✅ | Your Feedinbox project key |
apiUrl |
string |
❌ | Custom API URL (default: https://feedinbox.com) |
trigger |
ReactNode |
❌ | Custom trigger element to open the widget |
onSubmit |
(data: FeedbackData) => void |
❌ | Callback when feedback is submitted |
onError |
(error: Error) => void |
❌ | Callback when an error occurs |
interface FeedbackData {
message: string;
category: 'general' | 'bug' | 'feature' | 'question';
userEmail?: string;
}All widget customization is done via the Feedinbox Dashboard:
- Primary Color - Widget accent color
- Position -
bottom-right,bottom-left,top-right,top-left - Border Radius - Roundness of the widget
- Header Text - Custom title for the widget
- Show Email Field - Toggle email input visibility
- Hide Branding - Remove "Powered by Feedinbox" (Pro feature)
Changes made in the dashboard are automatically reflected in your widget.
- React 17.0.0 or higher
- React DOM 17.0.0 or higher
MIT © Feedinbox