Benutzerdefiniertes Abonnement-Popup

Das benutzerdefinierte Abonnement-Popup ist ein Pop-up-Fenster, das auf der Webseite angezeigt wird und Benutzern vorschlägt, Web-Push-Benachrichtigungen zu abonnieren. Es wird mit dem Pushwoosh WebSDK implementiert und ermöglicht es, die Browser-Einschränkungen bei der Anzeige nativer Abonnement-Aufforderungen zu umgehen. Ein natives Abonnement-Popup kann einem bestimmten Benutzer nur zweimal angezeigt werden. Wenn ein Benutzer Push-Benachrichtigungen nicht zulässt und das native Abonnement-Popup zweimal hintereinander schließt, wird es nicht erneut angezeigt und Push-Benachrichtigungen gelten als blockiert. Ein benutzerdefiniertes Abonnement-Popup kann wiederum so oft wie nötig angezeigt werden, es sei denn, ein Benutzer abonniert oder blockiert Push-Benachrichtigungen explizit.

Ein benutzerdefiniertes Abonnement-Popup kann einen beliebigen Text enthalten, der die Vorteile des Abonnements von Push-Benachrichtigungen erklärt, sowie zwei anpassbare Schaltflächen – eine für die Option „Später fragen“ und eine für „Abonnieren“.

Sobald ein Benutzer auf die Schaltfläche „Abonnieren“ klickt, erscheint ein natives Abonnement-Popup.

Wenn ein Benutzer auf die Schaltfläche „Später fragen“ klickt oder das Fenster einfach schließt, erscheint das benutzerdefinierte Abonnement-Popup nach einer bestimmten Zeit erneut (standardmäßig nach einer Woche; eine Verzögerung für den erneuten Versuch kann über den Parameter „retryOffset“ angepasst werden).

Implementierung

Um ein benutzerdefiniertes Abonnement-Popup zu aktivieren und anzupassen, verwenden Sie das folgende Skript bei der Initialisierung des Pushwoosh WebSDK:

Pushwoosh.push('init', {
    // . . .,
    subscribePopup: {
        enable: true,                      // (boolean) Aktivierung des Popups
        text: 'Text auf dem Popup',             // (string) Ein auf dem Popup anzuzeigender Text
        confirmSubscriptionButtonText: 'Abonnieren', // (string) Benutzerdefinierter Text für die Schaltfläche „Abonnieren“

        manualToggle: false,               // (boolean) Manuelle Steuerung zum Anzeigen des Popups
        delay: 60,                         // (integer) Eine Verzögerung zwischen dem Laden der Seite und dem Erscheinen des Popups
        retryOffset: 604800,               // (integer) Ein Versatz in Sekunden, um das Popup erneut anzuzeigen

        iconUrl: 'https://...',            // (string) Benutzerdefinierte Icon-URL
        iconAlt: 'Beschreibender Text für Ihr Icon', // (string) ALT-Text für das Icon
        overlay: false,                    // (boolean) Aktiviert die Seitenüberlagerung, wenn das Popup angezeigt wird
        position: 'top',                   // (string) Position auf der Seite. Mögliche Werte: ’top' | 'center' | 'bottom’
        mobileViewMargin: '10px',          // (string) Rand für die mobile Ansicht

        bgColor: '#fff',                   // (string) Hintergrundfarbe des Popups
        borderColor: 'transparent',        // (string) Rahmenfarbe des Popups
        boxShadow: '0 3px 6px rgba(0,0,0,0.16)', // (string) Schatten des Popups

        textColor: '#000',                 // (string) Textfarbe des Popups
        textSize: 'inherit',               // (string) Textgröße des Popups
        textWeight: 'normal',              // (string) Textgewicht des Popups
        fontFamily: 'inherit',             // (string) Schriftart des Popups

        subscribeBtnBgColor: '#4285f4',         // (string) Hintergrundfarbe der Schaltfläche „Abonnieren“
        subscribeBtnTextColor: '#fff',          // (string) Textfarbe der Schaltfläche „Abonnieren“
        subscribeBtnTextWeight: 'bold',         // (string) Textgewicht der Schaltfläche „Abonnieren“
        subscribeBtnBorderColor: 'transparent', // (string) Rahmenfarbe der Schaltfläche „Abonnieren“
        subscribeBtnBorderRadius: '4px',        // (string) Rahmenradius der Schaltfläche „Abonnieren“

        askLaterButtonText: 'Nicht jetzt',          // (string) Benutzerdefinierter Text für die Schaltfläche „Später fragen“
        askLaterBtnBgColor: 'transparent',      // (string) Hintergrundfarbe der Schaltfläche „Später fragen“
        askLaterBtnTextColor: '#000',           // (string) Textfarbe der Schaltfläche „Später fragen“
        askLaterBtnBorderColor: 'transparent',  // (string) Rahmenfarbe der Schaltfläche „Später fragen“
        askLaterBtnBorderRadius: '4px',         // (string) Rahmenradius der Schaltfläche „Später fragen“
        askLaterBtnTextWeight: 'normal',        // (string) Textgewicht der Schaltfläche „Später fragen“

        theme: 'material',               // (string) Popup-Theme, mögliche Werte: 'material' | 'topbar'
        viewport: 'desktop'              // (string) Ziel-Viewport, mögliche Werte: 'desktop' | 'mobile'
    }
});

