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