Customer support

I currently have support for the following Customer Support tools:

• Crisp

Crisp

Sign up for an account on Crisp and create a new website.

The tracking script for Facebook can be found in the @/lib/pixels/facebook.tsx file.

Environment variables

Once you've created a new website, head over to the website settings page and click on Settings for your website.

Go to Setup Instructions and copy the Website ID and add it to your environment variables.

.env
NEXT_PUBLIC_CRISP_WEBSITE_ID="your website id"

Enable support widget

To enable the Crisp support widget, where customers can start a conversation with you, we need to import the crispChat component and add it within our SessionProvider provider.

Simply go to @/app/providers.tsx and add the following code:

@/app/providers.tsx
// ...existing imports
import dynamic from "next/dynamic";
import { FacebookPixelScript } from "@/lib/pixels/facebook";

export function Providers({ children }: { children: React.ReactNode }) {
  const { theme } = useTheme();

  // Add this line to dynamically import the Crisp component
  const CrispWithNoSSR = dynamic(() => import("@/lib/support/crisp"));

  return (
    <SessionProvider>
      <Toaster
        richColors
        position="bottom-right"
        expand={false}
        theme={theme === "dark" ? "light" : "dark"}
      />
      
      // Add the component with <SessionProvider>
      <CrispWithNoSSR />

      {children}
    </SessionProvider>
  );
}