cuoral-ionic 0.0.8 → 0.1.0

package/CuoralIonic.podspec

@@ -0,0 +1,17 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name = 'CuoralIonic'
+  s.version = package['version']
+  s.summary = package['description']
+  s.license = package['license']
+  s.homepage = package['repository']['url']
+  s.author = package['author']
+  s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
+  s.source_files = 'ios/Plugin/**/*.{swift,h,m,c,cc,mm,cpp}'
+  s.ios.deployment_target  = '13.0'
+  s.dependency 'Capacitor'
+  s.swift_version = '5.1'
+end

package/README.md

@@ -57,6 +57,33 @@ Add to your `Info.plist`:
 
 **Note:** Screen recording permission is requested automatically by iOS when recording starts. No additional permissions are needed for crash tracking or intelligence features.
 
+### 📱 Google Play Store Declaration (Android Only)
+
+**IMPORTANT:** When submitting your app to Google Play Store, you'll be asked to declare why your app uses `FOREGROUND_SERVICE_MEDIA_PROJECTION` (screen recording permission).
+
+**What to Do:**
+
+1. Go to Play Console → **Policy** → **App Content** → **Foreground Service Types**
+2. Find `FOREGROUND_SERVICE_MEDIA_PROJECTION` → Click **Manage**
+3. Select category: **Customer Support / Bug Reporting**
+4. Provide justification:
+
+```
+Our app uses screen recording exclusively for customer support purposes when users 
+initiate support requests. Users explicitly control when recording starts/stops via 
+the support widget. All recordings are transmitted securely to our support platform 
+to help resolve user-reported issues. No recording occurs without user action.
+```
+
+**Why This is Required:**
+
+- Screen recording is a "sensitive permission" that requires declaration
+- Google wants to ensure it's used appropriately (which it is - user-initiated support)
+- This is a simple form, not a special approval process
+- No code changes needed - your app is already configured correctly
+
+**Note:** iOS App Store does not require this declaration.
+
 ## Quick Start
 
 ### Option 1: Modal with Floating Button (Recommended)
@@ -313,9 +340,37 @@ interface CuoralOptions {
   widgetBaseUrl?: string; // Optional: Custom widget URL (default: CDN)
   showFloatingButton?: boolean; // Optional: Show floating chat button (default: true)
   useModal?: boolean; // Optional: Use modal display mode (default: true)
+  primaryColor?: string; // Optional: Custom primary color (auto-fetched from backend if not provided)
 }
 ```
 
+### Branding & Colors
+
+The floating button automatically uses your organization's brand color configured in the Cuoral dashboard. During `initialize()`, the SDK fetches your organization's configuration from the backend:
+
+```typescript
+// Automatic (Recommended):
+const cuoral = new Cuoral({ publicKey: 'your-key' });
+await cuoral.initialize(); // Fetches your brand color from backend
+
+// Manual override (Optional):
+const cuoral = new Cuoral({
+  publicKey: 'your-key',
+  primaryColor: '#FF5733', // Force specific color
+});
+await cuoral.initialize();
+```
+
+**How it works:**
+
+- SDK fetches session configuration (`POST /conversation/session/get`) during initialization
+- Extracts `color` from `configuration` object in response
+- Applies color to floating button background and shadows
+- Falls back to default blue (#007AFF) if color not provided
+
+**Configure your brand color:**
+Go to Cuoral Dashboard → Settings → Branding → Primary Color
+
 ### Widget URL
 
 By default, the widget loads from `https://js.cuoral.com/mobile.html` (production CDN).
