releasebird-javascript-sdk 1.0.87 → 1.0.89

package/src/RbirdWebsiteWidget.js

@@ -54,6 +54,9 @@ export default class RbirdWebsiteWidget {
     initialX = 0;
     initialY = 0;
 
+    // Notification sound
+    audioContext = null;
+
     static getInstance() {
         if (!this.instance) {
             this.instance = new RbirdWebsiteWidget();
@@ -369,8 +372,9 @@ export default class RbirdWebsiteWidget {
 
         if (e.data === 'newMessageArrived') {
             this.countNotifications();
-            // Also refresh message bubbles when new message arrives
+            // Play notification sound and refresh message bubbles when new message arrives
             if (!RbirdUtils.hasClass(this.widgetContent, 'cta__modal--visible')) {
+                this.playNotificationSound();
                 this.fetchUnreadMessages();
                 if (this.iframe) {
                     this.iframe.contentWindow?.postMessage({
@@ -588,6 +592,43 @@ export default class RbirdWebsiteWidget {
         this.messageBubblesContainer.style.right = 'unset';
     }
 
+    /**
+     * Play a notification sound when new messages arrive
+     */
+    playNotificationSound() {
+        try {
+            // Create AudioContext lazily (required for browser autoplay policies)
+            if (!this.audioContext) {
+                this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            }
+
+            const ctx = this.audioContext;
+            const now = ctx.currentTime;
+
+            // Create oscillator for the "plopp" sound
+            const oscillator = ctx.createOscillator();
+            const gainNode = ctx.createGain();
+
+            oscillator.connect(gainNode);
+            gainNode.connect(ctx.destination);
+
+            // Plopp sound: quick frequency drop with fast decay
+            oscillator.type = 'sine';
+            oscillator.frequency.setValueAtTime(800, now);
+            oscillator.frequency.exponentialRampToValueAtTime(300, now + 0.1);
+
+            // Quick attack and decay for the "plopp" effect
+            gainNode.gain.setValueAtTime(0, now);
+            gainNode.gain.linearRampToValueAtTime(0.3, now + 0.02);
+            gainNode.gain.exponentialRampToValueAtTime(0.01, now + 0.15);
+
+            oscillator.start(now);
+            oscillator.stop(now + 0.15);
+        } catch (e) {
+            // Silently fail if audio is not supported
+        }
+    }
+
     /**
      * Create a single message bubble element
      * @param {Object} msg - Message object with chatId, text, senderName, senderAvatar, timestamp
@@ -763,6 +804,20 @@ export default class RbirdWebsiteWidget {
         this.dragHandle.addEventListener('touchstart', (e) => this.startDrag(e), { passive: false });
         document.addEventListener('touchmove', (e) => this.onDrag(e), { passive: false });
         document.addEventListener('touchend', (e) => this.endDrag(e));
+
+        // Window resize listener to update position when viewport changes
+        window.addEventListener('resize', () => this.onWindowResize());
+    }
+
+    /**
+     * Handle window resize - update widget position to stay relative to viewport
+     */
+    onWindowResize() {
+        const savedPosition = this.loadWidgetPosition();
+        if (savedPosition && this.widgetWrapper) {
+            this.updateWidgetPosition(savedPosition.x, savedPosition.y);
+            this.updateRelatedElementsPosition();
+        }
     }
 
     /**
@@ -863,11 +918,16 @@ export default class RbirdWebsiteWidget {
     }
 
     /**
-     * Save widget position to localStorage
+     * Save widget position to localStorage as percentage of viewport
      */
     saveWidgetPosition(x, y) {
         try {
-            const position = { x, y, timestamp: Date.now() };
+            // Store position as percentage of viewport for responsive behavior
+            const position = {
+                xPercent: x / window.innerWidth,
+                yPercent: y / window.innerHeight,
+                timestamp: Date.now()
+            };
             window.localStorage.setItem('rbird_widget_position', JSON.stringify(position));
         } catch (e) {
             console.warn('[RbirdWidget] Could not save position to localStorage:', e);
@@ -875,17 +935,38 @@ export default class RbirdWebsiteWidget {
     }
 
     /**
-     * Load widget position from localStorage
+     * Load widget position from localStorage and convert to current viewport pixels
      */
     loadWidgetPosition() {
         try {
             const saved = window.localStorage.getItem('rbird_widget_position');
             if (saved) {
                 const position = JSON.parse(saved);
-                // Validate position is still within viewport
-                if (position.x >= 0 && position.x < window.innerWidth &&
-                    position.y >= 0 && position.y < window.innerHeight) {
-                    return position;
+
+                // Handle new percentage-based format
+                if (position.xPercent !== undefined && position.yPercent !== undefined) {
+                    const x = position.xPercent * window.innerWidth;
+                    const y = position.yPercent * window.innerHeight;
+
+                    // Ensure position is within viewport bounds
+                    const bubbleSize = 60; // approximate bubble size
+                    const clampedX = Math.max(0, Math.min(x, window.innerWidth - bubbleSize));
+                    const clampedY = Math.max(0, Math.min(y, window.innerHeight - bubbleSize));
+
+                    return { x: clampedX, y: clampedY };
+                }
+
+                // Handle legacy absolute pixel format - convert to percentage and save
+                if (position.x !== undefined && position.y !== undefined) {
+                    // Clamp to current viewport
+                    const bubbleSize = 60;
+                    const clampedX = Math.max(0, Math.min(position.x, window.innerWidth - bubbleSize));
+                    const clampedY = Math.max(0, Math.min(position.y, window.innerHeight - bubbleSize));
+
+                    // Convert to percentage and save for future
+                    this.saveWidgetPosition(clampedX, clampedY);
+
+                    return { x: clampedX, y: clampedY };
                 }
             }
         } catch (e) {

package/src/index.js

@@ -4,6 +4,8 @@ import RbirdWebsiteWidget from "./RbirdWebsiteWidget";
 import { ReleasebirdConsoleLogger } from "./ReleasebirdConsoleLogger";
 import { RbirdBannerManager } from "./RbirdBannerManager";
 import { RbirdFormManager } from "./RbirdFormManager";
+import { RbirdSurveyManager } from "./RbirdSurveyManager";
+import { RbirdAutomationManager } from "./RbirdAutomationManager";
 
 class Rbird {
 
@@ -93,6 +95,15 @@ class Rbird {
                         // Initialize form manager
                         const formManager = RbirdFormManager.getInstance();
                         formManager.init(apiKey);
+
+                        // Initialize survey manager
+                        const surveyManager = RbirdSurveyManager.getInstance();
+                        surveyManager.init(apiKey);
+
+                        // Initialize automation manager
+                        const automationManager = RbirdAutomationManager.getInstance();
+                        automationManager.init(apiKey);
+
                         resolve();
                     });
                 });
@@ -161,6 +172,37 @@ class Rbird {
         }
     }
 
+    /**
+     * Show a survey by its ID
+     * @param {string} surveyId - The ID of the survey to show
+     * @param {Object} options - Optional configuration
+     * @param {string} options.target - CSS selector for inline rendering (optional, shows as modal if not provided)
+     * @param {Function} options.onSubmit - Callback when survey is submitted
+     * @param {Function} options.onClose - Callback when survey is closed
+     */
+    static showSurvey(surveyId, options = {}) {
+        if (typeof window === 'undefined') return;
+        try {
+            RbirdSurveyManager.getInstance().showSurvey(surveyId, options);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    /**
+     * Track a custom event for automations
+     * @param {string} eventName - The name of the event
+     * @param {Object} data - Additional event data
+     */
+    static track(eventName, data = {}) {
+        if (typeof window === 'undefined') return;
+        try {
+            RbirdAutomationManager.getInstance().track(eventName, data);
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
 }
 
 export const runFunctionWhenDomIsReady = (callback) => {