releasebird-javascript-sdk 1.0.38 → 1.0.40

package/src/RbirdBannerManager.js

@@ -0,0 +1,378 @@
+import RbirdUtils from './RbirdUtils';
+import RbirdSessionManager from './RbirdSessionManager';
+
+const API = RbirdUtils.API;
+
+export class RbirdBannerManager {
+    static instance;
+
+    constructor() {
+        this.banners = [];
+        this.displayedBanners = new Set();
+        this.apiKey = null;
+    }
+
+    static getInstance() {
+        if (!RbirdBannerManager.instance) {
+            RbirdBannerManager.instance = new RbirdBannerManager();
+        }
+        return RbirdBannerManager.instance;
+    }
+
+    init(apiKey) {
+        if (typeof window === 'undefined') return;
+        this.apiKey = apiKey;
+        this.fetchAndDisplayBanners();
+    }
+
+    fetchAndDisplayBanners() {
+        const sessionManager = RbirdSessionManager.getInstance();
+        const state = sessionManager.getState();
+
+        const http = new XMLHttpRequest();
+        http.open("GET", `${API}/ewidget/banners/active`);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.setRequestHeader("apiKey", this.apiKey);
+
+        // Send user identification for filtering dismissed banners
+        if (state?.identify?.people) {
+            http.setRequestHeader("peopleId", state.identify.people);
+        }
+        if (sessionManager.anonymousIdentifier) {
+            http.setRequestHeader("anonymousId", sessionManager.anonymousIdentifier);
+        }
+
+        const self = this;
+        http.onreadystatechange = function () {
+            if (http.readyState === 4) {
+                if (http.status === 200) {
+                    try {
+                        const response = JSON.parse(http.responseText);
+                        self.banners = response;
+                        self.renderBanners();
+                    } catch (exp) {
+                        console.error('Error parsing banners response:', exp);
+                    }
+                }
+            }
+        };
+        http.send();
+    }
+
+    renderBanners() {
+        if (!this.banners || this.banners.length === 0) return;
+
+        this.banners.forEach(banner => {
+            if (banner.type === 'INLINE') {
+                this.renderInlineBanner(banner);
+            } else if (banner.type === 'FLOATING') {
+                this.renderFloatingBanner(banner);
+            }
+        });
+    }
+
+    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'}"]`);
+
+        targetElements.forEach(targetElement => {
+            const bannerElement = this.createBannerElement(banner, false);
+            targetElement.appendChild(bannerElement);
+            this.displayedBanners.add(banner.id);
+            this.trackImpression(banner.id);
+        });
+    }
+
+    renderFloatingBanner(banner) {
+        const bannerElement = this.createBannerElement(banner, true);
+        document.body.appendChild(bannerElement);
+        this.displayedBanners.add(banner.id);
+        this.trackImpression(banner.id);
+    }
+
+    createBannerElement(banner, isFloating) {
+        const container = document.createElement('div');
+        container.className = isFloating ? 'rbird-banner-floating' : 'rbird-banner-inline';
+        container.id = `rbird-banner-${banner.id}`;
+        container.setAttribute('data-banner-id', banner.id);
+
+        // Get user language
+        const userLang = navigator.language?.split('-')[0] || 'de';
+        const title = banner.title?.[userLang] || banner.title?.['de'] || '';
+        const message = banner.message?.[userLang] || banner.message?.['de'] || '';
+        const buttonText = banner.buttonText?.[userLang] || banner.buttonText?.['de'] || '';
+
+        // Create banner HTML structure
+        const bannerHTML = `
+            <div class="rbird-banner-content" style="${this.getBannerStyles(banner, isFloating)}">
+                <button class="rbird-banner-close" data-banner-id="${banner.id}" style="${this.getCloseButtonStyles()}">
+                    ×
+                </button>
+                <div class="rbird-banner-body">
+                    ${title ? `<h3 class="rbird-banner-title" style="${this.getTitleStyles()}">${this.escapeHtml(title)}</h3>` : ''}
+                    ${message ? `<p class="rbird-banner-message" style="${this.getMessageStyles()}">${this.escapeHtml(message)}</p>` : ''}
+                    ${banner.showButton && buttonText ? `
+                        <button class="rbird-banner-cta" data-banner-id="${banner.id}" style="${this.getCtaButtonStyles(banner)}">
+                            ${this.escapeHtml(buttonText)}
+                        </button>
+                    ` : ''}
+                </div>
+            </div>
+        `;
+
+        container.innerHTML = bannerHTML;
+
+        // Add position styles for floating banners
+        if (isFloating) {
+            this.applyFloatingPosition(container, banner.position);
+        }
+
+        // Add event listeners
+        const closeButton = container.querySelector('.rbird-banner-close');
+        if (closeButton) {
+            closeButton.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.closeBanner(banner.id);
+            });
+        }
+
+        const ctaButton = container.querySelector('.rbird-banner-cta');
+        if (ctaButton) {
+            ctaButton.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.handleCtaClick(banner);
+            });
+        }
+
+        return container;
+    }
+
+    getBannerStyles(banner, isFloating) {
+        const baseStyles = `
+            position: relative;
+            background-color: ${banner.backgroundColor || '#ffffff'};
+            color: ${banner.textColor || '#000000'};
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            max-width: ${isFloating ? '400px' : '100%'};
+            box-sizing: border-box;
+            z-index: 10000;
+        `;
+
+        return baseStyles;
+    }
+
+    getCloseButtonStyles() {
+        return `
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: transparent;
+            border: none;
+            font-size: 24px;
+            line-height: 1;
+            cursor: pointer;
+            color: inherit;
+            opacity: 0.6;
+            padding: 0;
+            width: 24px;
+            height: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 0.2s;
+        `;
+    }
+
+    getTitleStyles() {
+        return `
+            margin: 0 0 10px 0;
+            font-size: 18px;
+            font-weight: 600;
+            line-height: 1.4;
+        `;
+    }
+
+    getMessageStyles() {
+        return `
+            margin: 0 0 15px 0;
+            font-size: 14px;
+            line-height: 1.6;
+        `;
+    }
+
+    getCtaButtonStyles(banner) {
+        return `
+            background-color: ${banner.buttonColor || '#667eea'};
+            color: ${banner.buttonTextColor || '#ffffff'};
+            border: none;
+            padding: 10px 20px;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: opacity 0.2s;
+            display: inline-block;
+        `;
+    }
+
+    applyFloatingPosition(element, position) {
+        element.style.position = 'fixed';
+        element.style.margin = '20px';
+        element.style.animation = 'rbirdBannerSlideIn 0.3s ease-out';
+
+        switch (position) {
+            case 'TOP':
+                element.style.top = '0';
+                element.style.left = '50%';
+                element.style.transform = 'translateX(-50%)';
+                break;
+            case 'BOTTOM':
+                element.style.bottom = '0';
+                element.style.left = '50%';
+                element.style.transform = 'translateX(-50%)';
+                break;
+            case 'TOP_LEFT':
+                element.style.top = '0';
+                element.style.left = '0';
+                break;
+            case 'TOP_RIGHT':
+                element.style.top = '0';
+                element.style.right = '0';
+                break;
+            case 'BOTTOM_LEFT':
+                element.style.bottom = '0';
+                element.style.left = '0';
+                break;
+            case 'BOTTOM_RIGHT':
+                element.style.bottom = '0';
+                element.style.right = '0';
+                break;
+            default:
+                element.style.bottom = '0';
+                element.style.right = '0';
+        }
+    }
+
+    handleCtaClick(banner) {
+        this.trackClick(banner.id);
+
+        if (banner.buttonAction === 'LINK' && banner.buttonLink) {
+            window.open(banner.buttonLink, '_blank');
+        } else if (banner.buttonAction === 'OPEN_WIDGET') {
+            // Open the Releasebird widget
+            if (window.Rbird && window.Rbird.showWidget) {
+                window.Rbird.showWidget();
+            }
+        }
+
+        // Close banner after CTA click if configured
+        if (banner.closeAfterAction) {
+            this.closeBanner(banner.id);
+        }
+    }
+
+    closeBanner(bannerId) {
+        const bannerElement = document.getElementById(`rbird-banner-${bannerId}`);
+        if (bannerElement) {
+            bannerElement.style.animation = 'rbirdBannerSlideOut 0.3s ease-in';
+            setTimeout(() => {
+                bannerElement.remove();
+            }, 300);
+        }
+
+        // Track dismiss in backend
+        this.trackDismiss(bannerId);
+        this.displayedBanners.delete(bannerId);
+    }
+
+    trackDismiss(bannerId) {
+        this.trackInteraction(bannerId, 'DISMISS');
+    }
+
+    trackImpression(bannerId) {
+        this.trackInteraction(bannerId, 'IMPRESSION');
+    }
+
+    trackClick(bannerId) {
+        this.trackInteraction(bannerId, 'CLICK');
+    }
+
+    trackInteraction(bannerId, interactionType) {
+        const sessionManager = RbirdSessionManager.getInstance();
+        const state = sessionManager.getState();
+
+        const http = new XMLHttpRequest();
+        http.open("POST", `${API}/ewidget/banners/interaction`);
+        http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+        http.setRequestHeader("apiKey", this.apiKey);
+
+        // Send user identification
+        if (state?.identify?.people) {
+            http.setRequestHeader("peopleId", state.identify.people);
+        }
+        if (sessionManager.anonymousIdentifier) {
+            http.setRequestHeader("anonymousId", sessionManager.anonymousIdentifier);
+        }
+
+        const requestData = {
+            bannerId: bannerId,
+            type: interactionType
+        };
+
+        http.send(JSON.stringify(requestData));
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // Add CSS animations
+    injectStyles() {
+        if (typeof window === 'undefined' || document.getElementById('rbird-banner-styles')) return;
+
+        const style = document.createElement('style');
+        style.id = 'rbird-banner-styles';
+        style.textContent = `
+            @keyframes rbirdBannerSlideIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(-20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+
+            @keyframes rbirdBannerSlideOut {
+                from {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+                to {
+                    opacity: 0;
+                    transform: translateY(-20px);
+                }
+            }
+
+            .rbird-banner-close:hover {
+                opacity: 1 !important;
+            }
+
+            .rbird-banner-cta:hover {
+                opacity: 0.9 !important;
+                transform: translateY(-1px);
+            }
+
+            .rbird-banner-inline {
+                margin: 20px 0;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+}

package/src/RbirdScreenshotManager.js

@@ -1,4 +1,3 @@
-import RbirdWebsiteWidget from "./RbirdWebsiteWidget";
 import SVGEditor from "./SVGEditor";
 import html2canvas from "html2canvas";
 
@@ -15,9 +14,16 @@ export default class RbirdScreenshotManager {
         return this.instance;
     }
 
+    // Lazy load RbirdWebsiteWidget to avoid circular dependency
+    getRbirdWebsiteWidget() {
+        // Import at runtime to break circular dependency
+        const RbirdWebsiteWidget = require("./RbirdWebsiteWidget").default;
+        return RbirdWebsiteWidget;
+    }
+
     activateMarker(allowPointerEvents) {
         document.body.style.overflow = 'hidden';
-        RbirdWebsiteWidget.getInstance().closeWebsiteWidget();
+        this.getRbirdWebsiteWidget().getInstance().closeWebsiteWidget();
         this.boundary = document.createElement('div');
         this.boundary.id = "markerBoundary";
         this.boundary.className = "markerBoundary";
@@ -51,7 +57,7 @@ export default class RbirdScreenshotManager {
     deactivateMarker() {
         document.body.style.overflow = 'auto';
         document.body.removeChild(this.boundary);
-        RbirdWebsiteWidget.getInstance().openWebsiteWidget();
+        this.getRbirdWebsiteWidget().getInstance().openWebsiteWidget();
     }
 
     showLoader() {
@@ -84,28 +90,42 @@ export default class RbirdScreenshotManager {
         let that = this;
         const loader = this.showLoader();
 
-        html2canvas(document.body, {
-            allowTaint: false,
-            useCORS: false,
-            logging: false,
-            foreignObjectRendering: false
-        }).then(function (canvas) {
-            that.hideLoader();
-
-            if (RbirdWebsiteWidget.getInstance().iframe) {
-                RbirdWebsiteWidget.getInstance().iframe.contentWindow?.postMessage({
-                    type: 'screenshot',
-                    screenshot: canvas.toDataURL("image/jpeg")
-                }, '*');
+        // Hide the loader and marker boundary before taking the screenshot
+        setTimeout(() => {
+            loader.style.display = 'none';
+            if (that.boundary) {
+                that.boundary.style.display = 'none';
             }
 
-            that.deactivateMarker();
-
-            //document.body.appendChild(canvas);
-        }).catch((e) => {
-            that.hideLoader();
-            console.error('Screenshot error:', e);
-        });
+            html2canvas(document.body, {
+                allowTaint: false,
+                useCORS: false,
+                logging: false,
+                foreignObjectRendering: false
+            }).then(function (canvas) {
+                that.hideLoader();
+
+                const widgetInstance = that.getRbirdWebsiteWidget().getInstance();
+                if (widgetInstance.iframe) {
+                    widgetInstance.iframe.contentWindow?.postMessage({
+                        type: 'screenshot',
+                        screenshot: canvas.toDataURL("image/jpeg")
+                    }, '*');
+                }
+
+                that.deactivateMarker();
+
+                //document.body.appendChild(canvas);
+            }).catch((e) => {
+                // Restore visibility in case of error
+                loader.style.display = 'flex';
+                if (that.boundary) {
+                    that.boundary.style.display = 'block';
+                }
+                that.hideLoader();
+                console.error('Screenshot error:', e);
+            });
+        }, 100); // Small delay to ensure the loader is rendered before we hide it
     }
 
 }

package/src/index.js

@@ -2,6 +2,7 @@ import { injectStyledCSS } from "./Styles";
 import RbirdSessionManager from "./RbirdSessionManager";
 import RbirdWebsiteWidget from "./RbirdWebsiteWidget";
 import { ReleasebirdConsoleLogger } from "./ReleasebirdConsoleLogger";
+import { RbirdBannerManager } from "./RbirdBannerManager";
 
 class Rbird {
 
@@ -81,6 +82,12 @@ class Rbird {
                 if (showButton) {
                     RbirdWebsiteWidget.getInstance().showButton(showButton);
                 }
+                // Initialize banner manager and display banners
+                runFunctionWhenDomIsReady(() => {
+                    const bannerManager = RbirdBannerManager.getInstance();
+                    bannerManager.injectStyles();
+                    bannerManager.init(apiKey);
+                });
             })
 
         } catch (e) {