Feedback Widget

Add a Feedback Widget plugin to your Next.js Supabase SaaS Starter kit

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 install feedback

Now, install the plugin from your main app by adding the following to your package.json file:

apps/web/package.json
{ "dependencies": { "@kit/feedback": "workspace:*" } }

And then run pnpm install to install the plugin.

Add the migrations

Since the feedback relies on a new table in the database, you will need to run the migrations to create the table. Please create a new migration file:

pnpm --filter web supabase migration new feedback

And copy the content of the migration file from the plugin repository to your new migration file.

Run the reset command to apply the migration:

pnpm run supabase:web:reset

Import the component

Now, you can import the component from the plugin:

import { FeedbackPopup } from '@kit/feedback';

And use it in your app:

<FeedbackPopup> <Button>Gimme feedback</Button> </FeedbackPopup>

You can also import the form alone - so you can customize its appearance:

import {FeedbackForm} from '@kit/feedback';

And use it in your app:

<FeedbackForm/>

Adding the Admin Panel pages

Add the following to your apps/web/admin/feedback/page.tsx file:

apps/web/admin/feedback/page.tsx
import { FeedbackSubmissionsPage } from '@kit/feedback/admin'; export default FeedbackSubmissionsPage;

And the submission detail page at apps/web/admin/feedback/[id]/route.tsx:

apps/web/admin/feedback/[id]/page.tsx
import { FeedbackSubmissionPage } from '@kit/feedback/admin'; export default FeedbackSubmissionPage;

Add the sidebar item to apps/web/app/admin/_components/admin-sidebar.tsx:

apps/web/app/admin/_components/admin-sidebar.tsx
<SidebarItem path={'/admin/feedback'} Icon={<MessageCircle className={'h-4'} />} > Feedback </SidebarItem>

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS