Feedback Collector
A floating widget that automatically captures user feedback and technical metadata.
Feedback Collector
The FeedbackCollector is an all-in-one support widget. It doesn't just collect text; it automatically gathers the context developers need to fix bugs.
How To Use
Global Setup
Add it to your root layout.tsx to make it available on every page.
import { FeedbackCollector } from '@/components/ui/hatch/feedback-collector';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<FeedbackCollector />
</body>
</html>
);
}Preview
The collector button is in the bottom-right of this container.
(In a real app, it stays fixed to the viewport)
🧠 Smart Actions
When a user submits feedback, this component captures:
- Environment: User Agent, OS, Screen Resolution.
- Context: The exact URL they were on.
- Timing: Precise ISO timestamp.
- Category: Classifies as Bug, Feature, or Other.
🚀 Easy Way to Solve...
...the gap between users seeing a bug and developers having enough info to fix it. This component handles the UI, the state, and the metadata packaging out of the box.