Add Intercom (#383)

Author: mrubens

.env.example

@@ -1 +1,2 @@
 POSTHOG_API_KEY=your_posthog_api_key
+INTERCOM_APP_ID=your_intercom_app_id

docusaurus.config.ts

@@ -40,6 +40,11 @@ const config: Config = {
   onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
 
+  // Custom fields for client-side access
+  customFields: {
+    intercomAppId: process.env.INTERCOM_APP_ID,
+  },
+
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
   // may want to replace "en" with "zh-Hans".

src/components/IntercomProvider/index.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect } from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { hasConsent, onConsentChange } from '../../lib/analytics/consent-manager';
+
+// Intercom interface - it's a callable function with overloads
+interface IntercomInstance {
+  (command: 'boot', config: Record<string, unknown>): void;
+  (command: 'shutdown'): void;
+  (command: 'update', config?: Record<string, unknown>): void;
+  (command: 'show'): void;
+  (command: 'hide'): void;
+  (command: 'showMessages'): void;
+  (command: 'showNewMessage', message?: string): void;
+  (command: 'onHide', callback: () => void): void;
+  (command: 'onShow', callback: () => void): void;
+  (command: 'onUnreadCountChange', callback: (unreadCount: number) => void): void;
+}
+
+declare global {
+  interface Window {
+    Intercom?: IntercomInstance;
+    intercomSettings?: Record<string, unknown>;
+  }
+}
+
+export function IntercomProvider({ children }: { children: React.ReactNode }) {
+  const { siteConfig } = useDocusaurusContext();
+  const appId = siteConfig.customFields?.intercomAppId as string | undefined;
+
+  useEffect(() => {
+    // Only initialize if Intercom App ID is configured
+    if (!appId) {
+      return;
+    }
+
+    // Check initial consent status
+    const consentGiven = hasConsent();
+
+    if (consentGiven) {
+      loadIntercom(appId);
+    }
+
+    // Listen for consent changes
+    const cleanup = onConsentChange((granted) => {
+      if (granted) {
+        loadIntercom(appId);
+      } else {
+        shutdownIntercom();
+      }
+    });
+
+    return () => {
+      cleanup();
+      shutdownIntercom();
+    };
+  }, []);
+
+  const loadIntercom = (appId: string) => {
+    if (typeof window === 'undefined') return;
+
+    // Skip if already loaded
+    if (window.Intercom) {
+      window.Intercom('update');
+      return;
+    }
+
+    // Set up Intercom settings
+    window.intercomSettings = {
+      app_id: appId,
+      alignment: 'right',
+      horizontal_padding: 20,
+      vertical_padding: 20,
+    };
+
+    // Load Intercom script
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = `https://widget.intercom.io/widget/${appId}`;
+    
+    script.onload = () => {
+      if (window.Intercom) {
+        window.Intercom('boot', window.intercomSettings || {});
+      }
+    };
+
+    document.head.appendChild(script);
+  };
+
+  const shutdownIntercom = () => {
+    if (typeof window !== 'undefined' && window.Intercom) {
+      window.Intercom('shutdown');
+    }
+  };
+
+  return <>{children}</>;
+}

src/theme/Layout/index.js

@@ -2,14 +2,17 @@ import React from 'react';
 import OriginalLayout from '@theme-original/Layout';
 import { CookieConsent } from '../../components/CookieConsent';
 import { PostHogProvider } from '../../components/PostHogProvider';
+import { IntercomProvider } from '../../components/IntercomProvider';
 import { TeamsBanner } from '../../components/TeamsBanner';
 
 export default function Layout(props) {
   return (
     <PostHogProvider>
-      <TeamsBanner />
-      <OriginalLayout {...props} />
-      <CookieConsent />
+      <IntercomProvider>
+        <TeamsBanner />
+        <OriginalLayout {...props} />
+        <CookieConsent />
+      </IntercomProvider>
     </PostHogProvider>
   );
 }