Loading...
Loading...
The FeedbackWidget component provides a subtle, inline feedback collection form placed at the bottom of content areas. It supports logged-in users by automatically capturing user information and hiding redundant fields.
When no user is provided, the widget shows an optional email field for follow-up.
This is example content for a page. The feedback widget will appear at the bottom of the content area, allowing users to provide feedback, corrections, tips, and suggestions.
Scroll down to see the feedback widget in its collapsed state. Click it to expand and see the full feedback form.
When a user is provided, the email field is hidden and the user ID is automatically included in the submission.
For logged-in users, the feedback widget automatically captures their user ID and hides the email field to streamline the submission process.
The user's email from their account is automatically included in the submission data for follow-up purposes.
The widget automatically captures page context including page type, title, and URL.
Recipe content would go here...
Restaurant details would go here...
Attraction information would go here...
The collapsed state shows both the "Help improve this page" button and a "Support us" donate button stacked vertically.
Example page content would go here. The feedback widget appears at the bottom with both buttons.
Preview of the thank you state that appears inline in the button after successful submission. The buttons are replaced with a single thank you message. This state auto-dismisses after 3 seconds in the actual component.
Example page content would go here. After the user submits feedback, the buttons at the bottom are replaced with a thank you message.
import { FeedbackWidget } from '@/components/composite/FeedbackWidget';
// Without user (shows email field)
<FeedbackWidget
pageId={page.id}
pageType="city"
pageTitle={page.title}
onSubmit={handleFeedbackSubmit}
/>
// With logged-in user (hides email field, auto-includes user ID)
<FeedbackWidget
pageId={page.id}
pageType="city"
pageTitle={page.title}
user={{
id: session.user.id,
email: session.user.email,
name: session.user.name
}}
onSubmit={handleFeedbackSubmit}
/>pageId?: stringUnique identifier for the page
pageType?: 'city' | 'region' | 'restaurant' | 'recipe' | 'attraction' | 'article' | 'general'Page type for categorization
pageTitle?: stringPage title for context
user?: { id: string; email?: string; name?: string }User info if logged in (auto-populates, hides email field)
onSubmit?: (feedback: FeedbackData) => Promise<void> | voidSubmission handler function
After successful submission, the collapsed button updates inline to show "Thank You!" with a checkmark icon. This state auto-dismisses after 3 seconds and returns to the normal "Help improve this page" button. To customize its appearance, edit the collapsed state section in the FeedbackWidget component.
border-t border-pietra-vecchia/20ghostsm@/components/icons, w-4 h-4)text-oliva-secca (brand olive color)text-oliva-secca to any brand color (e.g., text-terra-siena)LogoIcon component from @/components/icons for consistency