diff --git a/env.example b/env.example
index cba2e10..94d339e 100644
--- a/env.example
+++ b/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
diff --git a/package.json b/package.json
index 642592b..853cfeb 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a22915..aa72161 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/app/[locale]/(marketing)/(home)/page.tsx b/src/app/[locale]/(marketing)/(home)/page.tsx
index c6fb25e..8b7adcf 100644
--- a/src/app/[locale]/(marketing)/(home)/page.tsx
+++ b/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) {
+
+
>
);
diff --git a/src/components/layout/crisp-chat.tsx b/src/components/layout/crisp-chat.tsx
new file mode 100644
index 0000000..8140527
--- /dev/null
+++ b/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;
diff --git a/src/config/website.tsx b/src/config/website.tsx
index a91bbf1..1b16d83 100644
--- a/src/config/website.tsx
+++ b/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,
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index d01e3d7..7e1c6eb 100644
--- a/src/types/index.d.ts
+++ b/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