releasebird-javascript-sdk 1.0.47 → 1.0.49

package/src/RbirdBannerManager.js

@@ -21,6 +21,7 @@ export class RbirdBannerManager {
 
     init(apiKey) {
         if (typeof window === 'undefined') return;
+        console.log('[RbirdBannerManager] Initializing with API key:', apiKey);
         this.apiKey = apiKey;
         this.fetchAndDisplayBanners();
     }
@@ -29,6 +30,9 @@ export class RbirdBannerManager {
         const sessionManager = RbirdSessionManager.getInstance();
         const state = sessionManager.getState();
 
+        console.log('[RbirdBannerManager] Fetching banners from:', `${API}/ewidget/banners/active`);
+        console.log('[RbirdBannerManager] User state:', state);
+
         const http = new XMLHttpRequest();
         http.open("GET", `${API}/ewidget/banners/active`);
         http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
@@ -45,9 +49,11 @@ export class RbirdBannerManager {
         const self = this;
         http.onreadystatechange = function () {
             if (http.readyState === 4) {
+                console.log('[RbirdBannerManager] Response status:', http.status);
                 if (http.status === 200) {
                     try {
                         const response = JSON.parse(http.responseText);
+                        console.log('[RbirdBannerManager] Received banners:', response);
                         self.banners = response;
                         self.renderBanners();
                     } catch (exp) {
@@ -58,28 +64,45 @@ export class RbirdBannerManager {
                 }
             }
         };
+        console.log('[RbirdBannerManager] Sending request...');
         http.send();
     }
 
     renderBanners() {
+        console.log('[RbirdBannerManager] Rendering banners. Count:', this.banners?.length);
         if (!this.banners || this.banners.length === 0) {
+            console.log('[RbirdBannerManager] No banners to render');
             return;
         }
 
         this.banners.forEach(banner => {
+            console.log('[RbirdBannerManager] Processing banner:', banner.id, 'Type:', banner.type, 'Placement:', banner.placement);
             if (banner.type === 'INLINE') {
                 this.renderInlineBanner(banner);
             } else if (banner.type === 'FLOATING') {
                 this.renderFloatingBanner(banner);
+            } else {
+                console.warn('[RbirdBannerManager] Unknown banner type:', banner.type);
             }
         });
     }
 
     renderInlineBanner(banner) {
         // Find all elements with data-rbird-banner attribute matching the banner's placement
-        const targetElements = document.querySelectorAll(`[data-rbird-banner="${banner.placement || 'default'}"]`);
+        const placement = banner.placement || 'default';
+        console.log('[RbirdBannerManager] Looking for inline banner placement:', placement);
+        const targetElements = document.querySelectorAll(`[data-rbird-banner="${placement}"]`);
+
+        console.log('[RbirdBannerManager] Found', targetElements.length, 'target elements for placement:', placement);
+
+        if (targetElements.length === 0) {
+            console.warn('[RbirdBannerManager] No target elements found for inline banner with placement:', placement,
+                         'Make sure you have an element with data-rbird-banner="' + placement + '" in your HTML');
+            return;
+        }
 
         targetElements.forEach(targetElement => {
+            console.log('[RbirdBannerManager] Appending banner to element:', targetElement);
             const bannerElement = this.createBannerElement(banner, false);
             targetElement.appendChild(bannerElement);
             this.displayedBanners.add(banner.id);

package/src/RbirdScreenshotManager.js

@@ -110,6 +110,24 @@ export default class RbirdScreenshotManager {
 
             // Use requestAnimationFrame to ensure the changes are applied before screenshot
             requestAnimationFrame(() => {
+                // Temporarily disable external stylesheets to avoid CORS errors
+                const externalStylesheets = [];
+                const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
+                stylesheets.forEach((stylesheet) => {
+                    const href = stylesheet.getAttribute('href');
+                    // Check if it's an external stylesheet (different domain)
+                    if (href && (href.startsWith('http://') || href.startsWith('https://')) &&
+                        !href.includes(window.location.hostname)) {
+                        externalStylesheets.push({
+                            element: stylesheet,
+                            disabled: stylesheet.disabled,
+                            parent: stylesheet.parentNode
+                        });
+                        stylesheet.disabled = true;
+                        console.log('[Screenshot] Temporarily disabling external stylesheet:', href);
+                    }
+                });
+
                 // Use html-to-image's toJpeg method with higher resolution
                 // Capture only the visible viewport
                 htmlToImage.toJpeg(document.body, {
@@ -118,6 +136,7 @@ export default class RbirdScreenshotManager {
                     cacheBust: true,
                     width: window.innerWidth,
                     height: window.innerHeight,
+                    skipFonts: true, // Skip web fonts to avoid CORS issues
                     style: {
                         margin: '0',
                         padding: '0'
@@ -132,8 +151,35 @@ export default class RbirdScreenshotManager {
                             return false;
                         }
                         return true;
+                    },
+                    onclone: (clonedDocument) => {
+                        // Remove external stylesheets that may cause CORS issues
+                        const stylesheets = clonedDocument.querySelectorAll('link[rel="stylesheet"]');
+                        stylesheets.forEach((stylesheet) => {
+                            const href = stylesheet.getAttribute('href');
+                            // Check if it's an external stylesheet (different domain)
+                            if (href && (href.startsWith('http://') || href.startsWith('https://')) &&
+                                !href.includes(window.location.hostname)) {
+                                console.log('[Screenshot] Removing external stylesheet:', href);
+                                stylesheet.remove();
+                            }
+                        });
+
+                        // Remove any style elements that might have problematic imports
+                        const styles = clonedDocument.querySelectorAll('style');
+                        styles.forEach((style) => {
+                            if (style.textContent && style.textContent.includes('@import')) {
+                                console.log('[Screenshot] Removing style with @import');
+                                style.remove();
+                            }
+                        });
                     }
                 }).then(function (dataUrl) {
+                    // Re-enable external stylesheets
+                    externalStylesheets.forEach(({element, disabled}) => {
+                        element.disabled = disabled;
+                    });
+
                     // Restore visibility
                     loader.style.visibility = 'visible';
                     if (closeButton) {
@@ -156,16 +202,108 @@ export default class RbirdScreenshotManager {
                     that.deactivateMarker();
 
                 }).catch((e) => {
-                    // Restore visibility on error
-                    loader.style.visibility = 'visible';
-                    if (closeButton) {
-                        closeButton.style.visibility = originalCloseButtonVisibility;
-                    }
-                    if (toolbar) {
-                        toolbar.style.visibility = originalToolbarVisibility;
-                    }
-                    that.hideLoader();
-                    console.error('Screenshot error:', e);
+                    // Re-enable external stylesheets on error
+                    externalStylesheets.forEach(({element, disabled}) => {
+                        element.disabled = disabled;
+                    });
+                    console.error('Screenshot error with toJpeg:', e);
+
+                    // Try alternative method: toPng with more lenient options
+                    console.log('[Screenshot] Trying alternative method with toPng...');
+                    htmlToImage.toPng(document.body, {
+                        quality: 0.95,
+                        pixelRatio: 1, // Lower resolution for fallback
+                        cacheBust: true,
+                        width: window.innerWidth,
+                        height: window.innerHeight,
+                        skipFonts: true,
+                        includeQueryParams: false,
+                        style: {
+                            margin: '0',
+                            padding: '0'
+                        },
+                        filter: (node) => {
+                            if (node.id === 'rbirdScreenshotLoader') {
+                                return false;
+                            }
+                            if (node.classList && node.classList.contains('menu')) {
+                                return false;
+                            }
+                            // Also filter out external iframes and problematic elements
+                            if (node.tagName === 'IFRAME' || node.tagName === 'OBJECT' || node.tagName === 'EMBED') {
+                                return false;
+                            }
+                            return true;
+                        },
+                        onclone: (clonedDocument) => {
+                            // More aggressive cleanup for fallback
+                            const stylesheets = clonedDocument.querySelectorAll('link[rel="stylesheet"]');
+                            stylesheets.forEach((stylesheet) => {
+                                const href = stylesheet.getAttribute('href');
+                                if (href && (href.startsWith('http://') || href.startsWith('https://')) &&
+                                    !href.includes(window.location.hostname)) {
+                                    stylesheet.remove();
+                                }
+                            });
+
+                            // Remove all external scripts
+                            const scripts = clonedDocument.querySelectorAll('script');
+                            scripts.forEach((script) => {
+                                const src = script.getAttribute('src');
+                                if (src && (src.startsWith('http://') || src.startsWith('https://')) &&
+                                    !src.includes(window.location.hostname)) {
+                                    script.remove();
+                                }
+                            });
+
+                            // Remove problematic style elements
+                            const styles = clonedDocument.querySelectorAll('style');
+                            styles.forEach((style) => {
+                                if (style.textContent && (style.textContent.includes('@import') || style.textContent.includes('cookiehub'))) {
+                                    style.remove();
+                                }
+                            });
+                        }
+                    }).then(function (dataUrl) {
+                        // Re-enable external stylesheets (fallback success)
+                        // Already re-enabled above, but ensure it's done
+
+                        // Restore visibility
+                        loader.style.visibility = 'visible';
+                        if (closeButton) {
+                            closeButton.style.visibility = originalCloseButtonVisibility;
+                        }
+                        if (toolbar) {
+                            toolbar.style.visibility = originalToolbarVisibility;
+                        }
+
+                        that.hideLoader();
+
+                        const widgetInstance = that.getRbirdWebsiteWidget().getInstance();
+                        if (widgetInstance.iframe) {
+                            widgetInstance.iframe.contentWindow?.postMessage({
+                                type: 'screenshot',
+                                screenshot: dataUrl
+                            }, '*');
+                        }
+
+                        that.deactivateMarker();
+                    }).catch((fallbackError) => {
+                        // Re-enable external stylesheets (fallback error)
+                        // Already re-enabled above, but ensure it's done
+
+                        // Restore visibility on final error
+                        loader.style.visibility = 'visible';
+                        if (closeButton) {
+                            closeButton.style.visibility = originalCloseButtonVisibility;
+                        }
+                        if (toolbar) {
+                            toolbar.style.visibility = originalToolbarVisibility;
+                        }
+                        that.hideLoader();
+                        console.error('Screenshot failed with both methods:', fallbackError);
+                        alert('Screenshot failed. This page has external resources that prevent screenshots from being captured. Please try on a different page.');
+                    });
                 });
             });
         }, 100);

package/src/Styles.js

@@ -130,6 +130,18 @@ export const injectStyledCSS = (
     }
 }
 
+/* iOS-spezifische Anpassung für dynamische Viewport-Höhe */
+@supports (-webkit-touch-callout: none) {
+    .cta__modal {
+        height: 100dvh !important;
+        max-height: 100dvh !important;
+    }
+
+    .rbird-content-iframe {
+        height: 100dvh !important;
+    }
+}
+
 .cta__modal_loading {
     position: fixed;
     outline: none;

package/webpack.config.js

@@ -65,8 +65,8 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       PRODUCTION: 'true',
-      API: JSON.stringify("https://api.releasebird.com/papi"),
-      CONTENT_URL:  JSON.stringify("https://wcontent.releasebird.net"),
+      API: JSON.stringify("http://localhost:8040/papi"),
+      CONTENT_URL:  JSON.stringify("http://localhost:4001"),
     }),
     {
       apply: (compiler) => {