7ebff31475
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
70 lines
1.8 KiB
Plaintext
70 lines
1.8 KiB
Plaintext
---
|
|
status: "published"
|
|
title: 'Add a Feedback Widget plugin to your Next.js Supabase SaaS Starter kit'
|
|
label: 'Feedback Widget'
|
|
order: 5
|
|
description: 'Add a Feedback Widget plugin to your Next.js Supabase SaaS Starter kit'
|
|
---
|
|
|
|
This plugin is a lighter version of the Roadmap plugin. It is recommended to install the Roadmap plugin if you need more features.
|
|
|
|
The feedback plugin allows you to add a feedback widget to your app. Users can provide feedback on your app, and you can view and manage feedback submissions in the admin panel.
|
|
|
|
### Installation
|
|
|
|
Pull the plugin from the main repository:
|
|
|
|
```
|
|
npx @makerkit/cli@latest plugins add feedback
|
|
```
|
|
|
|
The codemod will automatically:
|
|
- Add the `@kit/feedback` dependency and install packages
|
|
- Add the feedback sidebar item to the admin panel
|
|
- Create the translation file at `apps/web/i18n/messages/en/feedback.json`
|
|
- Add the `feedback` namespace to your i18n settings
|
|
- Create the Supabase migration file for the feedback table
|
|
|
|
### Run the migrations
|
|
|
|
After installation, run the migration and regenerate types:
|
|
|
|
```
|
|
pnpm run supabase:web:reset
|
|
pnpm run supabase:web:typegen
|
|
```
|
|
|
|
### Import the component
|
|
|
|
Now, you can import the component from the plugin:
|
|
|
|
```tsx
|
|
import { FeedbackPopup } from '@kit/feedback';
|
|
```
|
|
|
|
And use it in your app:
|
|
|
|
```tsx
|
|
<FeedbackPopup>
|
|
<Button>Gimme feedback</Button>
|
|
</FeedbackPopup>
|
|
```
|
|
|
|
You can also import the form alone - so you can customize its appearance:
|
|
|
|
```tsx
|
|
import {FeedbackForm} from '@kit/feedback';
|
|
```
|
|
|
|
And use it in your app:
|
|
|
|
```tsx
|
|
<FeedbackForm/>
|
|
```
|
|
|
|
## Admin Panel
|
|
|
|
The admin pages and sidebar item are automatically set up by the CLI. You can find them at:
|
|
|
|
- `apps/web/app/[locale]/admin/feedback/page.tsx` — Feedback submissions list
|
|
- `apps/web/app/[locale]/admin/feedback/[id]/page.tsx` — Submission detail page |