Customer Support

We use Tawk.to for customer support, feel free to use any other tool.

Here is how to set it up.

Setup Customer Support

1. Register on tawk.to
2. Create a property
3. On your tawk.to dashboard navigate to
   • Administration -> Channels -> Chat Widget
   • Direct Chat Link -> copy everything after https://tawk.to/chat/ (this is your property id)
4. Add your property id to .env.local if you haven't already

NEXT_PUBLIC_TAWK_PROPERTY_ID= # Your tawk property ID here

5. Head back to last page on tawk.to under Direct Chat Link change your Widget Appearance by clicking on Advanced

That's it! 🎉

Remove Tawk.to Customer Support

You might want to use a different customer support tool or don't need one at all, follow this guide to do so

1. Remove Tawk.to environment variable from .env.local
2. Navigate to /src/app/(site)/_layout/client-providers.tsx
3. Remove <CustomerSupport /> component, it should look like this

"use client";

import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";
import { FC, PropsWithChildren } from "react";

// init posthog
const NEXT_PUBLIC_POSTHOG_KEY = process.env.NEXT_PUBLIC_POSTHOG_KEY;
if (typeof window !== "undefined" && NEXT_PUBLIC_POSTHOG_KEY) {
  posthog.init(NEXT_PUBLIC_POSTHOG_KEY, {
    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
    person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
  });
}

const ClientProviders: FC<PropsWithChildren<{ user: Nullable<AuthUser> }>> = ({
  user,
  children,
}) => {
  useScrollToHash();

  return (
    <PostHogProvider client={posthog}>
      {user && <PurchaseRedirect />}

      {children}
    </PostHogProvider>
  );
};

export default ClientProviders;

4. Remove or replace the whole component if you want from /src/app/(site)/_components/customer-support.tsx