releasebird-javascript-sdk 1.0.46 → 1.0.48

package/src/RbirdBannerManager.js

@@ -76,20 +76,33 @@ export class RbirdBannerManager {
         }
 
         this.banners.forEach(banner => {
-            console.log('[RbirdBannerManager] Rendering banner:', banner.id, 'Type:', banner.type);
+            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

@@ -118,6 +118,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,6 +133,28 @@ 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) {
                     // Restore visibility
@@ -156,16 +179,98 @@ 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);
+                    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) {
+                        // 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) => {
+                        // 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) => {