From fae636ee80cc7ddd09378be7f2586d1d947c5794 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 1 Nov 2025 00:47:49 -0300
Subject: [PATCH 1/7] fix crisp

---
 src/app/(mobile-ui)/support/page.tsx          | 11 ++++
 src/components/CrispChat.tsx                  | 19 +++---
 src/components/Global/SupportDrawer/index.tsx | 47 ++-------------
 src/hooks/useCrispIframeInitialization.ts     | 58 +++++++++++++++++++
 src/hooks/useCrispInitialization.ts           | 45 ++++++++++++++
 src/hooks/useCrispUserData.ts                 | 13 ++++-
 src/utils/crisp.ts                            | 22 +++++--
 7 files changed, 156 insertions(+), 59 deletions(-)
 create mode 100644 src/hooks/useCrispIframeInitialization.ts
 create mode 100644 src/hooks/useCrispInitialization.ts

diff --git a/src/app/(mobile-ui)/support/page.tsx b/src/app/(mobile-ui)/support/page.tsx
index d9ec886cf..b273b29ea 100644
--- a/src/app/(mobile-ui)/support/page.tsx
+++ b/src/app/(mobile-ui)/support/page.tsx
@@ -1,8 +1,19 @@
 'use client'
 
+import { useCrispUserData } from '@/hooks/useCrispUserData'
+import { useCrispIframeInitialization } from '@/hooks/useCrispIframeInitialization'
+import { useRef } from 'react'
+
 const SupportPage = () => {
+    const userData = useCrispUserData()
+    const iframeRef = useRef<HTMLIFrameElement>(null)
+
+    // Initialize Crisp user data in iframe
+    useCrispIframeInitialization(iframeRef, userData, undefined, !!userData.userId)
+
     return (
         <iframe
+            ref={iframeRef}
             src="https://go.crisp.chat/chat/embed/?website_id=916078be-a6af-4696-82cb-bc08d43d9125"
             className="h-full w-full md:max-w-[90%] md:pl-24"
         />
diff --git a/src/components/CrispChat.tsx b/src/components/CrispChat.tsx
index f2084d91b..0a68f72d3 100644
--- a/src/components/CrispChat.tsx
+++ b/src/components/CrispChat.tsx
@@ -24,29 +24,30 @@ export default function CrispChat() {
     const userData = useCrispUserData()
 
     useEffect(() => {
-        // Only set user data if we have a username
-        if (!userData.username || typeof window === 'undefined') return
+        if (!userData.userId || typeof window === 'undefined') return
 
-        // Wait for Crisp to be fully loaded
         const setData = () => {
             if (window.$crisp) {
                 setCrispUserData(window.$crisp, userData)
             }
         }
 
-        // Try to set immediately
-        setData()
+        // Set data immediately if Crisp is already loaded
+        if (window.$crisp) {
+            setData()
+        }
 
-        // Also listen for Crisp session loaded event
+        // Listen for session loaded event - primary event Crisp fires when ready
+        // This ensures data persists across sessions and is set when Crisp initializes
         if (window.$crisp) {
             window.$crisp.push(['on', 'session:loaded', setData])
         }
 
-        // Fallback: try again after a delay
-        const timer = setTimeout(setData, 2000)
+        // Fallback: try once after a delay to catch cases where Crisp loads quickly
+        const fallbackTimer = setTimeout(setData, 1000)
 
         return () => {
-            clearTimeout(timer)
+            clearTimeout(fallbackTimer)
             if (window.$crisp) {
                 window.$crisp.push(['off', 'session:loaded', setData])
             }
diff --git a/src/components/Global/SupportDrawer/index.tsx b/src/components/Global/SupportDrawer/index.tsx
index ce3c2ecb5..75f98bb35 100644
--- a/src/components/Global/SupportDrawer/index.tsx
+++ b/src/components/Global/SupportDrawer/index.tsx
@@ -2,56 +2,17 @@
 
 import { useSupportModalContext } from '@/context/SupportModalContext'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
-import { setCrispUserData } from '@/utils/crisp'
+import { useCrispIframeInitialization } from '@/hooks/useCrispIframeInitialization'
 import { Drawer, DrawerContent, DrawerTitle } from '../Drawer'
-import { useEffect, useRef } from 'react'
+import { useRef } from 'react'
 
 const SupportDrawer = () => {
     const { isSupportModalOpen, setIsSupportModalOpen, prefilledMessage } = useSupportModalContext()
     const userData = useCrispUserData()
     const iframeRef = useRef<HTMLIFrameElement>(null)
 
-    useEffect(() => {
-        if (!isSupportModalOpen || !iframeRef.current || !userData.username) return
-
-        const iframe = iframeRef.current
-
-        // Try to set Crisp data in iframe (same logic as CrispChat.tsx)
-        const setData = () => {
-            try {
-                const iframeWindow = iframe.contentWindow as any
-                if (!iframeWindow?.$crisp) return
-
-                setCrispUserData(iframeWindow.$crisp, userData, prefilledMessage)
-            } catch (e) {
-                // Silently fail if CORS blocks access - no harm done
-                console.debug('Could not set Crisp data in iframe (expected if CORS-blocked):', e)
-            }
-        }
-
-        const handleLoad = () => {
-            // Try immediately
-            setData()
-
-            // Listen for Crisp loaded event in iframe
-            try {
-                const iframeWindow = iframe.contentWindow as any
-                if (iframeWindow?.$crisp) {
-                    iframeWindow.$crisp.push(['on', 'session:loaded', setData])
-                }
-            } catch (e) {
-                // Ignore CORS errors
-            }
-
-            // Fallback: try again after delays
-            setTimeout(setData, 500)
-            setTimeout(setData, 1000)
-            setTimeout(setData, 2000)
-        }
-
-        iframe.addEventListener('load', handleLoad)
-        return () => iframe.removeEventListener('load', handleLoad)
-    }, [isSupportModalOpen, userData, prefilledMessage])
+    // Initialize Crisp user data in iframe
+    useCrispIframeInitialization(iframeRef, userData, prefilledMessage, isSupportModalOpen && !!userData.userId)
 
     return (
         <Drawer open={isSupportModalOpen} onOpenChange={setIsSupportModalOpen}>
diff --git a/src/hooks/useCrispIframeInitialization.ts b/src/hooks/useCrispIframeInitialization.ts
new file mode 100644
index 000000000..1fd6b6cfc
--- /dev/null
+++ b/src/hooks/useCrispIframeInitialization.ts
@@ -0,0 +1,58 @@
+import { useEffect, useRef } from 'react'
+import { setCrispUserData } from '@/utils/crisp'
+import { type CrispUserData } from '@/hooks/useCrispUserData'
+
+/**
+ * Hook to initialize Crisp user data in an iframe (for embedded Crisp chat)
+ * Handles CORS-safe initialization and event listeners
+ * @param iframeRef - Ref to the iframe element
+ * @param userData - User data to set
+ * @param prefilledMessage - Optional prefilled message
+ * @param enabled - Whether initialization is enabled
+ */
+export function useCrispIframeInitialization(
+    iframeRef: React.RefObject<HTMLIFrameElement>,
+    userData: CrispUserData,
+    prefilledMessage?: string,
+    enabled: boolean = true
+) {
+    useEffect(() => {
+        if (!enabled || !iframeRef.current || !userData.userId) return
+
+        const iframe = iframeRef.current
+
+        const setData = () => {
+            try {
+                const iframeWindow = iframe.contentWindow as any
+                if (!iframeWindow?.$crisp) return
+
+                setCrispUserData(iframeWindow.$crisp, userData, prefilledMessage)
+            } catch (e) {
+                // Silently fail if CORS blocks access - no harm done
+                console.debug('Could not set Crisp data in iframe (expected if CORS-blocked):', e)
+            }
+        }
+
+        const handleLoad = () => {
+            // Try immediately
+            setData()
+
+            // Listen for Crisp loaded event in iframe
+            try {
+                const iframeWindow = iframe.contentWindow as any
+                if (iframeWindow?.$crisp) {
+                    iframeWindow.$crisp.push(['on', 'session:loaded', setData])
+                }
+            } catch (e) {
+                // Ignore CORS errors
+            }
+
+            // Fallback: try once after a delay (simplified from multiple timeouts)
+            setTimeout(setData, 1000)
+        }
+
+        iframe.addEventListener('load', handleLoad)
+        return () => iframe.removeEventListener('load', handleLoad)
+    }, [iframeRef, userData, prefilledMessage, enabled])
+}
+
diff --git a/src/hooks/useCrispInitialization.ts b/src/hooks/useCrispInitialization.ts
new file mode 100644
index 000000000..b0d59f3ef
--- /dev/null
+++ b/src/hooks/useCrispInitialization.ts
@@ -0,0 +1,45 @@
+import { useEffect } from 'react'
+import { setCrispUserData } from '@/utils/crisp'
+import { type CrispUserData } from './useCrispUserData'
+
+/**
+ * Hook to initialize Crisp user data on a given $crisp instance
+ * Handles timing, event listeners, and cleanup according to Crisp SDK best practices
+ * @param crispInstance - The $crisp object (window.$crisp or iframe.contentWindow.$crisp)
+ * @param userData - User data to set
+ * @param prefilledMessage - Optional prefilled message
+ * @param enabled - Whether initialization is enabled (default: true)
+ */
+export function useCrispInitialization(
+    crispInstance: any,
+    userData: CrispUserData,
+    prefilledMessage?: string,
+    enabled: boolean = true
+) {
+    useEffect(() => {
+        if (!enabled || !userData.userId || !crispInstance) return
+
+        const setData = () => {
+            if (crispInstance) {
+                setCrispUserData(crispInstance, userData, prefilledMessage)
+            }
+        }
+
+        // Set data immediately if Crisp is already loaded
+        setData()
+
+        // Listen for session loaded event - primary event Crisp fires when ready
+        // This ensures data persists across sessions and is set when Crisp initializes
+        crispInstance.push(['on', 'session:loaded', setData])
+
+        // Fallback: try once after a delay to catch cases where Crisp loads quickly
+        const fallbackTimer = setTimeout(setData, 1000)
+
+        return () => {
+            clearTimeout(fallbackTimer)
+            if (crispInstance) {
+                crispInstance.push(['off', 'session:loaded', setData])
+            }
+        }
+    }, [crispInstance, userData, prefilledMessage, enabled])
+}
diff --git a/src/hooks/useCrispUserData.ts b/src/hooks/useCrispUserData.ts
index 633f6368a..e5ffbbc74 100644
--- a/src/hooks/useCrispUserData.ts
+++ b/src/hooks/useCrispUserData.ts
@@ -5,22 +5,29 @@ export interface CrispUserData {
     username: string | undefined
     userId: string | undefined
     email: string | undefined
+    fullName: string | undefined
+    avatar: string | undefined
     grafanaLink: string | undefined
 }
 
 export function useCrispUserData(): CrispUserData {
-    const { username, userId } = useAuth()
+    const { username, userId, user } = useAuth()
 
     return useMemo(() => {
         const grafanaLink = username
             ? `https://teampeanut.grafana.net/d/ad31f645-81ca-4779-bfb2-bff8e03d9057/explore-peanut-wallet-user?orgId=1&var-GRAFANA_VAR_Username=${encodeURIComponent(username)}`
             : undefined
 
+        // Use actual email from user data, or userId as fallback identifier for Crisp
+        const email = user?.user?.email || (userId ? `${userId}@peanut.internal` : undefined)
+
         return {
             username,
             userId,
-            email: undefined,
+            email,
+            fullName: user?.user?.fullName,
+            avatar: user?.user?.profile_picture || undefined,
             grafanaLink,
         }
-    }, [username, userId])
+    }, [username, userId, user])
 }
diff --git a/src/utils/crisp.ts b/src/utils/crisp.ts
index 90d1d79c5..217b78874 100644
--- a/src/utils/crisp.ts
+++ b/src/utils/crisp.ts
@@ -9,13 +9,26 @@ import { type CrispUserData } from '@/hooks/useCrispUserData'
 export function setCrispUserData(crispInstance: any, userData: CrispUserData, prefilledMessage?: string): void {
     if (!crispInstance) return
 
-    const { username, userId, email, grafanaLink } = userData
+    const { username, userId, email, fullName, avatar, grafanaLink } = userData
 
-    // Set user nickname and email
-    crispInstance.push(['set', 'user:nickname', [username || '']])
-    crispInstance.push(['set', 'user:email', [email || '']])
+    // Set user email - this is critical for session persistence across devices/browsers
+    if (email) {
+        crispInstance.push(['set', 'user:email', [email]])
+    }
+
+    // Set user nickname - prefer fullName, fallback to username
+    const nickname = fullName || username || ''
+    if (nickname) {
+        crispInstance.push(['set', 'user:nickname', [nickname]])
+    }
+
+    // Set user avatar if available
+    if (avatar) {
+        crispInstance.push(['set', 'user:avatar', [avatar]])
+    }
 
     // Set session data - EXACT STRUCTURE (3 nested arrays!)
+    // This metadata appears in Crisp dashboard for support agents
     crispInstance.push([
         'set',
         'session:data',
@@ -23,6 +36,7 @@ export function setCrispUserData(crispInstance: any, userData: CrispUserData, pr
             [
                 ['username', username || ''],
                 ['user_id', userId || ''],
+                ['full_name', fullName || ''],
                 ['grafana_dashboard', grafanaLink || ''],
             ],
         ],

From 89b1c920ff1ecd717bed6dfdc2bc1a5fa06f278a Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 1 Nov 2025 00:49:39 -0300
Subject: [PATCH 2/7] fix formatting

---
 src/hooks/useCrispIframeInitialization.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/hooks/useCrispIframeInitialization.ts b/src/hooks/useCrispIframeInitialization.ts
index 1fd6b6cfc..d89d08fb9 100644
--- a/src/hooks/useCrispIframeInitialization.ts
+++ b/src/hooks/useCrispIframeInitialization.ts
@@ -55,4 +55,3 @@ export function useCrispIframeInitialization(
         return () => iframe.removeEventListener('load', handleLoad)
     }, [iframeRef, userData, prefilledMessage, enabled])
 }
-

From 141d76f1f41db886a5f2a0bf582d9d0a84186021 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 1 Nov 2025 01:14:35 -0300
Subject: [PATCH 3/7] fix crisp metadata

---
 src/components/Global/SupportDrawer/index.tsx |  3 ++-
 src/context/authContext.tsx                   |  6 ++++++
 src/utils/crisp.ts                            | 21 +++++++++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/Global/SupportDrawer/index.tsx b/src/components/Global/SupportDrawer/index.tsx
index 75f98bb35..eabd54431 100644
--- a/src/components/Global/SupportDrawer/index.tsx
+++ b/src/components/Global/SupportDrawer/index.tsx
@@ -12,7 +12,8 @@ const SupportDrawer = () => {
     const iframeRef = useRef<HTMLIFrameElement>(null)
 
     // Initialize Crisp user data in iframe
-    useCrispIframeInitialization(iframeRef, userData, prefilledMessage, isSupportModalOpen && !!userData.userId)
+    // Don't wait for drawer to open - iframe loads immediately and we need listener attached before load event
+    useCrispIframeInitialization(iframeRef, userData, prefilledMessage, !!userData.userId)
 
     return (
         <Drawer open={isSupportModalOpen} onOpenChange={setIsSupportModalOpen}>
diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx
index c330fb724..741dc5680 100644
--- a/src/context/authContext.tsx
+++ b/src/context/authContext.tsx
@@ -11,6 +11,7 @@ import {
     clearRedirectUrl,
     updateUserPreferences,
 } from '@/utils'
+import { resetCrispSession } from '@/utils/crisp'
 import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 import { createContext, type ReactNode, useContext, useState, useEffect, useMemo, useCallback } from 'react'
@@ -148,6 +149,11 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
                     sessionStorage.removeItem('hasSeenIOSPWAPromptThisSession')
                 }
 
+                // Reset Crisp session to prevent session merging with next user
+                if (typeof window !== 'undefined' && window.$crisp) {
+                    resetCrispSession(window.$crisp)
+                }
+
                 await fetchUser()
                 dispatch(setupActions.resetSetup())
                 router.replace('/setup')
diff --git a/src/utils/crisp.ts b/src/utils/crisp.ts
index 217b78874..e80658d8e 100644
--- a/src/utils/crisp.ts
+++ b/src/utils/crisp.ts
@@ -11,6 +11,12 @@ export function setCrispUserData(crispInstance: any, userData: CrispUserData, pr
 
     const { username, userId, email, fullName, avatar, grafanaLink } = userData
 
+    // Set session identifier (tokenId) for cross-device/cross-session persistence
+    // This ensures sessions persist across devices and cookie clears
+    if (userId) {
+        crispInstance.push(['set', 'session:identifier', [userId]])
+    }
+
     // Set user email - this is critical for session persistence across devices/browsers
     if (email) {
         crispInstance.push(['set', 'user:email', [email]])
@@ -47,3 +53,18 @@ export function setCrispUserData(crispInstance: any, userData: CrispUserData, pr
         crispInstance.push(['set', 'message:text', [prefilledMessage]])
     }
 }
+
+/**
+ * Resets Crisp session - call this on logout to prevent session merging
+ * @param crispInstance - The $crisp object (window.$crisp or iframe.contentWindow.$crisp)
+ */
+export function resetCrispSession(crispInstance: any): void {
+    if (!crispInstance || typeof window === 'undefined') return
+
+    try {
+        // Reset the session to prevent merging with next user's session
+        crispInstance.push(['do', 'session:reset'])
+    } catch (e) {
+        console.debug('Could not reset Crisp session:', e)
+    }
+}

From e16c0324e7f1ca4647f39010ffc79086804223a3 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 1 Nov 2025 01:41:08 -0300
Subject: [PATCH 4/7] fixes

---
 src/app/(mobile-ui)/support/page.tsx          | 18 +++---
 src/components/CrispChat.tsx                  | 41 +++---------
 src/components/Global/SupportDrawer/index.tsx | 17 +++--
 src/hooks/useCrispEmbedUrl.ts                 | 33 ++++++++++
 src/hooks/useCrispIframeInitialization.ts     | 57 -----------------
 src/hooks/useCrispIframeSessionData.ts        | 64 +++++++++++++++++++
 src/utils/crisp.ts                            |  7 +-
 7 files changed, 123 insertions(+), 114 deletions(-)
 create mode 100644 src/hooks/useCrispEmbedUrl.ts
 delete mode 100644 src/hooks/useCrispIframeInitialization.ts
 create mode 100644 src/hooks/useCrispIframeSessionData.ts

diff --git a/src/app/(mobile-ui)/support/page.tsx b/src/app/(mobile-ui)/support/page.tsx
index b273b29ea..4c7d62609 100644
--- a/src/app/(mobile-ui)/support/page.tsx
+++ b/src/app/(mobile-ui)/support/page.tsx
@@ -1,23 +1,21 @@
 'use client'
 
 import { useCrispUserData } from '@/hooks/useCrispUserData'
-import { useCrispIframeInitialization } from '@/hooks/useCrispIframeInitialization'
+import { useCrispEmbedUrl } from '@/hooks/useCrispEmbedUrl'
+import { useCrispIframeSessionData } from '@/hooks/useCrispIframeSessionData'
 import { useRef } from 'react'
 
 const SupportPage = () => {
     const userData = useCrispUserData()
     const iframeRef = useRef<HTMLIFrameElement>(null)
 
-    // Initialize Crisp user data in iframe
-    useCrispIframeInitialization(iframeRef, userData, undefined, !!userData.userId)
+    // Build Crisp embed URL with user data as URL parameters (bypasses CORS)
+    const crispEmbedUrl = useCrispEmbedUrl(userData)
 
-    return (
-        <iframe
-            ref={iframeRef}
-            src="https://go.crisp.chat/chat/embed/?website_id=916078be-a6af-4696-82cb-bc08d43d9125"
-            className="h-full w-full md:max-w-[90%] md:pl-24"
-        />
-    )
+    // Try to set session:data via JavaScript if CORS allows (for metadata like grafana link)
+    useCrispIframeSessionData(iframeRef, userData)
+
+    return <iframe ref={iframeRef} src={crispEmbedUrl} className="h-full w-full md:max-w-[90%] md:pl-24" />
 }
 
 export default SupportPage
diff --git a/src/components/CrispChat.tsx b/src/components/CrispChat.tsx
index 0a68f72d3..9a1c24048 100644
--- a/src/components/CrispChat.tsx
+++ b/src/components/CrispChat.tsx
@@ -1,10 +1,9 @@
 'use client'
 
 import Script from 'next/script'
-import { useEffect } from 'react'
 import { useSupportModalContext } from '@/context/SupportModalContext'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
-import { setCrispUserData } from '@/utils/crisp'
+import { useCrispInitialization } from '@/hooks/useCrispInitialization'
 
 export const CrispButton = ({ children, ...rest }: React.HTMLAttributes<HTMLButtonElement>) => {
     const { setIsSupportModalOpen } = useSupportModalContext()
@@ -23,36 +22,14 @@ export const CrispButton = ({ children, ...rest }: React.HTMLAttributes<HTMLButt
 export default function CrispChat() {
     const userData = useCrispUserData()
 
-    useEffect(() => {
-        if (!userData.userId || typeof window === 'undefined') return
-
-        const setData = () => {
-            if (window.$crisp) {
-                setCrispUserData(window.$crisp, userData)
-            }
-        }
-
-        // Set data immediately if Crisp is already loaded
-        if (window.$crisp) {
-            setData()
-        }
-
-        // Listen for session loaded event - primary event Crisp fires when ready
-        // This ensures data persists across sessions and is set when Crisp initializes
-        if (window.$crisp) {
-            window.$crisp.push(['on', 'session:loaded', setData])
-        }
-
-        // Fallback: try once after a delay to catch cases where Crisp loads quickly
-        const fallbackTimer = setTimeout(setData, 1000)
-
-        return () => {
-            clearTimeout(fallbackTimer)
-            if (window.$crisp) {
-                window.$crisp.push(['off', 'session:loaded', setData])
-            }
-        }
-    }, [userData])
+    // Initialize Crisp user data using the centralized hook
+    // typeof window check ensures SSR safety
+    useCrispInitialization(
+        typeof window !== 'undefined' ? window.$crisp : null,
+        userData,
+        undefined,
+        !!userData.userId && typeof window !== 'undefined'
+    )
 
     // thought: we need to version pin this script
     return (
diff --git a/src/components/Global/SupportDrawer/index.tsx b/src/components/Global/SupportDrawer/index.tsx
index eabd54431..5836f12ef 100644
--- a/src/components/Global/SupportDrawer/index.tsx
+++ b/src/components/Global/SupportDrawer/index.tsx
@@ -2,7 +2,8 @@
 
 import { useSupportModalContext } from '@/context/SupportModalContext'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
-import { useCrispIframeInitialization } from '@/hooks/useCrispIframeInitialization'
+import { useCrispEmbedUrl } from '@/hooks/useCrispEmbedUrl'
+import { useCrispIframeSessionData } from '@/hooks/useCrispIframeSessionData'
 import { Drawer, DrawerContent, DrawerTitle } from '../Drawer'
 import { useRef } from 'react'
 
@@ -11,19 +12,17 @@ const SupportDrawer = () => {
     const userData = useCrispUserData()
     const iframeRef = useRef<HTMLIFrameElement>(null)
 
-    // Initialize Crisp user data in iframe
-    // Don't wait for drawer to open - iframe loads immediately and we need listener attached before load event
-    useCrispIframeInitialization(iframeRef, userData, prefilledMessage, !!userData.userId)
+    // Build Crisp embed URL with user data as URL parameters (bypasses CORS)
+    const crispEmbedUrl = useCrispEmbedUrl(userData)
+
+    // Try to set session:data via JavaScript if CORS allows (for metadata like grafana link)
+    useCrispIframeSessionData(iframeRef, userData, prefilledMessage)
 
     return (
         <Drawer open={isSupportModalOpen} onOpenChange={setIsSupportModalOpen}>
             <DrawerContent className="z-[999999] max-h-[85vh] w-screen pt-4">
                 <DrawerTitle className="sr-only">Support</DrawerTitle>
-                <iframe
-                    ref={iframeRef}
-                    src="https://go.crisp.chat/chat/embed/?website_id=916078be-a6af-4696-82cb-bc08d43d9125"
-                    className="h-[80vh] w-full"
-                />
+                <iframe ref={iframeRef} src={crispEmbedUrl} className="h-[80vh] w-full" />
             </DrawerContent>
         </Drawer>
     )
diff --git a/src/hooks/useCrispEmbedUrl.ts b/src/hooks/useCrispEmbedUrl.ts
new file mode 100644
index 000000000..56b1b727e
--- /dev/null
+++ b/src/hooks/useCrispEmbedUrl.ts
@@ -0,0 +1,33 @@
+import { useMemo } from 'react'
+import { type CrispUserData } from '@/hooks/useCrispUserData'
+
+const CRISP_WEBSITE_ID = '916078be-a6af-4696-82cb-bc08d43d9125'
+const CRISP_EMBED_BASE_URL = `https://go.crisp.chat/chat/embed/?website_id=${CRISP_WEBSITE_ID}`
+
+/**
+ * Hook to build Crisp embed URL with user data as URL parameters
+ * This bypasses CORS completely - Crisp supports these URL params:
+ * - user_email: User's email address (CRITICAL for session persistence)
+ * - user_nickname: User's nickname
+ * - user_phone: User's phone number
+ * - user_avatar: URL to the user's avatar image
+ */
+export function useCrispEmbedUrl(userData: CrispUserData): string {
+    return useMemo(() => {
+        const params = new URLSearchParams()
+
+        if (userData.email) {
+            params.append('user_email', userData.email)
+        }
+        if (userData.fullName || userData.username) {
+            params.append('user_nickname', userData.fullName || userData.username || '')
+        }
+        if (userData.avatar) {
+            params.append('user_avatar', userData.avatar)
+        }
+
+        const queryString = params.toString()
+        return queryString ? `${CRISP_EMBED_BASE_URL}&${queryString}` : CRISP_EMBED_BASE_URL
+    }, [userData.email, userData.fullName, userData.username, userData.avatar])
+}
+
diff --git a/src/hooks/useCrispIframeInitialization.ts b/src/hooks/useCrispIframeInitialization.ts
deleted file mode 100644
index d89d08fb9..000000000
--- a/src/hooks/useCrispIframeInitialization.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { setCrispUserData } from '@/utils/crisp'
-import { type CrispUserData } from '@/hooks/useCrispUserData'
-
-/**
- * Hook to initialize Crisp user data in an iframe (for embedded Crisp chat)
- * Handles CORS-safe initialization and event listeners
- * @param iframeRef - Ref to the iframe element
- * @param userData - User data to set
- * @param prefilledMessage - Optional prefilled message
- * @param enabled - Whether initialization is enabled
- */
-export function useCrispIframeInitialization(
-    iframeRef: React.RefObject<HTMLIFrameElement>,
-    userData: CrispUserData,
-    prefilledMessage?: string,
-    enabled: boolean = true
-) {
-    useEffect(() => {
-        if (!enabled || !iframeRef.current || !userData.userId) return
-
-        const iframe = iframeRef.current
-
-        const setData = () => {
-            try {
-                const iframeWindow = iframe.contentWindow as any
-                if (!iframeWindow?.$crisp) return
-
-                setCrispUserData(iframeWindow.$crisp, userData, prefilledMessage)
-            } catch (e) {
-                // Silently fail if CORS blocks access - no harm done
-                console.debug('Could not set Crisp data in iframe (expected if CORS-blocked):', e)
-            }
-        }
-
-        const handleLoad = () => {
-            // Try immediately
-            setData()
-
-            // Listen for Crisp loaded event in iframe
-            try {
-                const iframeWindow = iframe.contentWindow as any
-                if (iframeWindow?.$crisp) {
-                    iframeWindow.$crisp.push(['on', 'session:loaded', setData])
-                }
-            } catch (e) {
-                // Ignore CORS errors
-            }
-
-            // Fallback: try once after a delay (simplified from multiple timeouts)
-            setTimeout(setData, 1000)
-        }
-
-        iframe.addEventListener('load', handleLoad)
-        return () => iframe.removeEventListener('load', handleLoad)
-    }, [iframeRef, userData, prefilledMessage, enabled])
-}
diff --git a/src/hooks/useCrispIframeSessionData.ts b/src/hooks/useCrispIframeSessionData.ts
new file mode 100644
index 000000000..0b78e0a33
--- /dev/null
+++ b/src/hooks/useCrispIframeSessionData.ts
@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react'
+import { type CrispUserData } from '@/hooks/useCrispUserData'
+
+/**
+ * Hook to attempt setting session:data in Crisp iframe via JavaScript
+ * This is a best-effort attempt - URL params handle user identification
+ * Session metadata (grafana_dashboard, user_id, etc.) cannot be passed via URL params
+ * and must be set via JavaScript (which may fail due to CORS)
+ */
+export function useCrispIframeSessionData(
+    iframeRef: React.RefObject<HTMLIFrameElement>,
+    userData: CrispUserData,
+    prefilledMessage?: string
+) {
+    useEffect(() => {
+        if (!iframeRef.current || !userData.userId) return
+
+        const iframe = iframeRef.current
+        const setSessionData = () => {
+            try {
+                const iframeWindow = iframe.contentWindow as any
+                if (iframeWindow?.$crisp) {
+                    // Set session:data (metadata) - this appears in Crisp dashboard for support agents
+                    // Note: User identification (email, nickname) is already set via URL params
+                    iframeWindow.$crisp.push([
+                        'set',
+                        'session:data',
+                        [
+                            [
+                                ['username', userData.username || ''],
+                                ['user_id', userData.userId || ''],
+                                ['full_name', userData.fullName || ''],
+                                ['grafana_dashboard', userData.grafanaLink || ''],
+                            ],
+                        ],
+                    ])
+                    if (prefilledMessage) {
+                        iframeWindow.$crisp.push(['set', 'message:text', [prefilledMessage]])
+                    }
+                    console.log('[Crisp] ✅ Successfully set session metadata via JavaScript')
+                }
+            } catch (e: any) {
+                // CORS error expected - URL params already handle user identification
+                if (e.message?.includes('cross-origin') || e.name === 'SecurityError') {
+                    console.debug(
+                        '[Crisp] Session metadata cannot be set (CORS) - user identification via URL params is sufficient'
+                    )
+                }
+            }
+        }
+
+        const handleLoad = () => {
+            // Try immediately
+            setSessionData()
+            // Retry after delays
+            setTimeout(setSessionData, 500)
+            setTimeout(setSessionData, 2000)
+        }
+
+        iframe.addEventListener('load', handleLoad)
+        return () => iframe.removeEventListener('load', handleLoad)
+    }, [iframeRef, userData, prefilledMessage])
+}
+
diff --git a/src/utils/crisp.ts b/src/utils/crisp.ts
index e80658d8e..5f919ec49 100644
--- a/src/utils/crisp.ts
+++ b/src/utils/crisp.ts
@@ -11,13 +11,8 @@ export function setCrispUserData(crispInstance: any, userData: CrispUserData, pr
 
     const { username, userId, email, fullName, avatar, grafanaLink } = userData
 
-    // Set session identifier (tokenId) for cross-device/cross-session persistence
-    // This ensures sessions persist across devices and cookie clears
-    if (userId) {
-        crispInstance.push(['set', 'session:identifier', [userId]])
-    }
-
     // Set user email - this is critical for session persistence across devices/browsers
+    // According to Crisp docs, user:email is the primary identifier for session persistence
     if (email) {
         crispInstance.push(['set', 'user:email', [email]])
     }

From 413d7213ac43aef8145742d1a8a9b57bc66ebd58 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 1 Nov 2025 02:20:38 -0300
Subject: [PATCH 5/7] FINALLY

---
 src/app/(mobile-ui)/support/page.tsx          |  36 +++-
 src/app/crisp-proxy/page.tsx                  | 160 ++++++++++++++++++
 src/components/CrispChat.tsx                  |  38 +++--
 src/components/Global/SupportDrawer/index.tsx |  42 ++++-
 src/context/authContext.tsx                   |   7 +-
 src/hooks/useCrispIframeSessionData.ts        |  64 -------
 src/hooks/useCrispInitialization.ts           |  16 +-
 src/hooks/useCrispProxyUrl.ts                 |  69 ++++++++
 src/hooks/useCrispUserData.ts                 |  30 +++-
 src/utils/crisp.ts                            |  72 ++++++--
 10 files changed, 406 insertions(+), 128 deletions(-)
 create mode 100644 src/app/crisp-proxy/page.tsx
 delete mode 100644 src/hooks/useCrispIframeSessionData.ts
 create mode 100644 src/hooks/useCrispProxyUrl.ts

diff --git a/src/app/(mobile-ui)/support/page.tsx b/src/app/(mobile-ui)/support/page.tsx
index 4c7d62609..2a0072c82 100644
--- a/src/app/(mobile-ui)/support/page.tsx
+++ b/src/app/(mobile-ui)/support/page.tsx
@@ -1,21 +1,39 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
-import { useCrispEmbedUrl } from '@/hooks/useCrispEmbedUrl'
-import { useCrispIframeSessionData } from '@/hooks/useCrispIframeSessionData'
-import { useRef } from 'react'
+import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
+import PeanutLoading from '@/components/Global/PeanutLoading'
 
 const SupportPage = () => {
     const userData = useCrispUserData()
-    const iframeRef = useRef<HTMLIFrameElement>(null)
+    const crispProxyUrl = useCrispProxyUrl(userData)
+    const [isLoading, setIsLoading] = useState(true)
 
-    // Build Crisp embed URL with user data as URL parameters (bypasses CORS)
-    const crispEmbedUrl = useCrispEmbedUrl(userData)
+    useEffect(() => {
+        // Listen for ready message from proxy iframe
+        const handleMessage = (event: MessageEvent) => {
+            if (event.origin !== window.location.origin) return
 
-    // Try to set session:data via JavaScript if CORS allows (for metadata like grafana link)
-    useCrispIframeSessionData(iframeRef, userData)
+            if (event.data.type === 'CRISP_READY') {
+                setIsLoading(false)
+            }
+        }
 
-    return <iframe ref={iframeRef} src={crispEmbedUrl} className="h-full w-full md:max-w-[90%] md:pl-24" />
+        window.addEventListener('message', handleMessage)
+        return () => window.removeEventListener('message', handleMessage)
+    }, [])
+
+    return (
+        <div className="relative h-full w-full md:max-w-[90%] md:pl-24">
+            {isLoading && (
+                <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
+                    <PeanutLoading />
+                </div>
+            )}
+            <iframe src={crispProxyUrl} className="h-full w-full" title="Support Chat" />
+        </div>
+    )
 }
 
 export default SupportPage
diff --git a/src/app/crisp-proxy/page.tsx b/src/app/crisp-proxy/page.tsx
new file mode 100644
index 000000000..e1518559c
--- /dev/null
+++ b/src/app/crisp-proxy/page.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+import Script from 'next/script'
+import { useEffect, Suspense } from 'react'
+import { useSearchParams } from 'next/navigation'
+
+const CRISP_WEBSITE_ID = '916078be-a6af-4696-82cb-bc08d43d9125'
+
+/**
+ * Crisp Proxy Page - Same-origin iframe solution for embedded Crisp chat
+ *
+ * This page loads the Crisp widget in full-screen mode and is embedded as an iframe
+ * from SupportDrawer and SupportPage. By being same-origin, we avoid CORS issues
+ * and can fully control the Crisp instance via JavaScript.
+ *
+ * User data flows via URL parameters and is set during Crisp initialization,
+ * following Crisp's recommended pattern for iframe embedding with JS SDK control.
+ */
+function CrispProxyContent() {
+    const searchParams = useSearchParams()
+
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            ;(window as any).CRISP_RUNTIME_CONFIG = {
+                lock_maximized: true,
+                lock_full_view: true,
+                cross_origin_cookies: true, // Essential for session persistence in iframes
+            }
+        }
+    }, [])
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return
+
+        const email = searchParams.get('user_email')
+        const nickname = searchParams.get('user_nickname')
+        const avatar = searchParams.get('user_avatar')
+        const sessionDataJson = searchParams.get('session_data')
+        const prefilledMessage = searchParams.get('prefilled_message')
+
+        const notifyParentReady = () => {
+            if (window.parent !== window) {
+                window.parent.postMessage(
+                    {
+                        type: 'CRISP_READY',
+                    },
+                    window.location.origin
+                )
+            }
+        }
+
+        const setAllData = () => {
+            if (!window.$crisp) return false
+
+            // Check sessionStorage for reset flag (set during logout)
+            const needsReset = sessionStorage.getItem('crisp_needs_reset')
+            if (needsReset === 'true') {
+                window.$crisp.push(['do', 'session:reset'])
+                sessionStorage.removeItem('crisp_needs_reset')
+            }
+
+            // Set user identification
+            if (email) {
+                window.$crisp.push(['set', 'user:email', [email]])
+            }
+            if (nickname) {
+                window.$crisp.push(['set', 'user:nickname', [nickname]])
+            }
+            if (avatar) {
+                window.$crisp.push(['set', 'user:avatar', [avatar]])
+            }
+
+            // Set session metadata for support agents
+            if (sessionDataJson) {
+                try {
+                    const data = JSON.parse(sessionDataJson)
+                    const sessionDataArray = [
+                        [
+                            ['username', data.username || ''],
+                            ['user_id', data.user_id || ''],
+                            ['full_name', data.full_name || ''],
+                            ['grafana_dashboard', data.grafana_dashboard || ''],
+                            ['wallet_address', data.wallet_address || ''],
+                            ['bridge_user_id', data.bridge_user_id || ''],
+                            ['manteca_user_id', data.manteca_user_id || ''],
+                        ],
+                    ]
+                    window.$crisp.push(['set', 'session:data', sessionDataArray])
+                } catch (e) {
+                    console.error('[Crisp] Failed to parse session_data:', e)
+                }
+            }
+
+            if (prefilledMessage) {
+                window.$crisp.push(['set', 'message:text', [prefilledMessage]])
+            }
+
+            // Wait for Crisp to be fully ready (session loaded and UI rendered)
+            window.$crisp.push(['on', 'session:loaded', notifyParentReady])
+
+            // Fallback: notify after a delay if session:loaded doesn't fire
+            setTimeout(notifyParentReady, 1500)
+
+            return true
+        }
+
+        // Initialize data once Crisp loads
+        if (window.$crisp) {
+            setAllData()
+        } else {
+            const checkCrisp = setInterval(() => {
+                if (window.$crisp) {
+                    setAllData()
+                    clearInterval(checkCrisp)
+                }
+            }, 100)
+
+            setTimeout(() => clearInterval(checkCrisp), 5000)
+        }
+
+        // Listen for reset messages from parent window
+        const handleMessage = (event: MessageEvent) => {
+            if (event.origin !== window.location.origin) return
+
+            if (event.data.type === 'CRISP_RESET_SESSION' && window.$crisp) {
+                window.$crisp.push(['do', 'session:reset'])
+            }
+        }
+
+        window.addEventListener('message', handleMessage)
+        return () => window.removeEventListener('message', handleMessage)
+    }, [searchParams])
+
+    return (
+        <div className="h-full w-full">
+            <Script strategy="afterInteractive" id="crisp-proxy-widget">
+                {`
+                    window.$crisp=[];
+                    window.CRISP_WEBSITE_ID="${CRISP_WEBSITE_ID}";
+                    (function(){
+                        d=document;
+                        s=d.createElement("script");
+                        s.src="https://client.crisp.chat/l.js";
+                        s.async=1;
+                        d.getElementsByTagName("head")[0].appendChild(s);
+                    })();
+                    window.$crisp.push(["safe", true]);
+                `}
+            </Script>
+        </div>
+    )
+}
+
+export default function CrispProxyPage() {
+    return (
+        <Suspense fallback={<div className="h-full w-full" />}>
+            <CrispProxyContent />
+        </Suspense>
+    )
+}
diff --git a/src/components/CrispChat.tsx b/src/components/CrispChat.tsx
index 9a1c24048..61b799446 100644
--- a/src/components/CrispChat.tsx
+++ b/src/components/CrispChat.tsx
@@ -5,6 +5,11 @@ import { useSupportModalContext } from '@/context/SupportModalContext'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
 import { useCrispInitialization } from '@/hooks/useCrispInitialization'
 
+const CRISP_WEBSITE_ID = '916078be-a6af-4696-82cb-bc08d43d9125'
+
+/**
+ * Button component that opens the support drawer
+ */
 export const CrispButton = ({ children, ...rest }: React.HTMLAttributes<HTMLButtonElement>) => {
     const { setIsSupportModalOpen } = useSupportModalContext()
 
@@ -19,11 +24,15 @@ export const CrispButton = ({ children, ...rest }: React.HTMLAttributes<HTMLButt
     )
 }
 
+/**
+ * Loads the main Crisp chat widget script and initializes user data
+ *
+ * This creates the main window $crisp instance. The actual chat UI is rendered
+ * via SupportDrawer as an iframe to avoid page layout interference.
+ */
 export default function CrispChat() {
     const userData = useCrispUserData()
 
-    // Initialize Crisp user data using the centralized hook
-    // typeof window check ensures SSR safety
     useCrispInitialization(
         typeof window !== 'undefined' ? window.$crisp : null,
         userData,
@@ -31,21 +40,20 @@ export default function CrispChat() {
         !!userData.userId && typeof window !== 'undefined'
     )
 
-    // thought: we need to version pin this script
     return (
-        <Script strategy="afterInteractive">
+        <Script strategy="afterInteractive" id="crisp-main-widget">
             {`
-        window.$crisp=[];
-        window.CRISP_WEBSITE_ID="916078be-a6af-4696-82cb-bc08d43d9125";
-        (function(){
-          d=document;
-          s=d.createElement("script");
-          s.src="https://client.crisp.chat/l.js";
-          s.async=1;
-          d.getElementsByTagName("head")[0].appendChild(s);
-        })();
-        window.$crisp.push(["safe", true]);
-      `}
+                window.$crisp=[];
+                window.CRISP_WEBSITE_ID="${CRISP_WEBSITE_ID}";
+                (function(){
+                    d=document;
+                    s=d.createElement("script");
+                    s.src="https://client.crisp.chat/l.js";
+                    s.async=1;
+                    d.getElementsByTagName("head")[0].appendChild(s);
+                })();
+                window.$crisp.push(["safe", true]);
+            `}
         </Script>
     )
 }
diff --git a/src/components/Global/SupportDrawer/index.tsx b/src/components/Global/SupportDrawer/index.tsx
index 5836f12ef..55471c926 100644
--- a/src/components/Global/SupportDrawer/index.tsx
+++ b/src/components/Global/SupportDrawer/index.tsx
@@ -1,28 +1,52 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import { useSupportModalContext } from '@/context/SupportModalContext'
 import { useCrispUserData } from '@/hooks/useCrispUserData'
-import { useCrispEmbedUrl } from '@/hooks/useCrispEmbedUrl'
-import { useCrispIframeSessionData } from '@/hooks/useCrispIframeSessionData'
+import { useCrispProxyUrl } from '@/hooks/useCrispProxyUrl'
 import { Drawer, DrawerContent, DrawerTitle } from '../Drawer'
-import { useRef } from 'react'
+import PeanutLoading from '../PeanutLoading'
 
 const SupportDrawer = () => {
     const { isSupportModalOpen, setIsSupportModalOpen, prefilledMessage } = useSupportModalContext()
     const userData = useCrispUserData()
-    const iframeRef = useRef<HTMLIFrameElement>(null)
+    const [isLoading, setIsLoading] = useState(true)
 
-    // Build Crisp embed URL with user data as URL parameters (bypasses CORS)
-    const crispEmbedUrl = useCrispEmbedUrl(userData)
+    const crispProxyUrl = useCrispProxyUrl(userData, prefilledMessage)
 
-    // Try to set session:data via JavaScript if CORS allows (for metadata like grafana link)
-    useCrispIframeSessionData(iframeRef, userData, prefilledMessage)
+    useEffect(() => {
+        // Listen for ready message from proxy iframe
+        const handleMessage = (event: MessageEvent) => {
+            if (event.origin !== window.location.origin) return
+
+            if (event.data.type === 'CRISP_READY') {
+                setIsLoading(false)
+            }
+        }
+
+        window.addEventListener('message', handleMessage)
+        return () => window.removeEventListener('message', handleMessage)
+    }, [])
+
+    // Reset loading state when drawer closes
+    useEffect(() => {
+        if (!isSupportModalOpen) {
+            setIsLoading(true)
+        }
+    }, [isSupportModalOpen])
 
     return (
         <Drawer open={isSupportModalOpen} onOpenChange={setIsSupportModalOpen}>
             <DrawerContent className="z-[999999] max-h-[85vh] w-screen pt-4">
                 <DrawerTitle className="sr-only">Support</DrawerTitle>
-                <iframe ref={iframeRef} src={crispEmbedUrl} className="h-[80vh] w-full" />
+                <div className="relative h-[80vh] w-full">
+                    {isLoading && (
+                        <div className="absolute inset-0 z-10 flex items-center justify-center bg-background">
+                            <PeanutLoading />
+                        </div>
+                    )}
+                    <iframe src={crispProxyUrl} className="h-full w-full" title="Support Chat" />
+                </div>
             </DrawerContent>
         </Drawer>
     )
diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx
index 741dc5680..abd1b8589 100644
--- a/src/context/authContext.tsx
+++ b/src/context/authContext.tsx
@@ -11,7 +11,7 @@ import {
     clearRedirectUrl,
     updateUserPreferences,
 } from '@/utils'
-import { resetCrispSession } from '@/utils/crisp'
+import { resetCrispSession, resetCrispProxySessions } from '@/utils/crisp'
 import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 import { createContext, type ReactNode, useContext, useState, useEffect, useMemo, useCallback } from 'react'
@@ -150,8 +150,9 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
                 }
 
                 // Reset Crisp session to prevent session merging with next user
-                if (typeof window !== 'undefined' && window.$crisp) {
-                    resetCrispSession(window.$crisp)
+                // This resets both main window Crisp instance and any proxy page instances
+                if (typeof window !== 'undefined') {
+                    resetCrispProxySessions()
                 }
 
                 await fetchUser()
diff --git a/src/hooks/useCrispIframeSessionData.ts b/src/hooks/useCrispIframeSessionData.ts
deleted file mode 100644
index 0b78e0a33..000000000
--- a/src/hooks/useCrispIframeSessionData.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useEffect, useRef } from 'react'
-import { type CrispUserData } from '@/hooks/useCrispUserData'
-
-/**
- * Hook to attempt setting session:data in Crisp iframe via JavaScript
- * This is a best-effort attempt - URL params handle user identification
- * Session metadata (grafana_dashboard, user_id, etc.) cannot be passed via URL params
- * and must be set via JavaScript (which may fail due to CORS)
- */
-export function useCrispIframeSessionData(
-    iframeRef: React.RefObject<HTMLIFrameElement>,
-    userData: CrispUserData,
-    prefilledMessage?: string
-) {
-    useEffect(() => {
-        if (!iframeRef.current || !userData.userId) return
-
-        const iframe = iframeRef.current
-        const setSessionData = () => {
-            try {
-                const iframeWindow = iframe.contentWindow as any
-                if (iframeWindow?.$crisp) {
-                    // Set session:data (metadata) - this appears in Crisp dashboard for support agents
-                    // Note: User identification (email, nickname) is already set via URL params
-                    iframeWindow.$crisp.push([
-                        'set',
-                        'session:data',
-                        [
-                            [
-                                ['username', userData.username || ''],
-                                ['user_id', userData.userId || ''],
-                                ['full_name', userData.fullName || ''],
-                                ['grafana_dashboard', userData.grafanaLink || ''],
-                            ],
-                        ],
-                    ])
-                    if (prefilledMessage) {
-                        iframeWindow.$crisp.push(['set', 'message:text', [prefilledMessage]])
-                    }
-                    console.log('[Crisp] ✅ Successfully set session metadata via JavaScript')
-                }
-            } catch (e: any) {
-                // CORS error expected - URL params already handle user identification
-                if (e.message?.includes('cross-origin') || e.name === 'SecurityError') {
-                    console.debug(
-                        '[Crisp] Session metadata cannot be set (CORS) - user identification via URL params is sufficient'
-                    )
-                }
-            }
-        }
-
-        const handleLoad = () => {
-            // Try immediately
-            setSessionData()
-            // Retry after delays
-            setTimeout(setSessionData, 500)
-            setTimeout(setSessionData, 2000)
-        }
-
-        iframe.addEventListener('load', handleLoad)
-        return () => iframe.removeEventListener('load', handleLoad)
-    }, [iframeRef, userData, prefilledMessage])
-}
-
diff --git a/src/hooks/useCrispInitialization.ts b/src/hooks/useCrispInitialization.ts
index b0d59f3ef..d1e08fa8a 100644
--- a/src/hooks/useCrispInitialization.ts
+++ b/src/hooks/useCrispInitialization.ts
@@ -3,12 +3,15 @@ import { setCrispUserData } from '@/utils/crisp'
 import { type CrispUserData } from './useCrispUserData'
 
 /**
- * Hook to initialize Crisp user data on a given $crisp instance
- * Handles timing, event listeners, and cleanup according to Crisp SDK best practices
- * @param crispInstance - The $crisp object (window.$crisp or iframe.contentWindow.$crisp)
+ * Initializes Crisp user data on the main window $crisp instance
+ *
+ * Used for the main Crisp widget (not iframe). Sets user identification and metadata
+ * using event listeners for proper timing.
+ *
+ * @param crispInstance - The $crisp object (window.$crisp)
  * @param userData - User data to set
  * @param prefilledMessage - Optional prefilled message
- * @param enabled - Whether initialization is enabled (default: true)
+ * @param enabled - Whether initialization is enabled
  */
 export function useCrispInitialization(
     crispInstance: any,
@@ -25,14 +28,9 @@ export function useCrispInitialization(
             }
         }
 
-        // Set data immediately if Crisp is already loaded
         setData()
-
-        // Listen for session loaded event - primary event Crisp fires when ready
-        // This ensures data persists across sessions and is set when Crisp initializes
         crispInstance.push(['on', 'session:loaded', setData])
 
-        // Fallback: try once after a delay to catch cases where Crisp loads quickly
         const fallbackTimer = setTimeout(setData, 1000)
 
         return () => {
diff --git a/src/hooks/useCrispProxyUrl.ts b/src/hooks/useCrispProxyUrl.ts
new file mode 100644
index 000000000..29b9b739f
--- /dev/null
+++ b/src/hooks/useCrispProxyUrl.ts
@@ -0,0 +1,69 @@
+import { useMemo } from 'react'
+import { type CrispUserData } from '@/hooks/useCrispUserData'
+
+/**
+ * Builds URL for Crisp proxy page with user data as query parameters
+ *
+ * This follows Crisp's recommended pattern for iframe embedding with JS SDK control.
+ * All data is passed via URL params so the proxy page can set it during Crisp initialization,
+ * avoiding timing issues with async postMessage approaches.
+ *
+ * @param userData - User data to encode in URL
+ * @param prefilledMessage - Optional message to prefill in chat
+ * @returns URL path to crisp-proxy page with encoded parameters
+ */
+export function useCrispProxyUrl(userData: CrispUserData, prefilledMessage?: string): string {
+    return useMemo(() => {
+        const params = new URLSearchParams()
+
+        if (userData.email) {
+            params.append('user_email', userData.email)
+        }
+        if (userData.fullName || userData.username) {
+            params.append('user_nickname', userData.fullName || userData.username || '')
+        }
+        if (userData.avatar) {
+            params.append('user_avatar', userData.avatar)
+        }
+
+        // Session metadata as JSON for support agents
+        if (
+            userData.username ||
+            userData.userId ||
+            userData.fullName ||
+            userData.grafanaLink ||
+            userData.walletAddressLink ||
+            userData.bridgeUserId ||
+            userData.mantecaUserId
+        ) {
+            const sessionData = JSON.stringify({
+                username: userData.username || '',
+                user_id: userData.userId || '',
+                full_name: userData.fullName || '',
+                grafana_dashboard: userData.grafanaLink || '',
+                wallet_address: userData.walletAddressLink || '',
+                bridge_user_id: userData.bridgeUserId || '',
+                manteca_user_id: userData.mantecaUserId || '',
+            })
+            params.append('session_data', sessionData)
+        }
+
+        if (prefilledMessage) {
+            params.append('prefilled_message', prefilledMessage)
+        }
+
+        const queryString = params.toString()
+        return queryString ? `/crisp-proxy?${queryString}` : '/crisp-proxy'
+    }, [
+        userData.email,
+        userData.fullName,
+        userData.username,
+        userData.avatar,
+        userData.userId,
+        userData.grafanaLink,
+        userData.walletAddressLink,
+        userData.bridgeUserId,
+        userData.mantecaUserId,
+        prefilledMessage,
+    ])
+}
diff --git a/src/hooks/useCrispUserData.ts b/src/hooks/useCrispUserData.ts
index e5ffbbc74..a85a47053 100644
--- a/src/hooks/useCrispUserData.ts
+++ b/src/hooks/useCrispUserData.ts
@@ -1,6 +1,11 @@
 import { useAuth } from '@/context/authContext'
+import { AccountType } from '@/interfaces'
 import { useMemo } from 'react'
 
+const GRAFANA_DASHBOARD_BASE_URL =
+    'https://teampeanut.grafana.net/d/ad31f645-81ca-4779-bfb2-bff8e03d9057/explore-peanut-wallet-user'
+const ARBISCAN_ADDRESS_BASE_URL = 'https://arbiscan.io/address'
+
 export interface CrispUserData {
     username: string | undefined
     userId: string | undefined
@@ -8,26 +13,43 @@ export interface CrispUserData {
     fullName: string | undefined
     avatar: string | undefined
     grafanaLink: string | undefined
+    walletAddress: string | undefined
+    walletAddressLink: string | undefined
+    bridgeUserId: string | undefined
+    mantecaUserId: string | undefined
 }
 
+/**
+ * Prepares user data for Crisp chat integration
+ * Extracts user information from auth context and formats it for Crisp
+ */
 export function useCrispUserData(): CrispUserData {
     const { username, userId, user } = useAuth()
 
     return useMemo(() => {
         const grafanaLink = username
-            ? `https://teampeanut.grafana.net/d/ad31f645-81ca-4779-bfb2-bff8e03d9057/explore-peanut-wallet-user?orgId=1&var-GRAFANA_VAR_Username=${encodeURIComponent(username)}`
+            ? `${GRAFANA_DASHBOARD_BASE_URL}?orgId=1&var-GRAFANA_VAR_Username=${encodeURIComponent(username)}&from=now-30d&to=now&timezone=browser`
             : undefined
 
-        // Use actual email from user data, or userId as fallback identifier for Crisp
-        const email = user?.user?.email || (userId ? `${userId}@peanut.internal` : undefined)
+        const walletAddress =
+            user?.accounts?.find((account) => account.type === AccountType.PEANUT_WALLET)?.identifier || undefined
+        const walletAddressLink = walletAddress ? `${ARBISCAN_ADDRESS_BASE_URL}/${walletAddress}` : undefined
+
+        const bridgeUserId = user?.user?.bridgeCustomerId || undefined
+        const mantecaUserId =
+            user?.user?.kycVerifications?.find((kyc) => kyc.provider === 'MANTECA')?.providerUserId || undefined
 
         return {
             username,
             userId,
-            email,
+            email: user?.user?.email || undefined,
             fullName: user?.user?.fullName,
             avatar: user?.user?.profile_picture || undefined,
             grafanaLink,
+            walletAddress,
+            walletAddressLink,
+            bridgeUserId,
+            mantecaUserId,
         }
     }, [username, userId, user])
 }
diff --git a/src/utils/crisp.ts b/src/utils/crisp.ts
index 5f919ec49..289fd3ba2 100644
--- a/src/utils/crisp.ts
+++ b/src/utils/crisp.ts
@@ -1,35 +1,36 @@
 import { type CrispUserData } from '@/hooks/useCrispUserData'
 
 /**
- * Sets Crisp user data on a given $crisp instance
- * @param crispInstance - The $crisp object (either window.$crisp or iframe.contentWindow.$crisp)
+ * Sets Crisp user identification and session metadata on a $crisp instance
+ *
+ * This is used for the main window Crisp widget (not iframe).
+ * Sets user email (critical for session persistence), nickname, avatar,
+ * and session metadata visible to support agents.
+ *
+ * @param crispInstance - The $crisp object (window.$crisp)
  * @param userData - User data to set
- * @param prefilledMessage - Optional prefilled message
+ * @param prefilledMessage - Optional message to prefill in chat
  */
 export function setCrispUserData(crispInstance: any, userData: CrispUserData, prefilledMessage?: string): void {
     if (!crispInstance) return
 
-    const { username, userId, email, fullName, avatar, grafanaLink } = userData
+    const { username, userId, email, fullName, avatar, grafanaLink, walletAddressLink, bridgeUserId, mantecaUserId } =
+        userData
 
-    // Set user email - this is critical for session persistence across devices/browsers
-    // According to Crisp docs, user:email is the primary identifier for session persistence
     if (email) {
         crispInstance.push(['set', 'user:email', [email]])
     }
 
-    // Set user nickname - prefer fullName, fallback to username
     const nickname = fullName || username || ''
     if (nickname) {
         crispInstance.push(['set', 'user:nickname', [nickname]])
     }
 
-    // Set user avatar if available
     if (avatar) {
         crispInstance.push(['set', 'user:avatar', [avatar]])
     }
 
-    // Set session data - EXACT STRUCTURE (3 nested arrays!)
-    // This metadata appears in Crisp dashboard for support agents
+    // Session metadata for support agents - must be 3 levels of nested arrays
     crispInstance.push([
         'set',
         'session:data',
@@ -39,27 +40,68 @@ export function setCrispUserData(crispInstance: any, userData: CrispUserData, pr
                 ['user_id', userId || ''],
                 ['full_name', fullName || ''],
                 ['grafana_dashboard', grafanaLink || ''],
+                ['wallet_address', walletAddressLink || ''],
+                ['bridge_user_id', bridgeUserId || ''],
+                ['manteca_user_id', mantecaUserId || ''],
             ],
         ],
     ])
 
-    // Set prefilled message if exists
     if (prefilledMessage) {
         crispInstance.push(['set', 'message:text', [prefilledMessage]])
     }
 }
 
 /**
- * Resets Crisp session - call this on logout to prevent session merging
- * @param crispInstance - The $crisp object (window.$crisp or iframe.contentWindow.$crisp)
+ * Resets Crisp session to prevent session merging between users
+ *
+ * @param crispInstance - The $crisp object
  */
 export function resetCrispSession(crispInstance: any): void {
     if (!crispInstance || typeof window === 'undefined') return
 
     try {
-        // Reset the session to prevent merging with next user's session
         crispInstance.push(['do', 'session:reset'])
     } catch (e) {
-        console.debug('Could not reset Crisp session:', e)
+        console.debug('[Crisp] Could not reset session:', e)
+    }
+}
+
+/**
+ * Resets all Crisp sessions on logout (main window + proxy iframes)
+ *
+ * Attempts to reset currently mounted proxy iframes via postMessage,
+ * and sets a sessionStorage flag for proxy pages that aren't currently mounted.
+ */
+export function resetCrispProxySessions(): void {
+    if (typeof window === 'undefined') return
+
+    try {
+        const iframes = document.querySelectorAll('iframe[src*="crisp-proxy"]')
+
+        iframes.forEach((iframe) => {
+            try {
+                const iframeWindow = (iframe as HTMLIFrameElement).contentWindow
+                if (iframeWindow) {
+                    iframeWindow.postMessage(
+                        {
+                            type: 'CRISP_RESET_SESSION',
+                        },
+                        window.location.origin
+                    )
+                }
+            } catch (e) {
+                console.debug('[Crisp] Could not reset proxy iframe:', e)
+            }
+        })
+
+        if (window.$crisp) {
+            resetCrispSession(window.$crisp)
+        }
+
+        // Flag for proxy pages that aren't currently mounted
+        sessionStorage.setItem('crisp_needs_reset', 'true')
+    } catch (e) {
+        console.debug('[Crisp] Could not reset proxy sessions:', e)
     }
 }

From c2fffb39c178064d446122d9fbe58064f6d9d147 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Sat, 1 Nov 2025 02:21:57 -0300
Subject: [PATCH 6/7] format

---
 src/hooks/useCrispEmbedUrl.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/hooks/useCrispEmbedUrl.ts b/src/hooks/useCrispEmbedUrl.ts
index 56b1b727e..f8ddca460 100644
--- a/src/hooks/useCrispEmbedUrl.ts
+++ b/src/hooks/useCrispEmbedUrl.ts
@@ -30,4 +30,3 @@ export function useCrispEmbedUrl(userData: CrispUserData): string {
         return queryString ? `${CRISP_EMBED_BASE_URL}&${queryString}` : CRISP_EMBED_BASE_URL
     }, [userData.email, userData.fullName, userData.username, userData.avatar])
 }
-

From 60dedbdca948a8d59934ebf6452cef488eeb6cc9 Mon Sep 17 00:00:00 2001
From: Hugo Montenegro <h@hugo0.com>
Date: Mon, 3 Nov 2025 14:56:47 -0300
Subject: [PATCH 7/7] refactor: address PR review comments for Crisp
 integration

- Extract hardcoded URLs and IDs to constants files (DRY)
- Remove unused useCrispInitialization hook and CrispChat default component
- Clean up unused imports (resetCrispSession)
- Add clarifying comments for wallet address source
- Move Grafana/Arbiscan URLs to constants/support.ts
- Move CRISP_WEBSITE_ID to constants/crisp.ts (was duplicated 3x)
---
 src/app/crisp-proxy/page.tsx        |  3 +-
 src/components/CrispChat.tsx        | 43 +++--------------------------
 src/components/index.ts             |  2 +-
 src/constants/crisp.ts              |  6 ++++
 src/constants/support.ts            | 10 +++++++
 src/context/authContext.tsx         |  2 +-
 src/hooks/useCrispEmbedUrl.ts       |  2 +-
 src/hooks/useCrispInitialization.ts | 43 -----------------------------
 src/hooks/useCrispUserData.ts       |  9 +++---
 9 files changed, 29 insertions(+), 91 deletions(-)
 create mode 100644 src/constants/crisp.ts
 create mode 100644 src/constants/support.ts
 delete mode 100644 src/hooks/useCrispInitialization.ts

diff --git a/src/app/crisp-proxy/page.tsx b/src/app/crisp-proxy/page.tsx
index e1518559c..2fb31cf38 100644
--- a/src/app/crisp-proxy/page.tsx
+++ b/src/app/crisp-proxy/page.tsx
@@ -3,8 +3,7 @@
 import Script from 'next/script'
 import { useEffect, Suspense } from 'react'
 import { useSearchParams } from 'next/navigation'
-
-const CRISP_WEBSITE_ID = '916078be-a6af-4696-82cb-bc08d43d9125'
+import { CRISP_WEBSITE_ID } from '@/constants/crisp'
 
 /**
  * Crisp Proxy Page - Same-origin iframe solution for embedded Crisp chat
diff --git a/src/components/CrispChat.tsx b/src/components/CrispChat.tsx
index 61b799446..2dd6106b2 100644
--- a/src/components/CrispChat.tsx
+++ b/src/components/CrispChat.tsx
@@ -1,14 +1,13 @@
 'use client'
 
-import Script from 'next/script'
 import { useSupportModalContext } from '@/context/SupportModalContext'
-import { useCrispUserData } from '@/hooks/useCrispUserData'
-import { useCrispInitialization } from '@/hooks/useCrispInitialization'
-
-const CRISP_WEBSITE_ID = '916078be-a6af-4696-82cb-bc08d43d9125'
 
 /**
  * Button component that opens the support drawer
+ *
+ * The support UI is rendered via SupportDrawer component (iframe proxy approach)
+ * rather than the native Crisp widget to maintain better UX control and avoid
+ * page layout interference.
  */
 export const CrispButton = ({ children, ...rest }: React.HTMLAttributes<HTMLButtonElement>) => {
     const { setIsSupportModalOpen } = useSupportModalContext()
@@ -23,37 +22,3 @@ export const CrispButton = ({ children, ...rest }: React.HTMLAttributes<HTMLButt
         </button>
     )
 }
-
-/**
- * Loads the main Crisp chat widget script and initializes user data
- *
- * This creates the main window $crisp instance. The actual chat UI is rendered
- * via SupportDrawer as an iframe to avoid page layout interference.
- */
-export default function CrispChat() {
-    const userData = useCrispUserData()
-
-    useCrispInitialization(
-        typeof window !== 'undefined' ? window.$crisp : null,
-        userData,
-        undefined,
-        !!userData.userId && typeof window !== 'undefined'
-    )
-
-    return (
-        <Script strategy="afterInteractive" id="crisp-main-widget">
-            {`
-                window.$crisp=[];
-                window.CRISP_WEBSITE_ID="${CRISP_WEBSITE_ID}";
-                (function(){
-                    d=document;
-                    s=d.createElement("script");
-                    s.src="https://client.crisp.chat/l.js";
-                    s.async=1;
-                    d.getElementsByTagName("head")[0].appendChild(s);
-                })();
-                window.$crisp.push(["safe", true]);
-            `}
-        </Script>
-    )
-}
diff --git a/src/components/index.ts b/src/components/index.ts
index 057eb6dc9..139dbd478 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,6 @@
 export * from './Blog'
 export * from './Claim'
-export * from './CrispChat'
+export * from './CrispChat' // Only exports CrispButton
 export * from './Global/DaimoPayButton'
 export * from './Jobs'
 export * from './Privacy'
diff --git a/src/constants/crisp.ts b/src/constants/crisp.ts
new file mode 100644
index 000000000..e4707341e
--- /dev/null
+++ b/src/constants/crisp.ts
@@ -0,0 +1,6 @@
+/**
+ * Crisp chat integration configuration
+ */
+
+/** Crisp website ID for Peanut's support chat */
+export const CRISP_WEBSITE_ID = '916078be-a6af-4696-82cb-bc08d43d9125'
diff --git a/src/constants/support.ts b/src/constants/support.ts
new file mode 100644
index 000000000..f7cb4afef
--- /dev/null
+++ b/src/constants/support.ts
@@ -0,0 +1,10 @@
+/**
+ * Support and debugging tool URLs
+ */
+
+/** Grafana dashboard for exploring user wallet activity */
+export const GRAFANA_DASHBOARD_BASE_URL =
+    'https://teampeanut.grafana.net/d/ad31f645-81ca-4779-bfb2-bff8e03d9057/explore-peanut-wallet-user'
+
+/** Arbiscan block explorer for viewing wallet addresses on Arbitrum */
+export const ARBISCAN_ADDRESS_BASE_URL = 'https://arbiscan.io/address'
diff --git a/src/context/authContext.tsx b/src/context/authContext.tsx
index abd1b8589..d6f3d5e89 100644
--- a/src/context/authContext.tsx
+++ b/src/context/authContext.tsx
@@ -11,7 +11,7 @@ import {
     clearRedirectUrl,
     updateUserPreferences,
 } from '@/utils'
-import { resetCrispSession, resetCrispProxySessions } from '@/utils/crisp'
+import { resetCrispProxySessions } from '@/utils/crisp'
 import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 import { createContext, type ReactNode, useContext, useState, useEffect, useMemo, useCallback } from 'react'
diff --git a/src/hooks/useCrispEmbedUrl.ts b/src/hooks/useCrispEmbedUrl.ts
index f8ddca460..28b5311cc 100644
--- a/src/hooks/useCrispEmbedUrl.ts
+++ b/src/hooks/useCrispEmbedUrl.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { type CrispUserData } from '@/hooks/useCrispUserData'
+import { CRISP_WEBSITE_ID } from '@/constants/crisp'
 
-const CRISP_WEBSITE_ID = '916078be-a6af-4696-82cb-bc08d43d9125'
 const CRISP_EMBED_BASE_URL = `https://go.crisp.chat/chat/embed/?website_id=${CRISP_WEBSITE_ID}`
 
 /**
diff --git a/src/hooks/useCrispInitialization.ts b/src/hooks/useCrispInitialization.ts
deleted file mode 100644
index d1e08fa8a..000000000
--- a/src/hooks/useCrispInitialization.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useEffect } from 'react'
-import { setCrispUserData } from '@/utils/crisp'
-import { type CrispUserData } from './useCrispUserData'
-
-/**
- * Initializes Crisp user data on the main window $crisp instance
- *
- * Used for the main Crisp widget (not iframe). Sets user identification and metadata
- * using event listeners for proper timing.
- *
- * @param crispInstance - The $crisp object (window.$crisp)
- * @param userData - User data to set
- * @param prefilledMessage - Optional prefilled message
- * @param enabled - Whether initialization is enabled
- */
-export function useCrispInitialization(
-    crispInstance: any,
-    userData: CrispUserData,
-    prefilledMessage?: string,
-    enabled: boolean = true
-) {
-    useEffect(() => {
-        if (!enabled || !userData.userId || !crispInstance) return
-
-        const setData = () => {
-            if (crispInstance) {
-                setCrispUserData(crispInstance, userData, prefilledMessage)
-            }
-        }
-
-        setData()
-        crispInstance.push(['on', 'session:loaded', setData])
-
-        const fallbackTimer = setTimeout(setData, 1000)
-
-        return () => {
-            clearTimeout(fallbackTimer)
-            if (crispInstance) {
-                crispInstance.push(['off', 'session:loaded', setData])
-            }
-        }
-    }, [crispInstance, userData, prefilledMessage, enabled])
-}
diff --git a/src/hooks/useCrispUserData.ts b/src/hooks/useCrispUserData.ts
index a85a47053..938f8424b 100644
--- a/src/hooks/useCrispUserData.ts
+++ b/src/hooks/useCrispUserData.ts
@@ -1,10 +1,7 @@
 import { useAuth } from '@/context/authContext'
 import { AccountType } from '@/interfaces'
 import { useMemo } from 'react'
-
-const GRAFANA_DASHBOARD_BASE_URL =
-    'https://teampeanut.grafana.net/d/ad31f645-81ca-4779-bfb2-bff8e03d9057/explore-peanut-wallet-user'
-const ARBISCAN_ADDRESS_BASE_URL = 'https://arbiscan.io/address'
+import { GRAFANA_DASHBOARD_BASE_URL, ARBISCAN_ADDRESS_BASE_URL } from '@/constants/support'
 
 export interface CrispUserData {
     username: string | undefined
@@ -31,6 +28,10 @@ export function useCrispUserData(): CrispUserData {
             ? `${GRAFANA_DASHBOARD_BASE_URL}?orgId=1&var-GRAFANA_VAR_Username=${encodeURIComponent(username)}&from=now-30d&to=now&timezone=browser`
             : undefined
 
+        // Use address from user.accounts (database) rather than useWallet hook
+        // This ensures we always show the user's wallet address in support metadata,
+        // even if ZeroDev client isn't initialized yet. useWallet().address could be
+        // undefined during initialization, but we want persistent data for support agents.
         const walletAddress =
             user?.accounts?.find((account) => account.type === AccountType.PEANUT_WALLET)?.identifier || undefined
         const walletAddressLink = walletAddress ? `${ARBISCAN_ADDRESS_BASE_URL}/${walletAddress}` : undefined