Zugriff auf die Instanz des benutzerdefinierten Abonnement-Popups

Die Instanz des benutzerdefinierten Abonnement-Popups ist über Pushwoosh.moduleRegistry.subscribePopup verfügbar.

Hinweis: Diese Instanz wird erst zugänglich, nachdem das subscribe-popup-ready-Ereignis ausgelöst wurde. Sie ist jedoch nicht verfügbar, wenn der Benutzer bereits Push-Benachrichtigungen abonniert hat.

Die Instanz stellt eine toggle()-Methode bereit, mit der Sie das Popup manuell ein- oder ausblenden können:

// Das benutzerdefinierte Abonnement-Popup manuell ein- oder ausblenden
Pushwoosh.moduleRegistry.subscribePopup.toggle(); // Schaltet die Sichtbarkeit um
Pushwoosh.moduleRegistry.subscribePopup.toggle(true); // Zeigt das Popup an
Pushwoosh.moduleRegistry.subscribePopup.toggle(false); // Blendet das Popup aus

Dies ermöglicht eine bessere Kontrolle über das Verhalten des Popups direkt aus Ihrem Code.

Themes

Standardmäßig verwendet das Abonnement-Popup ein ‘material’-Theme und überlagert beim Anzeigen einen Teil des Bildschirms, wodurch ein Teil des Inhalts für den Website-Besucher verborgen wird.

Um zu vermeiden, dass wertvolle Inhalte durch das Abonnement-Popup verdeckt werden, verwenden Sie das ‘topbar’-Theme, sodass das Popup als schmaler Balken am oberen Bildschirmrand angezeigt wird.

Ereignisse des benutzerdefinierten Abonnement-Popups

Die folgenden Ereignisse stehen zur Verfügung, um Interaktionen mit dem benutzerdefinierten Abonnement-Popup zu verfolgen:

// Wird ausgeführt, wenn das benutzerdefinierte Abonnement-Popup geladen und bereit zur Anzeige ist
// Hinweis: Dieses Ereignis wird NICHT ausgelöst, wenn der Benutzer bereits Push-Benachrichtigungen abonniert hat.
Pushwoosh.addEventHandler('subscribe-popup-ready', function() {
  console.log("Ausgelöstes Ereignis: subscribe-popup-ready");
});

// Wird ausgeführt, wenn das benutzerdefinierte Abonnement-Popup angezeigt wird
Pushwoosh.addEventHandler('subscribe-popup-show', function() {
  console.log("Ausgelöstes Ereignis: subscribe-popup-show");
});

// Wird ausgeführt, wenn ein Benutzer auf die Schaltfläche „Abonnieren“ im Pop-up-Fenster klickt
Pushwoosh.addEventHandler('subscribe-popup-accept', function() {
  console.log("Ausgelöstes Ereignis: subscribe-popup-accept");
});

// Wird ausgeführt, wenn ein Benutzer auf die Schaltfläche „Später fragen“ im Pop-up-Fenster klickt
Pushwoosh.addEventHandler('subscribe-popup-decline', function() {
  console.log("Ausgelöstes Ereignis: subscribe-popup-decline");
});

// Wird ausgeführt, wenn das Popup ausgeblendet wird
Pushwoosh.addEventHandler('subscribe-popup-hide', function() {
  console.log("Ausgelöstes Ereignis: subscribe-popup-hide");
});