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

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/public/locales/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:

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/>

Admin Panel

The admin pages and sidebar item are automatically set up by the CLI. You can find them at:

  • apps/web/app/admin/feedback/page.tsx — Feedback submissions list
  • apps/web/app/admin/feedback/[id]/page.tsx — Submission detail page