add crisp

frontend/src/components/hosted/AppContainer.tsx

@@ -9,6 +9,7 @@ import AvatarDropdown from "./AvatarDropdown";
 import { UserResponse } from "./types";
 import { POSTHOG_HOST, POSTHOG_KEY, SAAS_BACKEND_URL } from "../../config";
 import LandingPage from "./LandingPage";
+import { loadCrispChat } from "../../lib/crisp";
 
 function AppContainer() {
   const { isSignedIn, isLoaded } = useUser();
@@ -59,12 +60,9 @@ function AppContainer() {
           last_name: user.last_name,
         });
 
-        // Initialize Help Scout Beacon
-        window.Beacon("init", "8bcd8d6f-f25d-4339-8f49-703b9f165cdc");
-        window.Beacon("identify", {
-          name: user.first_name + " " + user.last_name,
-          email: user.email,
-        });
+        // Initialize Crisp Chat
+        loadCrispChat();
+        window.$crisp.push(["set", "user:email", [user.email]]);
 
         setSubscriberTier(user.subscriber_tier);
       }

frontend/src/config.ts

@@ -28,3 +28,6 @@ export const IS_FREE_TRIAL_ENABLED = false;
 // PostHog
 export const POSTHOG_KEY = import.meta.env.VITE_POSTHOG_KEY || null;
 export const POSTHOG_HOST = import.meta.env.VITE_POSTHOG_HOST || null;
+
+// Crisp
+export const CRISP_WEBSITE_ID = import.meta.env.VITE_CRISP_WEBSITE_ID || null;

frontend/src/lib/crisp.ts

@@ -0,0 +1,32 @@
+import { CRISP_WEBSITE_ID } from "../config";
+
+export const loadCrispChat = (): (() => void) => {
+  if (document.getElementById("crisp-chat-script")) {
+    // The script element already exists, so don't add it again
+    return () => {};
+  }
+
+  window.$crisp = [];
+  window.CRISP_WEBSITE_ID = CRISP_WEBSITE_ID;
+  const d = document;
+  const s = d.createElement("script");
+  s.src = "https://client.crisp.chat/l.js";
+  s.async = true;
+  d.getElementsByTagName("head")[0].appendChild(s);
+
+  return () => {
+    // Cleanup function to remove the script when it's no longer needed
+    const scriptElement = document.getElementById("crisp-chat-script");
+    if (scriptElement && scriptElement.parentNode) {
+      scriptElement.parentNode.removeChild(scriptElement);
+    }
+  };
+};
+
+declare global {
+  interface Window {
+    // Crisp
+    $crisp: unknown[];
+    CRISP_WEBSITE_ID: string;
+  }
+}