# Abonnement-Widget Das **Abonnement-Widget** ist eine Glocken-Launcher plus eine Aufforderung, die Website-Besucher einlädt, Push-Benachrichtigungen zu abonnieren. Es ersetzt die [Schaltfläche für Push-Abonnements](/de/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/), das [benutzerdefinierte Abonnement-Popup](/de/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/) und die [Abonnement-Aufforderungs](/de/developer/guides/messaging-channels/subscription-prompt/)-Widgets in einer einzigen Komponente. Solange es aktiviert ist, wird keines dieser drei auf der Seite geladen, sodass Besucher nie zwei konkurrierende Aufforderungen sehen. Ein Besucher, der sich noch nicht entschieden hat, sieht die Aufforderung. Ein Besucher, der Benachrichtigungen bereits blockiert hat, sieht stattdessen eine Erklärung, wie er sie entsperren kann. ## Voraussetzungen Stellen Sie sicher, dass Sie Pushwoosh Web SDK 3.0 auf Ihrer Website implementiert haben. Folgen Sie dazu unserem [Integrationsleitfaden](/de/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration). ## 1. Widget aktivieren Fügen Sie den Parameter `subscriptionWidget` zur WebSDK-Initialisierung hinzu und setzen Sie `enable` auf `true`: ```javascript Pushwoosh.push(['init', { //... subscriptionWidget: { enable: true, } }]); ``` Jedes der folgenden Felder ist optional. Ein ausgelassenes Feld verwendet seinen Standardwert. Im Init-Snippet wird eine Zahl außerhalb ihres Bereichs stillschweigend auf die nächste Grenze begrenzt, und ein ungültiger Enum-Wert wird stillschweigend auf seinen Standardwert zurückgesetzt, ohne Konsolenwarnung. Das weiter unten beschriebene Control-Panel-Formular lehnt einen ungültigen Wert dagegen direkt ab und verweigert das Speichern. ## 2. Aufforderung konfigurieren ```javascript Pushwoosh.push(['init', { //... subscriptionWidget: { enable: true, prompt: { layout: 'card', // 'card' | 'bar' | 'modal' position: 'bottom-right', iconUrl: 'https://url-image.png', borderRadius: 12, // 0–32 overlay: false, }, launcher: { enabled: true, position: 'bottom-right', // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' offset: 20, // 0–100 size: 48, // 32–80 }, display: { trigger: 'auto', // 'auto' | 'launcher' | 'manual' delay: 5, // seconds, 0–3600 cappingCount: 3, // auto-shows per visitor, 0–100, 0 = unlimited cappingInterval: 24, // hours between auto-shows, 0–8760 }, texts: { title: 'Stay in the loop', message: 'Get notified about news and updates.', acceptText: 'Allow', declineText: 'Not now', closeText: 'Close', blockedTitle: 'Notifications are blocked', blockedMessage: 'Enable notifications in your browser settings to stay updated.', launcherLabel: 'Subscribe to notifications', launcherBlockedLabel: 'Notifications are blocked', }, colors: { background: '#ffffff', accent: '#4285f4', text: '#000000', textSecondary: '#666666', }, } }]); ``` ### Layout und Position `prompt.layout` legt die Form der Aufforderung fest: - **`card`** — eine kompakte Karte, verankert an einer Kante oder Ecke. `prompt.position` akzeptiert `top`, `bottom`, `top-left`, `top-right`, `bottom-left` oder `bottom-right`. - **`bar`** — eine Leiste über die gesamte Seitenbreite. `prompt.position` akzeptiert nur `top` oder `bottom`. - **`modal`** — ein auf der Seite zentriertes Fenster. `prompt.position` ist immer `center`. Prüfen Sie die obige Liste für das von Ihnen eingestellte Layout, bevor Sie eine Position wählen. Im Init-Snippet wird eine vom aktuellen Layout nicht unterstützte Position stillschweigend durch den Standardwert des Layouts ersetzt. Das Control-Panel-Formular lehnt die Kombination stattdessen ab. ### Wann sie angezeigt wird `display.trigger` steuert, wodurch die Aufforderung geöffnet wird: - **`auto`** — öffnet sich automatisch `display.delay` Sekunden nach dem Laden der Seite, dann erneut alle `display.cappingInterval` Stunden, falls der Besucher sich nicht entschieden hat, bis zu `display.cappingCount` Mal insgesamt (`0` bedeutet kein Limit). - **`launcher`** — öffnet sich nur, wenn der Besucher auf die Glocke klickt. - **`manual`** — öffnet sich nur über `Pushwoosh.moduleRegistry.subscriptionWidget`, weiter unten beschrieben. `display.delay`, `display.cappingCount` und `display.cappingInterval` gelten nur für den `auto`-Trigger. ### Die Glocken-Launcher `launcher.enabled` zeigt eine schwebende Glocke an, solange der Besucher nicht abonniert hat, unabhängig von `display.trigger` — selbst bei `trigger: 'auto'` bleibt die Glocke sichtbar, damit der Besucher die Aufforderung nach dem Schließen erneut öffnen kann. `launcher.position` platziert sie in einer der vier Ecken. `launcher.offset` (Pixelabstand von den Rändern) und `launcher.size` (der Durchmesser der Glocke in Pixeln) feinjustieren die Platzierung. ### Texte und Farben `texts.blockedTitle`, `texts.blockedMessage` und `texts.closeText` werden anstelle der Aufforderung angezeigt, sobald der Browser meldet, dass der Besucher Benachrichtigungen blockiert hat — `texts.acceptText` und `texts.declineText` erscheinen in diesem Zustand nie. `texts.launcherLabel` und `texts.launcherBlockedLabel` sind der Tooltip der Glocke in jedem Zustand. Jedes Textfeld akzeptiert bis zu 300 Zeichen. `colors.accent`, `colors.background`, `colors.text` und `colors.textSecondary` akzeptieren einen Hex-Wert oder einen CSS-Farbnamen. Das Control-Panel-Formular validiert jedes Feld auf diese Weise, bis zu 64 Zeichen. Das Init-Snippet akzeptiert für diese Felder jede nicht leere Zeichenfolge, ohne Format oder Länge zu prüfen. ## Verwaltung im Control Panel Gehen Sie bei einer über das Panel verwalteten Anwendung zu **Settings → Configure platforms → Web** und öffnen Sie die Karte **Subscription widget**. Ein Badge auf der Karte zeigt, ob das Widget **On** oder **Off** ist. Klicken Sie auf **Configure**, um dieselben oben beschriebenen Felder zu bearbeiten, gruppiert als **Prompt**, **When to show**, **Bell**, **Texts** und **Colors**, neben einer Live-Vorschau, die sowohl den Zustand des unentschlossenen als auch des blockierten Besuchers zeigt. Das Speichern ersetzt die Kopie der Widget-Konfiguration im Panel. Es berührt nicht das WebSDK-Init-Snippet auf Ihrer Website. Solange eine Anwendung über das Panel verwaltet wird, überschreiben die in dieser Karte gespeicherten Werte dieselben Schlüssel im Init-Snippet der Website. Das Umstellen einer Website auf die Panel-Konfiguration ist ein Schalter im Panel, ohne Codeänderung auf der Website. ## 3. Das Widget aus Ihrem Code steuern Sobald das Widget-Bundle geladen wurde, veröffentlicht es eine API unter `Pushwoosh.moduleRegistry.subscriptionWidget`: ```javascript Pushwoosh.moduleRegistry.subscriptionWidget.show(); // Opens the prompt Pushwoosh.moduleRegistry.subscriptionWidget.hide(); // Closes the prompt Pushwoosh.moduleRegistry.subscriptionWidget.toggle(); // Toggles the current state Pushwoosh.moduleRegistry.subscriptionWidget.toggle(true); // Opens the prompt Pushwoosh.moduleRegistry.subscriptionWidget.isVisible(); // Returns whether the prompt is open ``` `show()` hat keine Wirkung für einen Besucher, der bereits abonniert hat. Das Öffnen der Aufforderung löst ein `show-subscription-widget`-Ereignis aus. Das Schließen löst `hide-subscription-widget` aus: ```javascript Pushwoosh.addEventHandler('show-subscription-widget', function() { console.log('Triggered event: show-subscription-widget'); }); Pushwoosh.addEventHandler('hide-subscription-widget', function() { console.log('Triggered event: hide-subscription-widget'); }); ``` ## Migration von den älteren Widgets Die Schaltfläche für Push-Abonnements, das benutzerdefinierte Abonnement-Popup und die Abonnement-Aufforderung funktionieren weiterhin wie auf ihren eigenen Seiten dokumentiert, solange `subscriptionWidget.enable` nicht gesetzt oder `false` bleibt. Das Setzen auf `true` stoppt das Laden aller drei, sowohl bei einer per Snippet konfigurierten als auch bei einer über das Panel verwalteten Anwendung.