releasebird-javascript-sdk 1.0.76 → 1.0.78

package/src/RbirdFormManager.js

@@ -53,7 +53,8 @@ export class RbirdFormManager {
         const state = sessionManager.getState();
 
         const http = new XMLHttpRequest();
-        http.open("GET", `${API}/ewidget/forms/${formId}`);
+        const url = `${API}/ewidget/forms/${formId}`;
+        http.open("GET", url);
         http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
         http.setRequestHeader("apiKey", this.apiKey);
 

package/src/RbirdWebsiteWidget.js

@@ -552,6 +552,40 @@ export default class RbirdWebsiteWidget {
         });
 
         this.messageBubblesContainer.style.display = 'flex';
+
+        // Position bubbles so they don't overflow screen edges
+        this.positionMessageBubbles();
+    }
+
+    /**
+     * Position message bubbles container to stay within viewport bounds
+     */
+    positionMessageBubbles() {
+        if (!this.messageBubblesContainer || !this.websiteWidget) return;
+
+        const buttonRect = this.websiteWidget.getBoundingClientRect();
+        const containerWidth = 320; // max-width from CSS
+        const padding = 10; // minimum distance from screen edge
+        const gap = 20; // gap between button and bubbles
+
+        // Calculate vertical position (above the button)
+        const bottomFromViewport = window.innerHeight - buttonRect.top + gap;
+        this.messageBubblesContainer.style.bottom = `${bottomFromViewport}px`;
+
+        // Calculate horizontal position
+        // Try to center on the button first
+        let leftPosition = buttonRect.left + (buttonRect.width / 2) - (containerWidth / 2);
+
+        // Constrain to viewport bounds
+        const minLeft = padding;
+        const maxLeft = window.innerWidth - containerWidth - padding;
+
+        // Clamp the position
+        leftPosition = Math.max(minLeft, Math.min(leftPosition, maxLeft));
+
+        // Apply position
+        this.messageBubblesContainer.style.left = `${leftPosition}px`;
+        this.messageBubblesContainer.style.right = 'unset';
     }
 
     /**
@@ -809,25 +843,22 @@ export default class RbirdWebsiteWidget {
         // Update badge position
         if (this.countBadge) {
             const buttonRect = this.websiteWidget.getBoundingClientRect();
-            this.countBadge.style.left = `${buttonRect.right - 15}px`;
+            this.countBadge.style.left = `${buttonRect.right - 10}px`;
             this.countBadge.style.right = 'unset';
-            this.countBadge.style.bottom = `${window.innerHeight - buttonRect.top + 5}px`;
+            this.countBadge.style.bottom = `${window.innerHeight - buttonRect.top - 5}px`;
         }
 
         // Update hide button position (top right of bubble)
         if (this.hideWidgetButton) {
             const buttonRect = this.websiteWidget.getBoundingClientRect();
-            this.hideWidgetButton.style.left = `${buttonRect.right - 5}px`;
+            this.hideWidgetButton.style.left = `${buttonRect.right - 10}px`;
             this.hideWidgetButton.style.right = 'unset';
             this.hideWidgetButton.style.bottom = `${window.innerHeight - buttonRect.top + 5}px`;
         }
 
         // Update message bubbles container position
         if (this.messageBubblesContainer) {
-            const buttonRect = this.websiteWidget.getBoundingClientRect();
-            this.messageBubblesContainer.style.left = `${buttonRect.left}px`;
-            this.messageBubblesContainer.style.right = 'unset';
-            this.messageBubblesContainer.style.bottom = `${window.innerHeight - buttonRect.top + 20}px`;
+            this.positionMessageBubbles();
         }
     }
 
@@ -895,23 +926,21 @@ export default class RbirdWebsiteWidget {
 
         // Update badge position
         if (this.countBadge) {
-            this.countBadge.style.left = `${buttonRect.right - 15}px`;
+            this.countBadge.style.left = `${buttonRect.right - 10}px`;
             this.countBadge.style.right = 'unset';
-            this.countBadge.style.bottom = `${window.innerHeight - buttonRect.top + 5}px`;
+            this.countBadge.style.bottom = `${window.innerHeight - buttonRect.top - 5}px`;
         }
 
         // Update hide button position (top right of bubble)
         if (this.hideWidgetButton) {
-            this.hideWidgetButton.style.left = `${buttonRect.right - 5}px`;
+            this.hideWidgetButton.style.left = `${buttonRect.right - 10}px`;
             this.hideWidgetButton.style.right = 'unset';
-            this.hideWidgetButton.style.bottom = `${window.innerHeight - buttonRect.top + 5}px`;
+            this.hideWidgetButton.style.bottom = `${window.innerHeight - buttonRect.top - 5}px`;
         }
 
         // Update message bubbles container position
         if (this.messageBubblesContainer) {
-            this.messageBubblesContainer.style.left = `${buttonRect.left}px`;
-            this.messageBubblesContainer.style.right = 'unset';
-            this.messageBubblesContainer.style.bottom = `${window.innerHeight - buttonRect.top + 20}px`;
+            this.positionMessageBubbles();
         }
     }