# 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](/de/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration) 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](/de/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration):
```javascript title="Beispiel"
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:
```javascript
// 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:
```javascript
// 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");
});
```