Feedback Widget

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

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

{
  "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:

import { FeedbackSubmissionsPage } from '@kit/feedback/admin';
 
export default FeedbackSubmissionsPage;

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

import { FeedbackSubmissionPage } from '@kit/feedback/admin';
 
export default FeedbackSubmissionPage;

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

<SidebarItem
    path={'/admin/feedback'}
    Icon={<MessageCircle className={'h-4'} />}
    >
    Feedback
</SidebarItem>