# Widget d'abonnement Le **widget d'abonnement** est une cloche de lancement associée à une invite qui incite les visiteurs du site à s'abonner aux notifications push. Il remplace le [bouton d'abonnement aux notifications push](/fr/developer/pushwoosh-sdk/web-push-notifications/push-subscription-button/), le [Popup d'abonnement personnalisé](/fr/developer/pushwoosh-sdk/web-push-notifications/custom-subscription-popup/) et les widgets d'[invite d'abonnement](/fr/developer/guides/messaging-channels/subscription-prompt/) en un seul composant. Tant qu'il est activé, aucun de ces trois éléments ne se charge sur la page, si bien que les visiteurs ne voient jamais deux demandes concurrentes. Un visiteur qui n'a pas encore décidé voit l'invite. Un visiteur qui a déjà bloqué les notifications voit à la place une explication sur la façon de les débloquer. ## Prérequis Assurez-vous d'avoir implémenté Pushwoosh Web SDK 3.0 sur votre site. Pour cela, suivez notre [guide d'intégration](/fr/developer/pushwoosh-sdk/web-push-notifications/web-push-sdk-30/#integration). ## 1. Activer le widget Ajoutez le paramètre `subscriptionWidget` à l'initialisation du WebSDK et définissez `enable` sur `true` : ```javascript Pushwoosh.push(['init', { //... subscriptionWidget: { enable: true, } }]); ``` Chaque champ ci-dessous est facultatif. Un champ omis revient à sa valeur par défaut. Dans l'extrait d'initialisation, un nombre hors de sa plage est silencieusement ramené à la borne la plus proche, et une valeur d'énumération invalide revient silencieusement à sa valeur par défaut, sans avertissement dans la console. Le formulaire du Panneau de configuration décrit plus loin rejette purement et simplement une valeur invalide et refuse de l'enregistrer. ## 2. Configurer l'invite ```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', }, } }]); ``` ### Mise en page et position `prompt.layout` définit la forme de l'invite : - **`card`** — une carte compacte ancrée à un bord ou un coin. `prompt.position` accepte `top`, `bottom`, `top-left`, `top-right`, `bottom-left` ou `bottom-right`. - **`bar`** — une barre occupant toute la largeur de la page. `prompt.position` n'accepte que `top` ou `bottom`. - **`modal`** — une fenêtre centrée sur la page. `prompt.position` est toujours `center`. Consultez la liste ci-dessus pour connaître la mise en page définie avant de choisir une position. Dans l'extrait d'initialisation, une position non prise en charge par la mise en page actuelle est silencieusement remplacée par la valeur par défaut de cette mise en page. Le formulaire du Panneau de configuration rejette cette combinaison à la place. ### Quand l'afficher `display.trigger` contrôle ce qui ouvre l'invite : - **`auto`** — s'ouvre automatiquement `display.delay` secondes après le chargement de la page, puis à nouveau toutes les `display.cappingInterval` heures si le visiteur n'a pas décidé, jusqu'à `display.cappingCount` fois au total (`0` signifie sans limite). - **`launcher`** — s'ouvre uniquement lorsque le visiteur clique sur la cloche. - **`manual`** — s'ouvre uniquement via `Pushwoosh.moduleRegistry.subscriptionWidget`, décrit plus loin. `display.delay`, `display.cappingCount` et `display.cappingInterval` ne s'appliquent qu'au déclencheur `auto`. ### La cloche de lancement `launcher.enabled` affiche une cloche flottante tant que le visiteur n'est pas abonné, indépendamment de `display.trigger` — même avec `trigger: 'auto'`, la cloche reste visible pour que le visiteur puisse rouvrir l'invite après l'avoir fermée. `launcher.position` la place dans l'un des quatre coins. `launcher.offset` (décalage en pixels par rapport aux bords) et `launcher.size` (le diamètre de la cloche en pixels) ajustent son placement. ### Textes et couleurs `texts.blockedTitle`, `texts.blockedMessage` et `texts.closeText` s'affichent à la place de la demande une fois que le navigateur signale que le visiteur a bloqué les notifications — `texts.acceptText` et `texts.declineText` n'apparaissent jamais dans cet état. `texts.launcherLabel` et `texts.launcherBlockedLabel` sont l'infobulle de la cloche dans chaque état. Chaque champ de texte accepte jusqu'à 300 caractères. `colors.accent`, `colors.background`, `colors.text` et `colors.textSecondary` acceptent une valeur hexadécimale ou un nom de couleur CSS. Le formulaire du Panneau de configuration valide chaque champ de cette manière, jusqu'à 64 caractères. L'extrait d'initialisation accepte n'importe quelle chaîne non vide pour ces champs sans vérifier son format ou sa longueur. ## Le gérer dans le Panneau de configuration Sur une application gérée depuis le panneau, allez dans **Settings → Configure platforms → Web** et ouvrez la carte **Subscription widget**. Un badge sur la carte indique si le widget est **On** ou **Off**. Cliquez sur **Configure** pour modifier les mêmes champs décrits ci-dessus, regroupés en **Prompt**, **When to show**, **Bell**, **Texts** et **Colors**, à côté d'un aperçu en direct montrant à la fois l'état du visiteur indécis et celui du visiteur bloqué. L'enregistrement remplace la copie de la configuration du widget dans le panneau. Cela ne touche pas l'extrait d'initialisation WebSDK sur votre site. Tant qu'une application est gérée depuis le panneau, les valeurs enregistrées dans cette carte remplacent les mêmes clés dans l'extrait d'initialisation du site. Faire passer un site à la configuration par panneau est un simple interrupteur dans le panneau, sans changement de code sur le site. ## 3. Contrôler le widget depuis votre code Une fois le paquet du widget chargé, il publie une API à l'adresse `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()` n'a aucun effet pour un visiteur déjà abonné. Ouvrir l'invite déclenche un événement `show-subscription-widget`. La fermer déclenche `hide-subscription-widget` : ```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 depuis les anciens widgets Le bouton d'abonnement aux notifications push, le Popup d'abonnement personnalisé et l'invite d'abonnement continuent de fonctionner tel que documenté sur leurs propres pages tant que `subscriptionWidget.enable` reste non défini ou `false`. Le définir sur `true` arrête le chargement des trois, aussi bien sur une application configurée par extrait de code que sur une application gérée depuis le panneau.