@@ -406,6 +461,7 @@ async stopUserRecording() {
 ```
 
 **Use Cases:**
+
 - Allow users to record their issue before contacting support
 - Implement custom recording UI in your app
 - Record specific user flows programmatically
@@ -413,6 +469,81 @@ async stopUserRecording() {
 
 **Note:** Recording still requires user permission on iOS (microphone access). The video file is automatically processed and available for playback in the support widget.
 
+## Dual Session Capture
+
+Cuoral provides **two complementary ways** to capture user sessions:
+
+### 📹 Native Video Screen Recording (Mobile)
+
+**When:** User explicitly taps "Record" button in widget or via programmatic API
+
+✅ **What it captures:**
+
+- Exact visual output (pixel-perfect replay)
+- All UI elements including Shadow DOM components
+- Animations, transitions, gestures
+- Everything the user sees
+
+📹 **File Size:** ~11 MB per minute (1.5 Mbps bitrate)  
+📤 **Upload:** Automatic to secure backend  
+🎯 **Best for:** Visual bug reproduction, UI issues, specific user flows
+
+### 🎬 DOM Replay Recording (rrweb - Always On)
+
+**When:** Automatically running in background during entire session
+
+✅ **What it captures:**
+
+- DOM structure and mutations
+- User interactions (clicks, scrolls, inputs)
+- Network requests and console errors
+- Page navigation and state changes
+- Custom events (rage clicks, form submissions)
+
+💾 **Data Size:** Lightweight (~100-500 KB per session)  
+📤 **Upload:** Batched every 10 seconds  
+🎯 **Best for:** Understanding user journey, behavior analytics, session context
+
+### 🔄 How They Work Together
+
+Both features run **simultaneously** to give you complete visibility:
+
+1. **DOM Replay (rrweb)** - Always recording in background, captures user journey and interactions
+2. **Video Recording** - User-initiated, captures visual output when they hit an issue
+
+**Example Workflow:**
+
+- User navigates app → rrweb captures all interactions
+- User hits a bug → User taps "Record" → Native video captures visual issue
+- Support team sees both: The journey (rrweb) + The exact visual problem (video)
+
+**Privacy:** DOM replay masks password inputs. Other fields captured for support context. Native video captures exact screen content when user explicitly records.
+
+### 🎨 Shadow DOM Handling (Ionic Components)
+
+**Problem:** Ionic uses Shadow DOM which rrweb cannot natively access.  
+**Solution:** The SDK automatically captures Shadow DOM content every 5 seconds.
+
+**How it works:**
+
+1. SDK scans all elements with Shadow DOM (ion-button, ion-content, etc.)
+2. Serializes Shadow DOM innerHTML to `data-cuoral-shadow-*` attributes
+3. rrweb captures these attributes (it can see regular attributes)
+4. Your replay dashboard uses these attributes to reconstruct the UI
+
+**To verify it's working:**
+Open DevTools → Inspect any Ionic element → Should see `data-cuoral-shadow-html` attribute
+
+**If pages still show black:**
+See [SHADOW_DOM_CAPTURE_GUIDE.md](SHADOW_DOM_CAPTURE_GUIDE.md) for optimization tips:
+
+- Use open Shadow DOM (not closed)
+- Add data-content attributes to critical elements
+- Use semantic CSS classes
+- The guide includes code examples and troubleshooting
+
+**Note:** Native video recording (user-initiated) always works perfectly - no Shadow DOM limitations.
+
 ### Manual Intelligence Tracking
 
 Track custom events beyond automatic tracking:
@@ -421,15 +552,14 @@ Track custom events beyond automatic tracking:
 // Track page/screen view
 this.cuoral.trackPageView('/checkout', {
   cart_items: 3,
-  total_value: 99.99
+  total_value: 99.99,
 });
 
 // Track error manually
-this.cuoral.trackError(
-  'Payment failed',
-  error.stack,
-  { payment_method: 'credit_card', amount: 99.99 }
-);
+this.cuoral.trackError('Payment failed', error.stack, {
+  payment_method: 'credit_card',
+  amount: 99.99,
+});
 ```
 
 ## What Gets Handled Automatically

package/dist/cuoral.d.ts

@@ -7,6 +7,7 @@ export interface CuoralOptions {
     widgetBaseUrl?: string;
     showFloatingButton?: boolean;
     useModal?: boolean;
+    primaryColor?: string;
 }
 /**
  * Main Cuoral class - simple API for users

package/dist/cuoral.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cuoral.d.ts","sourceRoot":"","sources":["../src/cuoral.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAeD;;GAEG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,KAAK,CAAC,CAAc;IAC5B,OAAO,CAAC,YAAY,CAAC,CAAqB;IAC1C,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,qBAAqB,CAAuC;IACpF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAwB;gBAElD,OAAO,EAAE,aAAa;IA4DlC;;OAEG;IACU,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAyBxC;;OAEG;YACW,sBAAsB;IA2CpC;;OAEG;YACW,yBAAyB;IAoCvC;;OAEG;IACI,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI;IAM1D;;OAEG;IACI,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI;IAM7E;;;;;OAKG;IACU,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IA0C7E;;;OAGG;IACU,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC;IAS/C;;;;OAIG;IACU,aAAa,IAAI,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAC,GAAG,IAAI,CAAC;IAiBxG;;OAEG;IACI,SAAS,IAAI,IAAI;IASxB;;OAEG;IACI,UAAU,IAAI,IAAI;IAMzB;;OAEG;IACI,WAAW,IAAI,OAAO;IAI7B;;OAEG;IACI,YAAY,IAAI,MAAM;IAuB7B;;OAEG;IACU,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IA6C1C;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAsB5B;;OAEG;IACI,OAAO,IAAI,IAAI;IActB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;OAEG;YACW,eAAe;IAkC7B;;OAEG;YACW,UAAU;IAmBxB;;OAEG;IACH,OAAO,CAAC,oBAAoB;CAyG7B"}
+{"version":3,"file":"cuoral.d.ts","sourceRoot":"","sources":["../src/cuoral.ts"],"names":[],"mappings":"AAOA,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkBD;;GAEG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,KAAK,CAAC,CAAc;IAC5B,OAAO,CAAC,YAAY,CAAC,CAAqB;IAC1C,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,qBAAqB,CAAuC;IACpF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAwB;gBAElD,OAAO,EAAE,aAAa;IAyDlC;;OAEG;IACU,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IA0BxC;;OAEG;YACW,sBAAsB;IAoDpC;;OAEG;YACW,yBAAyB;IAoCvC;;OAEG;IACI,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI;IAM1D;;OAEG;IACI,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI;IAM7E;;;;;OAKG;IACU,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IA0C7E;;;OAGG;IACU,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC;IAS/C;;;;OAIG;IACU,aAAa,IAAI,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAC,GAAG,IAAI,CAAC;IAiBxG;;OAEG;IACI,SAAS,IAAI,IAAI;IASxB;;OAEG;IACI,UAAU,IAAI,IAAI;IAMzB;;OAEG;IACI,WAAW,IAAI,OAAO;IAI7B;;OAEG;IACI,YAAY,IAAI,MAAM;IAuB7B;;OAEG;IACU,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IA6C1C;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAsB5B;;OAEG;IACI,OAAO,IAAI,IAAI;IActB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;OAEG;YACW,eAAe;IAkC7B;;OAEG;YACW,UAAU;IAmBxB;;OAEG;IACH,OAAO,CAAC,oBAAoB;CAyG7B"}

package/dist/cuoral.js

@@ -39,10 +39,7 @@ export class Cuoral {
         if (options.lastName)
             params.set('last_name', options.lastName);
         const widgetUrl = `${baseUrl}?${params.toString()}`;
-        // Initialize modal if enabled
-        if (this.options.useModal) {
-            this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton);
-        }
+        // Note: Modal will be created in initialize() after fetching primary color from backend
         // Initialize bridge and recorder
         this.bridge = new CuoralBridge({
             widgetUrl,
@@ -63,6 +60,7 @@ export class Cuoral {
      */
     async initialize() {
         // Fetch session configuration and initialize intelligence if enabled by backend
+        // This also fetches the organization's primary color
         await this.initializeIntelligence();
         console.log('[Cuoral] Initialize - Session ID:', localStorage.getItem('__x_loadID'));
         // Setup localStorage listener to detect when widget changes session
@@ -71,7 +69,7 @@ export class Cuoral {
         // Recreate modal if it was destroyed (e.g., after clearSession)
         if (this.options.useModal && !this.modal) {
             const widgetUrl = this.getWidgetUrl();
-            this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton);
+            this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton, this.options.primaryColor);
         }
         // Update modal URL with session ID
         if (this.modal) {
@@ -96,6 +94,15 @@ export class Cuoral {
             }
             // Fetch session configuration
             const config = await this.fetchSessionConfiguration(sessionId);
+            // Extract organization's primary color from config if available
+            if (!this.options.primaryColor && config?.color) {
+                this.options.primaryColor = config.color;
+                console.log('[Cuoral] Using organization primary color:', this.options.primaryColor);
+            }
+            else if (!this.options.primaryColor) {
+                this.options.primaryColor = '#007AFF';
+                console.log('[Cuoral] Using default primary color');
+            }
             // If session was invalid/expired, try to initiate a new one
             if (!config && !localStorage.getItem('__x_loadID')) {
                 sessionId = await this.initiateSession();

package/dist/index.esm.js

@@ -361,10 +361,11 @@ class CuoralBridge {
  * Handles full-screen modal display with floating button
  */
 class CuoralModal {
-    constructor(widgetUrl, showFloatingButton = true) {
+    constructor(widgetUrl, showFloatingButton = true, primaryColor = '#007AFF') {
         this.isOpen = false;
         this.widgetUrl = widgetUrl;
         this.showFloatingButton = showFloatingButton;
+        this.primaryColor = primaryColor;
     }
     /**
      * Update the widget URL (e.g., to include new session_id)
@@ -432,12 +433,12 @@ class CuoralModal {
             width: '56px',
             height: '56px',
             borderRadius: '50%',
-            backgroundColor: '#007AFF',
+            backgroundColor: this.primaryColor,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
             cursor: 'pointer',
-            boxShadow: '0 4px 12px rgba(0, 122, 255, 0.4)',
+            boxShadow: `0 4px 12px ${this.primaryColor}66`, // 40% opacity
             zIndex: '999999',
             transition: 'transform 0.2s, box-shadow 0.2s'
         });
@@ -445,13 +446,13 @@ class CuoralModal {
         this.floatingButton.addEventListener('mouseenter', () => {
             if (this.floatingButton) {
                 this.floatingButton.style.transform = 'scale(1.1)';
-                this.floatingButton.style.boxShadow = '0 6px 16px rgba(0, 122, 255, 0.5)';
+                this.floatingButton.style.boxShadow = `0 6px 16px ${this.primaryColor}80`; // 50% opacity
             }
         });
         this.floatingButton.addEventListener('mouseleave', () => {
             if (this.floatingButton) {
                 this.floatingButton.style.transform = 'scale(1)';
-                this.floatingButton.style.boxShadow = '0 4px 12px rgba(0, 122, 255, 0.4)';
+                this.floatingButton.style.boxShadow = `0 4px 12px ${this.primaryColor}66`; // 40% opacity
             }
         });
         // Click to open modal
@@ -650,11 +651,13 @@ class CuoralIntelligence {
         // Session replay state
         this.rrwebStopFn = null;
         this.rrwebEvents = [];
+        this.rrwebEmit = null; // Store emit function for custom events
         this.customEvents = [];
         this.sessionReplayTimer = null;
         this.clickTimestamps = new Map();
         this.rageClickThreshold = 5; // 5 rapid clicks
         this.rageClickWindowMs = 2000; // Within 2 seconds
+        this.shadowDOMNodeMap = new Map(); // Map elements to unique IDs
         this.sessionId = sessionId;
     }
     /**
@@ -1164,27 +1167,65 @@ class CuoralIntelligence {
     }
     /**
      * Setup session replay with rrweb
+     * Captures everything for maximum replay fidelity
      */
     setupSessionReplay() {
         if (!this.sessionId) {
             console.warn('[Cuoral Intelligence] Session replay requires a session ID');
             return;
         }
-        // Start rrweb recording
+        // Start rrweb recording with aggressive capture settings
         this.rrwebStopFn = rrweb.record({
             emit: (event) => {
                 this.rrwebEvents.push(event);
+                this.rrwebEmit = this.rrwebEmit || ((e) => this.rrwebEvents.push(e)); // Store emit reference
             },
-            checkoutEveryNms: 60000, // Full snapshot every minute
+            // Take full snapshots more frequently to catch dynamic content
+            checkoutEveryNms: 30000, // Every 30 seconds (was 60s)
+            // Capture everything - minimize sampling throttling
             sampling: {
-                scroll: 150, // Throttle scroll events
-                media: 800,
-                input: 'last', // Only record final input value (privacy)
+                scroll: 50, // Capture scroll very frequently (was 150)
+                media: 200, // Capture media interactions frequently (was 800)
+                input: 'last', // Only record final input value (privacy for passwords)
+                mousemove: true, // Capture all mouse movements
+                mouseInteraction: true, // Capture all mouse interactions
+            },
+            // Privacy: Only mask sensitive inputs (passwords, credit cards)
+            // Everything else is captured for maximum replay fidelity
+            maskAllInputs: false, // Don't mask all inputs
+            maskInputOptions: {
+                password: true, // Mask password fields
+                email: false, // Capture emails
+                text: false, // Capture text inputs
+                textarea: false, // Capture textareas
+                select: false, // Capture select dropdowns
+                // Mask credit card patterns
+            },
+            // Capture all content types
+            recordCanvas: true, // Capture canvas elements (charts, games, etc.)
+            // Inline everything for perfect replay
+            inlineStylesheet: true, // Inline all external stylesheets
+            inlineImages: true, // Inline images as base64 (larger but more reliable)
+            collectFonts: true, // Capture custom fonts
+            // Block/ignore classes - customers can add these to sensitive elements
+            blockClass: 'cuoral-block', // Add to elements that should be blocked (replaced with placeholder)
+            ignoreClass: 'cuoral-ignore', // Add to elements that should be ignored (not captured)
+            // Capture mutations aggressively
+            slimDOMOptions: {
+                // Don't slim anything - capture full fidelity
+                script: false, // Keep scripts
+                comment: false, // Keep comments
+                headFavicon: false, // Keep favicons
+                headWhitespace: false, // Keep whitespace
+                headMetaSocial: false, // Keep meta tags
+                headMetaRobots: false, // Keep robots meta
+                headMetaHttpEquiv: false, // Keep http-equiv
+                headMetaAuthorship: false, // Keep authorship
+                headMetaDescKeywords: false, // Keep description/keywords
             },
-            maskAllInputs: true, // Mask sensitive inputs (privacy)
-            blockClass: 'cuoral-block',
-            ignoreClass: 'cuoral-ignore',
         });
+        // Setup Shadow DOM observer to capture Ionic components
+        this.setupShadowDOMObserver();
         // Setup custom event tracking
         this.setupClickTracking();
         this.setupScrollTracking();
@@ -1336,6 +1377,159 @@ class CuoralIntelligence {
             });
         });
     }
+    /**
+     * Setup Shadow DOM observer to capture Ionic component content
+     * Emits custom rrweb events with Shadow DOM snapshots for viewer reconstruction
+     */
+    setupShadowDOMObserver() {
+        let shadowNodeIdCounter = 1;
+        let captureTimeout = null;
+        const captureShadowDOM = (immediate = false) => {
+            // Debounce rapid calls (e.g., during scroll)
+            if (!immediate && captureTimeout) {
+                clearTimeout(captureTimeout);
+            }
+            const doCapture = () => {
+                if (!this.rrwebEmit)
+                    return;
+                const shadowDOMData = [];
+                const elementsWithShadowDOM = document.querySelectorAll('*');
+                elementsWithShadowDOM.forEach((element) => {
+                    if (element.shadowRoot) {
+                        try {
+                            // Assign unique ID to element if it doesn't have one
+                            if (!this.shadowDOMNodeMap.has(element)) {
+                                this.shadowDOMNodeMap.set(element, shadowNodeIdCounter++);
+                            }
+                            const nodeId = this.shadowDOMNodeMap.get(element);
+                            const tagName = element.tagName.toLowerCase();
+                            // Capture Shadow DOM HTML
+                            const shadowHTML = element.shadowRoot.innerHTML;
+                            // Capture ALL styles from Shadow DOM
+                            const styleSheets = [];
+                            // 1. Capture inline <style> tags
+                            const shadowStyles = element.shadowRoot.querySelectorAll('style');
+                            shadowStyles.forEach((styleEl) => {
+                                if (styleEl.textContent) {
+                                    styleSheets.push(styleEl.textContent);
+                                }
+                            });
+                            // 2. Capture adoptedStyleSheets (modern CSS API)
+                            if (element.shadowRoot.adoptedStyleSheets) {
+                                try {
+                                    element.shadowRoot.adoptedStyleSheets.forEach((sheet) => {
+                                        try {
+                                            const rules = Array.from(sheet.cssRules).map(rule => rule.cssText).join('\n');
+                                            if (rules)
+                                                styleSheets.push(rules);
+                                        }
+                                        catch (e) {
+                                            // CORS blocked stylesheet
+                                        }
+                                    });
+                                }
+                                catch (e) {
+                                    // Browser doesn't support adoptedStyleSheets
+                                }
+                            }
+                            // 3. Capture external <link> stylesheets in Shadow DOM
+                            const shadowLinks = element.shadowRoot.querySelectorAll('link[rel="stylesheet"]');
+                            shadowLinks.forEach((linkEl) => {
+                                const href = linkEl.href;
+                                if (href) {
+                                    // Store link href so dashboard can also load it
+                                    styleSheets.push(`/* @import url("${href}"); */`);
+                                }
+                            });
+                            // 4. Capture CSS custom properties from host element
+                            // Ionic components use CSS variables extensively (--ion-color-*, etc.)
+                            const computedStyle = window.getComputedStyle(element);
+                            const cssVariables = [];
+                            // Get all CSS custom properties from host
+                            for (let i = 0; i < computedStyle.length; i++) {
+                                const propertyName = computedStyle[i];
+                                if (propertyName.startsWith('--')) {
+                                    const propertyValue = computedStyle.getPropertyValue(propertyName).trim();
+                                    if (propertyValue) {
+                                        cssVariables.push(`${propertyName}: ${propertyValue};`);
+                                    }
+                                }
+                            }
+                            // Add CSS variables as a :host rule
+                            if (cssVariables.length > 0) {
+                                styleSheets.push(`:host { ${cssVariables.join(' ')} }`);
+                            }
+                            // Get element's CSS selector for reconstruction
+                            const selector = this.getElementSelector(element);
+                            // Capture element attributes (Ionic uses color="primary", mode="ios", etc.)
+                            const attributes = {};
+                            for (let i = 0; i < element.attributes.length; i++) {
+                                const attr = element.attributes[i];
+                                // Skip internal attributes
+                                if (!attr.name.startsWith('data-cuoral') && !attr.name.startsWith('ng-')) {
+                                    attributes[attr.name] = attr.value;
+                                }
+                            }
+                            // Create Shadow DOM snapshot
+                            shadowDOMData.push({
+                                nodeId,
+                                tagName,
+                                selector,
+                                attributes, // NEW: Include element attributes
+                                shadowHTML,
+                                styleSheets,
+                                timestamp: Date.now(),
+                            });
+                            // Also set data attribute as fallback
+                            element.setAttribute('data-cuoral-shadow-id', String(nodeId));
+                        }
+                        catch (error) {
+                            // Shadow DOM might be closed
+                            console.warn('[Cuoral Intelligence] Failed to capture Shadow DOM:', error);
+                        }
+                    }
+                });
+                // Emit custom event with Shadow DOM data
+                if (shadowDOMData.length > 0 && this.rrwebEmit) {
+                    this.rrwebEmit({
+                        type: 5, // CustomEvent type in rrweb
+                        data: {
+                            tag: 'cuoral-shadow-dom',
+                            payload: {
+                                shadows: shadowDOMData,
+                                url: window.location.href,
+                            },
+                        },
+                        timestamp: Date.now(),
+                    });
+                    console.log(`[Cuoral Intelligence] Captured ${shadowDOMData.length} Shadow DOM elements`);
+                }
+            };
+            if (immediate) {
+                doCapture();
+            }
+            else {
+                // Debounce: wait 500ms after last call
+                captureTimeout = setTimeout(doCapture, 500);
+            }
+        };
+        // Run immediately on init
+        captureShadowDOM(true);
+        // Observe DOM mutations to catch dynamically added Shadow DOM elements
+        const observer = new MutationObserver(() => {
+            captureShadowDOM(false); // Debounced
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // Capture on scroll events (debounced)
+        window.addEventListener('scroll', () => captureShadowDOM(false), { passive: true });
+        // Also listen for Ionic scroll events
+        document.addEventListener('ionScroll', () => captureShadowDOM(false), { passive: true });
+        // Periodic capture as fallback (every 5 seconds now, since we have scroll capture)
+        setInterval(() => captureShadowDOM(true), 5000);
+    }
     /**
      * Track custom business events (flows, features, etc.)
      */
@@ -1464,10 +1658,7 @@ class Cuoral {
         if (options.lastName)
             params.set('last_name', options.lastName);
         const widgetUrl = `${baseUrl}?${params.toString()}`;
-        // Initialize modal if enabled
-        if (this.options.useModal) {
-            this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton);
-        }
+        // Note: Modal will be created in initialize() after fetching primary color from backend
         // Initialize bridge and recorder
         this.bridge = new CuoralBridge({
             widgetUrl,
@@ -1488,6 +1679,7 @@ class Cuoral {
      */
     async initialize() {
         // Fetch session configuration and initialize intelligence if enabled by backend
+        // This also fetches the organization's primary color
         await this.initializeIntelligence();
         console.log('[Cuoral] Initialize - Session ID:', localStorage.getItem('__x_loadID'));
         // Setup localStorage listener to detect when widget changes session
@@ -1496,7 +1688,7 @@ class Cuoral {
         // Recreate modal if it was destroyed (e.g., after clearSession)
         if (this.options.useModal && !this.modal) {
             const widgetUrl = this.getWidgetUrl();
-            this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton);
+            this.modal = new CuoralModal(widgetUrl, this.options.showFloatingButton, this.options.primaryColor);
         }
         // Update modal URL with session ID
         if (this.modal) {
@@ -1521,6 +1713,15 @@ class Cuoral {
             }
             // Fetch session configuration
             const config = await this.fetchSessionConfiguration(sessionId);
+            // Extract organization's primary color from config if available
+            if (!this.options.primaryColor && config?.color) {
+                this.options.primaryColor = config.color;
+                console.log('[Cuoral] Using organization primary color:', this.options.primaryColor);
+            }
+            else if (!this.options.primaryColor) {
+                this.options.primaryColor = '#007AFF';
+                console.log('[Cuoral] Using default primary color');
+            }
             // If session was invalid/expired, try to initiate a new one
             if (!config && !localStorage.getItem('__x_loadID')) {
                 sessionId = await this.initiateSession();

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}