Testimonials Plugin

Learn how to install the Testimonials plugin in the Next.js Supabase SaaS Starter kit.

This plugin allows Makerkit users to easily collect and manage testimonials from their customers. It integrates seamlessly with the existing Makerkit structure and provides both backend and frontend components.

Features

Testimonial submission form and manual entry
Admin panel for managing testimonials
API endpoints for CRUD operations
Widgets components for showing testimonials on the website

Installation

To install the plugin, run the following command:


npx @makerkit/cli plugins install

Please select the testimonial plugin from the list of available plugins.

Migration

Create a new migration file by running the following command:


pnpm --filter web supabase migration new testimonials

And place the content you can see at packages/plugins/testimonial/migrations/migration.sql into the newly created file.

Then run the migration:


pnpm run supabase:web:reset

And update the types:


pnpm run supabase:web:typegen

Once the plugin is added to your repository, please install it as a dependency in your application in the package.json file of apps/web:


{
    "dependencies": {
      "@kit/testimonial": "workspace:*"
    }
}

Now run the following command to install the plugin:


pnpm i

You can now add the Admin pages from where you can manage the testimonials. To do so, add the following code to the apps/web/app/routes/admin.testimonials._index/route.tsx file:


import { LoaderFunctionArgs } from '@remix-run/server-runtime';
 
import {
  testimonialsAction,
  testimonialsLoader,
} from '@kit/testimonial/admin/api';
import { TestimonialsPage } from '@kit/testimonial/admin/pages';
 
export const loader = (args: LoaderFunctionArgs) => {
  return testimonialsLoader(args);
};
 
export const action = (args: LoaderFunctionArgs) => {
  return testimonialsAction(args);
};
 
export default TestimonialsPage;

And now the testimonial's page at apps/web/app/routes/admin.testimonials.$id._index/route.ts:


import { LoaderFunctionArgs } from '@remix-run/server-runtime';
 
import {
  TestimonialPage,
} from '@kit/testimonial/admin/pages';
 
import {
  testimonialLoader,
  testimonialAction,
} from '@kit/testimonial/admin/api';
 
export const loader = (args: LoaderFunctionArgs) => {
  return testimonialLoader(args);
};
 
export const action = (args: LoaderFunctionArgs) => {
  return testimonialAction(args);
};
 
export default TestimonialPage;

Add the sidebar item as well at apps/web/app/routes/admin/_components/admin-sidebar.tsx:


<SidebarItem
    path={'/admin/testimonials'}
    Icon={<StarIcon className={'h-4'} />}
>
    Testimonials
</SidebarItem>

You can now run the application and navigate to the Admin panel to manage the testimonials.

Displaying the Testimonial Form

To display the testimonial form on your website, you can import the form component from the plugin and use it in your page.

Create a new component, and import the form:


import { useState } from 'react';
 
import {
  TestimonialContainer,
  TestimonialForm,
  TestimonialSuccessMessage,
  VideoTestimonialForm,
} from '@kit/testimonial/client';
 
export function Testimonial() {
  const [success, setSuccess] = useState(false);
  const onSuccess = () => setSuccess(true);
 
  if (success) {
    return <SuccessMessage />;
  }
 
  return (
    <TestimonialContainer
      className={
        'w-full max-w-md rounded-lg border bg-background p-8 shadow-xl'
      }
      welcomeMessage={<WelcomeMessage />}
      enableTextReview={true}
      enableVideoReview={true}
      textReviewComponent={<TestimonialForm onSuccess={onSuccess} />}
      videoReviewComponent={<VideoTestimonialForm onSuccess={onSuccess} />}
      textButtonText="Write your thoughts"
      videoButtonText="Share a video message"
      backButtonText="Switch review method"
    />
  );
}
 
function SuccessMessage() {
  return (
    <div
      className={
        'w-full max-w-md rounded-lg border bg-background p-8 shadow-xl'
      }
    >
      <div className="flex flex-col items-center space-y-4 text-center">
        <div className="space-y-1">
          <h1 className="text-2xl font-semibold">
            Thank you for your feedback!
          </h1>
 
          <p className="text-muted-foreground">
            Your review has been submitted successfully.
          </p>
        </div>
 
        <div>
          <TestimonialSuccessMessage />
        </div>
      </div>
    </div>
  );
}
 
function WelcomeMessage() {
  return (
    <div className="flex flex-col items-center space-y-1 text-center">
      <h1 className="text-2xl font-semibold">
        We&apos;d love to hear your feedback!
      </h1>
 
      <p className="text-muted-foreground">
        Your opinion helps us improve our service.
      </p>
    </div>
  );
}

Please customize the components as needed to fit your website's design.

API Endpoints

Please add the GET endpoint to fetch the testimonials at apps/web/app/routes/api.testimonials._index/route.ts:


import { ActionFunctionArgs } from '@remix-run/server-runtime';
 
import { createTestimonialsLoader, createAddTestimonialAction } from '@kit/testimonial/server';
 
export const action = ({ request }: ActionFunctionArgs) => {
  return createAddTestimonialAction(request);
};
 
export const loader = ({ request }: ActionFunctionArgs) => {
  return createTestimonialsLoader(request);
};

Widgets

To display the testimonials on your website, you can use the following widget:


import { TestimonialWallWidget } from '@kit/testimonial/widgets';
 
export default function TestimonialWidgetPage() {
    return (
        <div className={'flex h-full w-screen flex-1 flex-col items-center py-16'}>
            <TestimonialWallWidget />
        </div>
    );
}