feat: support crisp chat

env.example

@@ -161,6 +161,12 @@ NEXT_PUBLIC_AFFILIATE_PROMOTEKIT_ID=""
 NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
 TURNSTILE_SECRET_KEY=""
 
+# -----------------------------------------------------------------------------
+# Crisp
+# https://mksaas.com/docs/chat#setup
+# -----------------------------------------------------------------------------
+NEXT_PUBLIC_CRISP_WEBSITE_ID=""
+
 # -----------------------------------------------------------------------------
 # Inngest
 # https://mksaas.com/docs/jobs#setup

package.json

@@ -86,6 +86,7 @@
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
     "cookie": "^1.0.2",
+    "crisp-sdk-web": "^1.0.25",
     "date-fns": "^4.1.0",
     "deepmerge": "^4.3.1",
     "dotenv": "^16.4.7",

pnpm-lock.yaml

@@ -194,6 +194,9 @@ importers:
       cookie:
         specifier: ^1.0.2
         version: 1.0.2
+      crisp-sdk-web:
+        specifier: ^1.0.25
+        version: 1.0.25
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -4389,6 +4392,9 @@ packages:
     resolution: {integrity: sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==}
     engines: {node: '>= 0.10'}
 
+  crisp-sdk-web@1.0.25:
+    resolution: {integrity: sha512-CWTHFFeHRV0oqiXoPh/aIAKhFs6xcIM4NenGPnClAMCZUDQgQsF1OWmZWmnVNjJriXUmWRgDfeUxcxygS0dCRA==}
+
   cross-domain-safe-weakmap@1.0.29:
     resolution: {integrity: sha512-VLoUgf2SXnf3+na8NfeUFV59TRZkIJqCIATaMdbhccgtnTlSnHXkyTRwokngEGYdQXx8JbHT9GDYitgR2sdjuA==}
 
@@ -10476,6 +10482,8 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
+  crisp-sdk-web@1.0.25: {}
+
   cross-domain-safe-weakmap@1.0.29:
     dependencies:
       cross-domain-utils: 2.0.38

src/app/[locale]/(marketing)/(home)/page.tsx

@@ -10,8 +10,8 @@ import LogoCloud from '@/components/blocks/logo-cloud/logo-cloud';
 import PricingSection from '@/components/blocks/pricing/pricing';
 import StatsSection from '@/components/blocks/stats/stats';
 import TestimonialsSection from '@/components/blocks/testimonials/testimonials';
+import CrispChat from '@/components/layout/crisp-chat';
 import { NewsletterCard } from '@/components/newsletter/newsletter-card';
-import DiscordWidget from '@/components/shared/discord-widget';
 import { constructMetadata } from '@/lib/metadata';
 import { getUrlWithLocale } from '@/lib/urls/urls';
 import type { Metadata } from 'next';
@@ -73,6 +73,8 @@ export default async function HomePage(props: HomePageProps) {
         <TestimonialsSection />
 
         <NewsletterCard />
+
+        <CrispChat />
       </div>
     </>
   );

src/components/layout/crisp-chat.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { websiteConfig } from '@/config/website';
+import { Crisp } from 'crisp-sdk-web';
+import { useEffect } from 'react';
+
+/**
+ * Crisp chat component
+ * https://crisp.chat/en/
+ * https://help.crisp.chat/en/article/how-do-i-install-crisp-live-chat-on-nextjs-xh9yse/
+ */
+const CrispChat = () => {
+  useEffect(() => {
+    if (!websiteConfig.features.enableCrispChat) {
+      console.log('Crisp chat is disabled');
+      return;
+    }
+
+    const websiteId = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID;
+    if (!websiteId) {
+      console.warn('Crisp website ID is not configured.');
+      return;
+    }
+
+    try {
+      Crisp.configure(websiteId);
+      console.log('Crisp chat initialized successfully');
+    } catch (error) {
+      console.error('Failed to initialize Crisp chat:', error);
+    }
+  }, []);
+
+  return null;
+};
+
+export default CrispChat;

src/config/website.tsx

@@ -34,6 +34,7 @@ export const websiteConfig: WebsiteConfig = {
   },
   features: {
     enableDiscordWidget: false,
+    enableCrispChat: process.env.NEXT_PUBLIC_DEMO_WEBSITE === 'true',
     enableUpgradeCard: true,
     enableAffonsoAffiliate: false,
     enablePromotekitAffiliate: false,

src/types/index.d.ts

@@ -69,6 +69,7 @@ export interface SocialConfig {
  */
 export interface FeaturesConfig {
   enableDiscordWidget?: boolean;      // Whether to enable the discord widget, deprecated
+  enableCrispChat?: boolean;          // Whether to enable the crisp chat
   enableUpgradeCard?: boolean;        // Whether to enable the upgrade card in the sidebar
   enableAffonsoAffiliate?: boolean;   // Whether to enable affonso affiliate
   enablePromotekitAffiliate?: boolean;   // Whether to enable promotekit affiliate