Add a Feedback Widget plugin to your Remix 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:

text

npx @makerkit/cli@latest plugins install feedback

Now, install the plugin from your main app:

text

pnpm add --filter web @kit/feedback

Add the translations

Add the following to your apps/web/lib/i18n/locales/en/feedback.json file:

apps/web/lib/i18n/locales/en/feedback.json

{
 "successTitle": "Thank you for your feedback!",
 "close": "Close",
 "errorTitle": "Sorry, Something went wrong!",
 "errorDescription": "Please try again later or contact us directly.",
 "contactUs": "Contact us about...",
 "email": "Email",
 "feedback": "Feedback",
 "question": "Question",
 "bug": "Bug",
 "send": "Send",
 "sending": "Sending...",
 "attachFileOrScreenshot": "Attach file or screenshot",
 "feedbackPlaceholder": "What do you like or dislike? What can we do better?",
 "questionPlaceholder": "Ask us anything",
 "bugPlaceholder": "What happened? What were you expecting to happen?",
 "uploadImage": "Upload Image"
}

Now, add the namespace to the loaded translations in your apps/web/lib/i18n/i18n.settings.ts file:

apps/web/lib/i18n/i18n.settings.ts

export const defaultI18nNamespaces = [
 'feedback',
];

Create an API route

Create an API route at routes/api.feedback._index/route.ts and call the action:

tsx

import { ActionFunctionArgs } from '@remix-run/server-runtime';
import { submitFeedbackAction } from '@kit/feedback/server';
export const action = ({ request }: ActionFunctionArgs) => {
  if (request.method !== 'POST') {
    return new Response(null, { status: 405 });
  }
  return submitFeedbackAction(request);
};

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

Adding the Admin Panel pages

Add the following to your routes/admin.feedback._index/route.ts file:

tsx

import { LoaderFunctionArgs } from '@remix-run/server-runtime';
import { FeedbackSubmissionsPage } from '@kit/feedback/admin';
import { feedbackSubmissionsLoader } from '@kit/feedback/admin/server';
import { deleteFeedbackSubmissionAction } from '@kit/feedback/server';
export const loader = ({ request }: LoaderFunctionArgs) => {
  return feedbackSubmissionsLoader(request);
};
export default FeedbackSubmissionsPage;
export const action = async ({ request }: LoaderFunctionArgs) => {
  return deleteFeedbackSubmissionAction(request);
}

Add the following to your routes/admin.feedback.$id._index/route.ts file:

tsx

import {
  ActionFunctionArgs,
  LoaderFunctionArgs,
} from '@remix-run/server-runtime';
import { FeedbackSubmissionPage } from '@kit/feedback/admin';
import { feedbackSubmissionLoader } from '@kit/feedback/admin/server';
import { deleteFeedbackSubmissionAction } from '@kit/feedback/server';
export const loader = ({ params, request }: LoaderFunctionArgs) => {
  return feedbackSubmissionLoader(request, params.id as string);
};
export default FeedbackSubmissionPage;
export const action = ({ request }: ActionFunctionArgs) => {
  return deleteFeedbackSubmissionAction(request);
};

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

tsx

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

{ "successTitle": "Thank you for your feedback!", "close": "Close", "errorTitle": "Sorry, Something went wrong!", "errorDescription": "Please try again later or contact us directly.", "contactUs": "Contact us about...", "email": "Email", "feedback": "Feedback", "question": "Question", "bug": "Bug", "send": "Send", "sending": "Sending...", "attachFileOrScreenshot": "Attach file or screenshot", "feedbackPlaceholder": "What do you like or dislike? What can we do better?", "questionPlaceholder": "Ask us anything", "bugPlaceholder": "What happened? What were you expecting to happen?", "uploadImage": "Upload Image" }

import { ActionFunctionArgs } from '@remix-run/server-runtime'; import { submitFeedbackAction } from '@kit/feedback/server'; export const action = ({ request }: ActionFunctionArgs) => { if (request.method !== 'POST') { return new Response(null, { status: 405 }); } return submitFeedbackAction(request); };

Adding the Admin Panel pages

Add the following to your routes/admin.feedback._index/route.ts file:

tsx

import { LoaderFunctionArgs } from '@remix-run/server-runtime';
import { FeedbackSubmissionsPage } from '@kit/feedback/admin';
import { feedbackSubmissionsLoader } from '@kit/feedback/admin/server';
import { deleteFeedbackSubmissionAction } from '@kit/feedback/server';
export const loader = ({ request }: LoaderFunctionArgs) => {
  return feedbackSubmissionsLoader(request);
};
export default FeedbackSubmissionsPage;
export const action = async ({ request }: LoaderFunctionArgs) => {
  return deleteFeedbackSubmissionAction(request);
}

Add the following to your routes/admin.feedback.$id._index/route.ts file:

tsx

import {
  ActionFunctionArgs,
  LoaderFunctionArgs,
} from '@remix-run/server-runtime';
import { FeedbackSubmissionPage } from '@kit/feedback/admin';
import { feedbackSubmissionLoader } from '@kit/feedback/admin/server';
import { deleteFeedbackSubmissionAction } from '@kit/feedback/server';
export const loader = ({ params, request }: LoaderFunctionArgs) => {
  return feedbackSubmissionLoader(request, params.id as string);
};
export default FeedbackSubmissionPage;
export const action = ({ request }: ActionFunctionArgs) => {
  return deleteFeedbackSubmissionAction(request);
};

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

tsx

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