Invites de permission web

Vue d’ensemble

“Inviter” fait référence au processus de demander aux utilisateurs la permission de leur envoyer des messages. Les invites sont des messages pop-up présentés dans le navigateur ou l’application mobile et nécessitent que l’utilisateur clique sur “Autoriser” pour être abonné et recevoir des messages. Ce guide couvre les différents types d’invites web et comment les configurer. Le push web fonctionne sur desktop, Android et iOS, mais le push web pour iOS nécessite des étapes supplémentaires. Si vous avez une application mobile, consultez comment inviter pour les permissions push avec les messages in-app. Les navigateurs fournissent leur propre invite de permission native au niveau système, qui doit être à la fois affichée et cliquée sur “Autoriser” pour que l’utilisateur s’abonne aux notifications push sur votre site web. Les navigateurs recommandent maintenant fortement aux sites web d’être plus sélectifs quand il s’agit d’afficher l’invite de permission native. C’est pourquoi l’utilisation des invites OneSignal ou de vos propres “invites douces” personnalisées avant l’invite native est encouragée.

Invites OneSignal (invites douces)

Les invites douces OneSignal sont des invites conviviales et personnalisables qui apparaissent avant l’invite de permission native du navigateur. Ces invites n’abonnent pas les utilisateurs aux messages par elles-mêmes ; au lieu de cela, elles aident à :

Expliquer la valeur de l’abonnement aux messages (push, email ou SMS).
Empêcher les navigateurs de bloquer automatiquement les demandes de permission.
Lancer l’invite de navigateur native uniquement après que l’utilisateur ait exprimé son intérêt.

Les invites douces sont recommandées par les navigateurs et aident à maximiser les taux d’engagement tout en protégeant la réputation de votre domaine.

Icône d’invite

Définissez une icône par défaut dans Paramètres > Push & In-App > Web. Cette icône apparaît dans les notifications push web et les invites sauf si vous la remplacez par message.

Formats acceptés : PNG, JPG ou GIF non animé
Taille recommandée : 256×256 pixels
Si non définie, OneSignal utilise une icône de cloche générique

Voir Icônes de notification pour le recadrage par navigateur, le badge Chrome sur Android et les remplacements par message.

Section Configuration du site des paramètres push web

Configuration de l’invite de permission

Configurez les invites que vous souhaitez afficher sur votre site. Dans votre tableau de bord OneSignal, naviguez vers : Paramètres > Push & In-App > Paramètres Web > Configuration de l’invite de permission. De là, cliquez sur Ajouter une invite pour choisir parmi les types d’invites disponibles de OneSignal. Vous pouvez également modifier toutes les invites existantes déjà affichées dans la liste.

Chaque type d’invite a différents cas d’utilisation et comportements d’affichage. Vous pouvez les utiliser individuellement ou en combinaison pour guider les utilisateurs à travers le processus d’abonnement d’une manière qui convient à l’UX de votre site web. Les invites disponibles sont :

Déroulante : Une invite visuellement proéminente utilisée pour les notifications push et la sélection de catégorie optionnelle.
Invite Email/Téléphone : Utilisée pour collecter les adresses email, les numéros de téléphone des utilisateurs, ou les deux.
Invite cloche d’abonnement : Un widget flottant persistant pour les abonnements push, généralement placé dans le coin inférieur de votre site.
Invite lien personnalisé : Un bouton ou lien personnalisable intégré dans votre site qui déclenche l’invite de navigateur native.
Invite de permission native : L’invite requise au niveau du navigateur qui doit être acceptée pour que les utilisateurs reçoivent des notifications push.

Déroulante & catégorie

Les invites Déroulante et Catégorie apparaissent de manière proéminente en haut au centre de l’écran sur desktop et en bas au centre sur mobile. Ce sont des invites douces à haute visibilité affichées avant l’invite de permission native requise. Elles n’abonnent pas l’utilisateur par elles-mêmes mais aident à initier le flux d’abonnement et à capturer l’intérêt de l’utilisateur.

Invite déroulante animée avec des balises de catégorie sur Chrome desktop — Invite déroulante avec des balises de catégorie

Pour ajouter une invite déroulante, suivez les étapes ci-dessous : Configuration de site typique & WordPress :

Allez dans Paramètres > Push & In-App > Paramètres Web > Configuration de l’invite de permission
Sélectionnez Ajouter une invite > Invite Push > Invite déroulante push

Configuration de code personnalisé : Utilisez la propriété slidedown dans l’objet promptOptions de votre code init OneSignal. Voir Référence du SDK Web pour plus de détails.

Options de configuration de l'invite déroulante push dans le tableau de bord — Options de l'invite déroulante push

Pour plus de détails sur le déclenchement de l’invite, voir Paramètres d’invite automatique et d’affichage.

Texte de l’invite déroulante

Vous pouvez personnaliser le texte affiché dans l’invite déroulante :

Message d’action : jusqu’à 90 caractères
Étiquettes de bouton : jusqu’à 15 caractères chacune
La personnalisation de la police, de la taille ou des couleurs n’est actuellement pas prise en charge

Activez l’option de personnalisation du texte dans le tableau de bord. Si aucun texte n’est saisi, le texte par défaut sera utilisé.

Champs de personnalisation du texte de l'invite déroulante — Options de texte de l'invite déroulante

Lorsque vous avez terminé, cliquez sur Terminé et Enregistrer à nouveau sur la page suivante pour que cela prenne effet.

Pour la configuration de code personnalisé, utilisez les propriétés text dans l’objet promptOptions de votre code init OneSignal. Voir Référence du SDK Web pour plus de détails.

Catégories

Vous pouvez améliorer l’invite déroulante en ajoutant des catégories—des cases à cocher qui permettent aux utilisateurs d’indiquer leur intérêt pour des sujets de message spécifiques (par exemple, Actualités, Ventes, Mises à jour).

Jusqu’à 10 catégories autorisées
Chaque catégorie est stockée comme une balise de données avec un 1 (sélectionné) ou 0 (non sélectionné)
Utile pour la segmentation et le ciblage des messages par préférences utilisateur

Vous pouvez afficher l’invite de catégorie à nouveau plus tard pour permettre aux utilisateurs de mettre à jour leurs préférences. Les valeurs précédemment sélectionnées seront conservées sauf si elles sont écrasées.

Étiquette : ce que l’utilisateur voit dans l’invite. Recommandé de mettre en majuscule la première lettre.
Clé de balise : ce que la balise dans OneSignal sera. Utilisez la convention de nommage cat_<category> (minuscules, underscores pour les espaces) — par exemple cat_breaking_news, cat_sports, cat_apparel. Cela correspond à la convention utilisée dans les guides sectoriels OneSignal et permet au même espace de noms de balises d’être rempli automatiquement à partir du comportement de visite de pages. Voir Baliser les utilisateurs par sujet de page pour le modèle de balisage automatique.
Instructions de mise à jour, Boutons positif et négatif : si vous choisissez d’afficher l’invite de catégorie à nouveau après que l’utilisateur soit déjà abonné au push, les instructions de mise à jour seront affichées au lieu du message d’action. Cela vous permet d’informer l’utilisateur qu’il peut mettre à jour ses catégories.

Configuration de catégorie montrant les champs étiquette et clé de balise — Configuration de catégorie avec étiquette et clé de balise

Lorsque vous avez terminé, cliquez sur Terminé et Enregistrer à nouveau sur la page suivante pour que cela prenne effet.

Pour la configuration de code personnalisé, utilisez les propriétés categories dans l’objet promptOptions de votre code init OneSignal. Voir Référence du SDK Web pour plus de détails.

Pour plus de détails sur le déclenchement de l’invite, voir Paramètres d’invite automatique et d’affichage.

Invite Email & numéro de téléphone

L’invite Email & Téléphone collecte les informations de contact optionnelles de l’utilisateur directement dans une déroulante. Chaque champ a une validation intégrée pour assurer le formatage correct. Une fois soumis :

De nouveaux abonnements Email et/ou SMS sont créés pour l’utilisateur
Vous pouvez commencer à leur envoyer des messages sur ces canaux

Pour ajouter cette invite :

Naviguez vers Paramètres > Push & In-App > Paramètres Web > Configuration de l’invite de permission > Ajouter une invite > Invite Email/Téléphone.

Options de configuration de l'invite email et numéro de téléphone — Configuration de l'invite email et numéro de téléphone

Personnalisez les champs d’entrée affichés, les étiquettes de texte et le délai d’invite automatique.

Options de champs et d'étiquettes de l'invite email et numéro de téléphone — Options de l'invite email et numéro de téléphone

Lorsque vous avez terminé, appuyez sur Terminé et Enregistrer à nouveau sur la page suivante pour que cela prenne effet.

Pour la configuration de code personnalisé, dans l’objet promptOptions de votre code init OneSignal, ajoutez le type pour qu’il soit soit email, sms, ou smsAndEmail. Voir Référence du SDK Web pour plus de détails.

Pour plus de détails sur le déclenchement de l’invite, voir Paramètres d’invite automatique et d’affichage.

Invite cloche d’abonnement

L’invite cloche d’abonnement est un petit widget persistant qui apparaît dans le coin inférieur de votre site web. Lorsqu’il est cliqué par un utilisateur non abonné, il déclenche l’invite de navigateur native. En raison de son empreinte minimale, la cloche peut être laissée visible en permanence, ce qui en fait une option passive mais efficace pour des opportunités d’abonnement continues. Elle ne nécessite pas de rejet et donne aux utilisateurs le contrôle sur le moment de s’abonner.

Vous pouvez personnaliser la couleur, la taille, la position inférieure, le texte et plus encore de l’invite cloche OneSignal.

Vous ne pouvez actuellement pas changer l’image de l’icône ou placer la cloche dans les coins supérieurs.

Configuration de site typique & WordPress : Invite cloche d'abonnement

Naviguez vers : Paramètres > Push & In-App > Paramètres Web > Configuration de l’invite de permission > Ajouter une invite > Invite cloche d’abonnementVous pouvez personnaliser pour la cloche :

Couleur
Taille
Position inférieure (gauche ou droite)
Texte et étiquettes

Après la configuration, cliquez sur Terminé, puis Enregistrer pour appliquer les modifications.

Configuration de code personnalisé : Invite cloche d'abonnement

Utilisez le paramètre notifyButton dans vos options d’initialisation du SDK web. Vous pouvez basculer entre différents exemples pour les personnalisations de l’invite cloche.Masquage : Pour masquer la cloche d’abonnement après qu’un utilisateur s’abonne ou ne la montrer que sur certaines pages, assurez-vous de retourner la valeur false ou une Promise qui résout à la valeur false dans la fonction displayPredicate pendant l’initialisation. Cette fonction est évaluée avant que la cloche d’abonnement ne soit affichée. Vous pouvez retourner toute autre valeur pour afficher la cloche d’abonnement.

// Your other init options here
notifyButton: {
    enable: true, /* Required to use the Subscription Bell */
    size: 'medium', /* One of 'small', 'medium', or 'large' */
    theme: 'default', /* One of 'default' (red-white) or 'inverse" (white-red) */
    position: 'bottom-right', /* Either 'bottom-left' or 'bottom-right' */
    offset: {
        bottom: '0px',
        left: '0px', /* Only applied if bottom-left */
        right: '0px' /* Only applied if bottom-right */
    },
    showCredit: false, /* Hide the OneSignal logo */
    text: {
        'launcher.button.aria-label': 'Manage notifications', /* Accessible name of the bell button */
        'tip.state.unsubscribed': 'Subscribe to notifications',
        'tip.state.subscribed': "You're subscribed to notifications",
        'tip.state.blocked': "You've blocked notifications",
        'message.prenotify': 'Click to subscribe to notifications',
        'message.action.subscribed': "Thanks for subscribing!",
        'message.action.resubscribed': "You're subscribed to notifications",
        'message.action.unsubscribed': "You won't receive notifications again",
        'dialog.main.title': 'Manage Site Notifications',
        'dialog.main.button.subscribe': 'SUBSCRIBE',
        'dialog.main.button.unsubscribe': 'UNSUBSCRIBE',
        'dialog.blocked.title': 'Unblock Notifications',
        'dialog.blocked.message': "Follow these instructions to allow notifications:"
    }
}

// Your other init options here
notifyButton: {
  enable: true, // Required to use the Subscription Bell
  // Your other Subscription Bell settings here
  colors: { // Customize the colors of the main button and dialog popup button
    'circle.background': 'rgb(84,110,123)',
    'circle.foreground': 'white',
    'badge.background': 'rgb(84,110,123)',
    'badge.foreground': 'white',
    'badge.bordercolor': 'white',
    'pulse.color': 'white',
    'dialog.button.background.hovering': 'rgb(77, 101, 113)',
    'dialog.button.background.active': 'rgb(70, 92, 103)',
    'dialog.button.background': 'rgb(84,110,123)',
    'dialog.button.foreground': 'white'
  },
}

// Your other init options here
notifyButton: {
    /* Your other Subscription Bell settings here ... */
    enable: true,
    displayPredicate: function() {
      /* The user is subscribed, so we want to return "false" to hide the Subscription Bell */
      return !OneSignal.Notifications.permission
    },
}

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(function(OneSignal) {
    OneSignal.init({
      appId: "YOUR_APP_ID",
      notifyButton: {
        enable: true,
        size: 'medium',
        theme: 'default',
        position: 'bottom-right',
        offset: {
          bottom: '0px',
          left: '0px',
          right: '0px'
        },
        showCredit: false,
        text: {
          'launcher.button.aria-label': 'Manage notifications',
          'tip.state.unsubscribed': 'Subscribe to notifications',
          'tip.state.subscribed': "You're subscribed to notifications",
          'tip.state.blocked': "You've blocked notifications",
          'message.prenotify': 'Click to subscribe to notifications',
          'message.action.subscribed': "Thanks for subscribing!",
          'message.action.resubscribed': "You're subscribed to notifications",
          'message.action.unsubscribed': "You won't receive notifications again",
          'dialog.main.title': 'Manage Site Notifications',
          'dialog.main.button.subscribe': 'SUBSCRIBE',
          'dialog.main.button.unsubscribe': 'UNSUBSCRIBE',
          'dialog.blocked.title': 'Unblock Notifications',
          'dialog.blocked.message': "Follow these instructions to allow notifications:"
        },
        colors: {
          'circle.background': 'rgb(84,110,123)',
          'circle.foreground': 'white',
          'badge.background': 'rgb(84,110,123)',
          'badge.foreground': 'white',
          'badge.bordercolor': 'white',
          'pulse.color': 'white',
          'dialog.button.background.hovering': 'rgb(77, 101, 113)',
          'dialog.button.background.active': 'rgb(70, 92, 103)',
          'dialog.button.background': 'rgb(84,110,123)',
          'dialog.button.foreground': 'white'
        },
        displayPredicate: function() {
          return !OneSignal.Notifications.permission;
        }
      }
    });
  });
</script>

Invite lien personnalisé

L’invite lien personnalisé est un bouton ou lien déclenché par l’utilisateur que vous pouvez intégrer n’importe où sur votre site web. Lorsqu’il est cliqué, il affiche l’invite de navigateur native pour les notifications push.

Cas d’utilisation courants :

Sous un article de blog : “Vous avez aimé cet article ? Recevez des mises à jour dès que nous publions !”
Dans le pied de page de votre site
Dans un en-tête collant ou une barre d’outils flottante

Configuration de site typique & WordPress : Invite lien personnalisé

Naviguez vers : Paramètres > Push & In-App > Paramètres Web > Configuration de l’invite de permission > Ajouter une invite > Lien personnalisé.Ajoutez le HTML fourni sur votre page où vous voulez que le widget s’affiche.Configurez vos options, puis cliquez sur Terminé et Enregistrer pour activer.

Configuration de l'invite lien personnalisé dans le tableau de bord — Configuration du lien personnalisé dans le tableau de bord

Configuration de code personnalisé : Lien personnalisé

Dans l’objet promptOptions de votre code init OneSignal, ajoutez l’objet customlink et ses propriétés disponibles.

// Your other init options here
promptOptions: {
  customlink: {
    enabled: true, /* Required to use the Custom Link */
    style: "button", /* Has value of 'button' or 'link' */
    size: "medium", /* One of 'small', 'medium', or 'large' */
    color: {
      button: '#E12D30', /* Color of the button background if style = "button" */
      text: '#FFFFFF', /* Color of the prompt's text */
    },
    text: {
      subscribe: "Subscribe to push notifications", /* Prompt's text when not subscribed */
      unsubscribe: "Unsubscribe from push notifications", /* Prompt's text when subscribed */
      explanation: "Get updates from all sorts of things that matter to you", /* Optional text appearing before the prompt button */
    },
    unsubscribeEnabled: true, /* Controls whether the prompt is visible after subscription */
  }
}

Pour afficher l’invite sur votre site, insérez le HTML suivant où vous voulez que le widget apparaisse :

html

<div class='onesignal-customlink-container'></div>

Configuration typique & de code personnalisé : Style additionnel

Pour changer l’apparence du widget à tout moment, tous les éléments ont une classe spéciale onesignal-reset qui supprime tout style antérieur de l’élément pour s’assurer qu’il n’y a pas de conflit avec nos styles internes et qu’il apparaît exactement comme vous l’avez défini dans le tableau de bord.Si vous avez besoin de redéfinir des styles OneSignal, voici une référence rapide des classes utilisées dans le widget de lien personnalisé

Nom de classe	S’applique à
onesignal-customlink-container	Conteneur principal
onesignal-customlink-subscribe	Bouton d’action
onesignal-customlink-explanation	Paragraphe avec un texte d’explication personnalisé
state-subscribed	Tous les composants internes au conteneur principal
state-unsubscribed	Tous les composants internes au conteneur principal
button	Bouton d’action en mode bouton
link	Bouton d’action en mode lien
small	Tous les composants internes au conteneur principal
medium	Tous les composants internes au conteneur principal
large	Tous les composants internes au conteneur principal
hide	Tous les composants internes au conteneur principal si unsubscribeEnabled est défini sur false

Pour remplacer l’un d’entre eux, vous devez créer une règle CSS avec une spécificité plus élevée, combiner le nom de classe avec l’id de l’élément parent devrait suffire. Mais méfiez-vous des conflits, nos styles internes peuvent changer.

Invite de permission native

L’invite de permission native est la boîte de dialogue contrôlée par le navigateur que les utilisateurs doivent accepter pour s’abonner aux notifications push de votre site web. Cette invite est :

Requise pour l’abonnement
Déclenchée automatiquement après les invites douces OneSignal
Non personnalisable en apparence, texte ou comportement

Invite de permission native du navigateur sur Chrome — Invite de permission native sur Chrome

Comportement de l’invite native du navigateur

Différents navigateurs imposent des comportements et restrictions uniques pour réduire les demandes de permission spammées. Dans un effort pour combattre le spam et les mauvaises expériences utilisateur, OneSignal utilisera automatiquement par défaut l’invite déroulante dans certains cas listés ci-dessous. Si vous ne voulez pas afficher l’invite déroulante et souhaitez utiliser directement l’invite de permission native, vous devez désactiver les options d’invite automatique et utiliser notre méthode requestPermission() du SDK Web. L’affichage direct de l’invite de permission native peut ne pas fonctionner dans tous les navigateurs comme décrit ci-dessous.

Chrome

Chrome 80+ peut afficher une UI plus discrète au lieu de l’invite complète :

S’applique automatiquement aux utilisateurs qui refusent fréquemment les invites
S’applique également aux sites avec un taux élevé de refus

UI discrète de permission de notification de Chrome — UI de notification discrète sur Chrome desktop

Chrome implémente une logique de recul si l’utilisateur clique sur le “X” sur l’invite native :

Vous avez 3 tentatives pour inviter
Après le 3e rejet, l’invite est supprimée pendant 7 jours (source).

L’utilisation de la configuration de site typique & WordPress pour configurer l’invite de permission native affichera automatiquement l’invite déroulante sur Chrome pour les appareils mobiles.Nous avons délibérément ajouté la double invite sur Android car l’invite de permission native sur Chrome pour Android est un pop-up très peu convivial qui prend en charge tout l’écran de votre site et cela évite à vos utilisateurs d’avoir une mauvaise expérience en visitant votre site.Si vous ne voulez pas afficher l’invite déroulante, vous devez désactiver le commutateur d’invite automatique dans l’éditeur d’invite (n’oubliez pas d’appuyer sur le bouton Enregistrer), puis utilisez la méthode requestPermission() du SDK Web.

Firefox

Firefox 72+ a commencé à exiger un geste utilisateur pour déclencher l’invite de permission native. Si vous essayez d’afficher automatiquement l’invite de permission native sur Firefox, vous verrez une icône dans le navigateur comme ceci, nécessitant que l’utilisateur clique sur l’icône pour afficher l’invite de permission native.

Icône de permission de notification Firefox

L’utilisation de la configuration de site typique & WordPress pour configurer l’invite de permission native affichera automatiquement l’invite déroulante sur Firefox.Nous avons délibérément ajouté la double invite sur Firefox car il nécessite un opt-in en 2 étapes dans tous les cas et l’invite déroulante est un moyen plus accrocheur d’augmenter l’engagement.Si vous ne voulez pas afficher l’invite déroulante, vous devez désactiver le commutateur d’invite automatique dans l’éditeur d’invite (n’oubliez pas d’appuyer sur le bouton Enregistrer), puis utilisez la méthode requestPermission() du SDK Web.

Safari

Safari 12.1+ a commencé à exiger un geste utilisateur pour déclencher l’invite de permission native.

L’utilisation de la configuration de site typique & WordPress pour configurer l’invite de permission native ne fonctionnera pas pour Safari en raison de cette exigence de geste utilisateur.Nous avons délibérément ajouté l’invite déroulante sur Safari car il nécessite un opt-in en 2 étapes.

Edge

Edge utilise un modèle basé sur la confiance :

Si le site n’est pas fiable, l’invite est supprimée et remplacée par une icône de cloche dans la barre du navigateur :

Icône de cloche pour les sites non fiables dans Edge

Si le site est fiable, l’invite native apparaît normalement :

Invite de permission native Edge pour les sites fiables — Invite native pour les sites fiables dans Edge

Paramètres d’invite automatique et d’affichage

Pour maximiser l’engagement et éviter de perturber vos utilisateurs, il est préférable de retarder l’affichage des invites jusqu’à ce qu’ils aient passé du temps sur votre site. OneSignal vous permet d’afficher automatiquement les invites en fonction du comportement de l’utilisateur en utilisant deux conditions de délai :

Pages vues : Nombre de fois que l’utilisateur charge une page sur votre site
Secondes sur la page : Temps que l’utilisateur doit passer sur la page

Ces délais sont appliqués en utilisant une condition ET, ce qui signifie que les deux doivent être satisfaits avant que l’invite n’apparaisse. Exemple : Si vous définissez le délai à 3 pages vues et 30 secondes, l’invite s’affichera au troisième chargement de page, après 30 secondes écoulées. Si l’utilisateur n’interagit pas avec l’invite, elle continuera à s’afficher à chaque chargement de page (après 30 secondes) jusqu’à ce qu’elle soit cliquée ou rejetée.

Configuration de site typique & WordPress : Invite automatique

Naviguez vers : Paramètres > Push & In-App > Paramètres Web > Configuration de l’invite de permission
Choisissez une invite ou créez-en une nouvelle
Activez l’invite automatique
Définissez vos préférences de délai (pages vues et délai temporel)

Paramètres de délai de l'invite automatique pour les pages vues et les secondes — Paramètres de délai de l'invite automatique

Cliquez sur Terminé, puis Enregistrer

Si vous voulez déclencher l’invite par programmation, gardez l’invite automatique désactivée et utilisez les méthodes d’invite du SDK Web.

Configuration de code personnalisé : Invite automatique

Dans l’objet promptOptions de votre code init OneSignal, utilisez les options autoPrompt et delay. Il existe également des méthodes pour déclencher directement les invites déroulantes ou natives souhaitées. Voir Référence du SDK Web pour plus de détails.

Déclenchement manuel (au lieu de l'invite automatique)

Si vous voulez plus de contrôle sur quand les invites sont affichées—par exemple, uniquement sur des pages spécifiques ou après des actions spécifiques :

Désactivez l’invite automatique
Utilisez les méthodes d’invite déroulante ou native du SDK pour afficher l’invite via le code

Logique de recul de l’invite déroulante

Une fois qu’une invite déroulante (Push, Catégorie ou Email/Téléphone) est affichée et rejetée (via Autoriser, Annuler ou fermeture de la boîte de dialogue), elle reculera et réapparaîtra selon un calendrier défini :

Résultat de l’interaction	Prochaine temporisation d’invite
Premier rejet	Attendre 3 jours
Deuxième rejet	Attendre 7 jours
Troisième rejet et suivants (non abonné)	Attendre 30 jours

Par exemple, si l’utilisateur clique sur “Autoriser” sur la déroulante mais clique ensuite sur “X” sur l’invite native du navigateur (sans s’abonner), la déroulante suivra le cycle de recul ci-dessus.

Cette logique s’applique aux invites déroulantes Push, Catégorie et Email/Téléphone. Vous pouvez contourner la logique de recul en utilisant nos méthodes d’invite déroulante du SDK Web.Pour la logique de recul de l’invite native, voir Comportement de l’invite native du navigateur. Vous ne pouvez pas contourner la logique de recul pour l’invite native car cela est contrôlé par le navigateur.

Si l’utilisateur efface les cookies ou les données du navigateur, le cycle de recul se réinitialise et l’invite peut apparaître à nouveau comme si c’était la première fois.

Bonnes pratiques pour demander les permissions push web

Obtenir des utilisateurs qu’ils accordent les permissions push web nécessite du timing, de la confiance et une conception conviviale. Suivez ces bonnes pratiques pour maximiser les taux d’opt-in tout en maintenant une expérience positive sur le site.

Soyez stratégique sur le moment de demander

Le timing compte plus que la fréquence. Affichez les invites de permission lorsque les utilisateurs sont déjà engagés ou montrent une intention. Par exemple :

Après qu’ils ajoutent un article à leur panier ou interagissent avec une publication ou un commentaire
Lorsqu’ils mettent à jour leur profil ou se connectent à leur compte
À la fin d’une action qui montre un engagement envers votre marque

Inviter les utilisateurs à ces moments augmente les taux d’acceptation car ils sont plus investis dans votre contenu et votre valeur. Si votre site a un profil ou un centre de préférences, incluez-y des contrôles d’opt-in push (et d’autres canaux). Cela renforce la transparence et donne aux utilisateurs plus de contrôle sur la façon dont ils reçoivent les mises à jour. Consultez notre guide Centre de préférences pour plus de détails.

Utilisez l’invite cloche d’abonnement

L’invite cloche est un moyen persistant et non intrusif pour les utilisateurs de s’abonner à tout moment. Cette icône de cloche flottante est idéale pour l’engagement à long terme car elle :

Garde l’option d’abonnement visible sans perturber la navigation.
Permet aux utilisateurs de s’abonner quand ils le choisissent.
Renforce la confiance en ne forçant pas des demandes de permission immédiates.

L’invite cloche est particulièrement efficace pour les visiteurs récurrents et les utilisateurs qui ont initialement rejeté les demandes de permission.

Laissez les utilisateurs personnaliser leurs abonnements avec les catégories

L’invite de catégorie permet aux utilisateurs de choisir les sujets ou types de messages qu’ils veulent—comme “Ventes”, “Mises à jour produit” ou “Articles de blog”. Cette approche :

Rend l’invite moins intrusive et plus pertinente
Améliore l’engagement et les taux de clics des messages
Réduit les désabonnements ultérieurs en définissant les attentes tôt

Les opt-ins personnalisés conduisent à une meilleure rétention à long terme car les utilisateurs se sentent maîtres de l’expérience.

Testez et optimisez au fil du temps

Ne comptez pas sur une seule stratégie. Testez différents types d’invites, messages et timings pour voir ce qui résonne avec votre audience. Essayez cette approche :

Commencez avec l’invite de navigateur native pendant quelques mois pour mesurer votre taux d’opt-in de référence.
Après avoir recueilli des données, expérimentez avec l’invite déroulante ou des flux d’invites personnalisés pour améliorer les conversions selon les navigateurs et les segments d’audience.
Suivez les performances en utilisant les événements permissionPromptDisplay et permissionChange et les événements slidedown de notre SDK.

Le comportement d’opt-in peut varier selon la saison, le type d’appareil et la région—testez donc régulièrement pour trouver le bon équilibre entre engagement et confort utilisateur.

FAQ

Problèmes d’affichage de l’invite

L’invite de permission native d’un navigateur peut ne pas s’afficher si l’une des conditions suivantes est vraie : 1. Le navigateur a bloqué l’affichage de l’invite. Naviguez vers les paramètres de votre navigateur et vérifiez le paramètre de permission “Notifications”. Exemple Chrome : chrome://settings/content/notifications

Page des paramètres de permission de notification du navigateur Chrome — Paramètres de notification de Chrome

Dans cet exemple :

L’utilisateur a sélectionné “Ne pas autoriser les sites à envoyer des notifications”, ce qui empêchera l’invite de permission native de s’afficher. Ce paramètre doit indiquer “Les sites peuvent demander à envoyer des notifications” pour permettre l’affichage de l’invite de permission native.
L’utilisateur a ajouté https://yoursite.com à la liste “Non autorisés à envoyer des notifications”, ce qui empêchera l’invite de permission native de s’afficher. Il doit être supprimé de la liste pour permettre l’affichage de l’invite de permission native.

Documentation spécifique aux navigateurs :

Chrome - Cette page explique comment gérer les notifications dans Chrome en allant dans Paramètres > Confidentialité et sécurité > Paramètres des sites > Notifications, où vous pouvez contrôler le comportement par défaut et gérer les permissions pour des sites web individuels.
Firefox - Ce guide couvre les notifications Web Push de Firefox, expliquant comment gérer les permissions de notification via Paramètres > Vie privée et sécurité > Notifications, et comment contrôler les permissions pour des sites spécifiques via l’icône d’informations du site dans la barre d’adresse.
Safari - Ce guide Apple explique comment personnaliser les notifications Safari sur Mac via Safari > Préférences > Sites web > Notifications, où vous pouvez gérer quels sites peuvent envoyer des notifications et contrôler le comportement des notifications via les Préférences Système.
Edge - Cet article détaille comment gérer les notifications Edge en naviguant vers Paramètres > Confidentialité, recherche et services > Autorisations de site > Notifications, ou en cliquant sur l’icône d’informations du site dans la barre d’adresse.

2. L’utilisateur a déjà autorisé les notifications ou est déjà abonné. Dans les paramètres du navigateur, vérifiez si l’URL de votre site est listée dans la liste “Autorisés à envoyer des notifications”. 3. Vous êtes en mode navigation privée, mode navigateur privé ou mode navigateur invité. L’invite de permission native ne s’affichera pas en mode navigation privée, mode navigateur privé ou mode navigateur invité. Les utilisateurs ne peuvent pas s’abonner aux notifications dans ces modes. 4. Vous utilisez un navigateur et un appareil qui ne prennent pas en charge les notifications push web. Assurez-vous que vous utilisez un navigateur et un appareil qui prennent en charge le push web. 5. Les exigences iOS/iPadOS ne sont pas remplies. Pour iOS, il y a quelques exigences supplémentaires pour inviter les utilisateurs pour leur abonnement. Plus d’informations peuvent être consultées dans le guide Push web mobile pour iOS/iPadOS.

Si vous rencontrez toujours des problèmes, consultez notre guide de dépannage du push web.

Les webviews utilisées par les applications de réseaux sociaux (Instagram, TikTok, Facebook, etc.) ne prennent pas en charge les notifications push web. L’application doit ouvrir votre site web dans un navigateur complet qui prend en charge le push web.

Pourquoi l’invite déroulante continue-t-elle à apparaître ?

Il y a deux causes courantes :

Vous êtes en mode navigation privée, mode navigateur privé ou mode navigateur invité.
Vous déclenchez l’invite par programmation sans utiliser l’option d’invite automatique. Voir la Référence du SDK Web et vérifiez les méthodes d’invitation que vous utilisez.

Après avoir rejeté une invite, quand s’affiche-t-elle à nouveau ?

Pour les invites OneSignal, voir Logique de recul de l’invite déroulante. Pour l’invite de permission native, voir Comportement de l’invite native du navigateur.

Pourquoi vois-je l’invite déroulante au lieu de l’invite de navigateur native ?

Certains navigateurs exigent un geste utilisateur avant d’afficher l’invite native. OneSignal affiche automatiquement une invite déroulante en premier dans ces cas. Voir Comportement de l’invite native du navigateur pour plus de détails.

Comment traduire ou localiser l’invite ?

Utilisez la Configuration de code personnalisé pour détecter par programmation la langue du navigateur de l’utilisateur et initialiser le SDK OneSignal avec un texte différent. L’invite de permission native se traduit automatiquement dans la langue définie du navigateur.

Puis-je faire des tests A/B sur les invites ?

Oui. En utilisant la Configuration de code personnalisé, vous pouvez initialiser OneSignal avec différentes options d’invitation. Vous devez configurer votre propre méthode pour déclencher les tests A/B. Utilisez l’événement Changement d’abonnement pour détecter quand un utilisateur s’abonne et ajouter des balises en fonction de la variante qui a gagné.

Puis-je segmenter les abonnements en fonction de la page où ils se sont abonnés ?

Oui. Voir le guide Segmentation automatique par page d’abonnement.

Puis-je changer l’icône de la cloche ?

Non. Vous ne pouvez pas changer l’image de la cloche, mais vous pouvez personnaliser les couleurs, le texte et la position (en bas à gauche ou en bas à droite).

Pourquoi mon audit d’accessibilité signale-t-il la cloche d’abonnement ?

Les versions actuelles du SDK Web donnent au bouton cloche un nom accessible par défaut de “Manage notifications”, il passe donc la vérification “les boutons doivent avoir un texte discernable” utilisée par Lighthouse, PageSpeed Insights et axe. Pour changer ou localiser l’étiquette, définissez la clé launcher.button.aria-label dans notifyButton.text en utilisant la Configuration de code personnalisé.

Puis-je changer les catégories en fonction de la page ?

Oui, de deux façons. Pour afficher des cases à cocher de catégories différentes sur différentes pages, utilisez la Configuration de code personnalisé et configurez les promptOptions categories par page. Pour appliquer automatiquement des balises cat_<category> pendant que les lecteurs naviguent (sans afficher d’invite), voir Baliser les utilisateurs par sujet de page — le modèle de balisage automatique utilise le même espace de noms de balises que l’invite de catégorie, donc les deux approches se combinent proprement.

Comment suivre les événements de l’invite déroulante ?

Le SDK Web OneSignal fournit des méthodes d’événement de l’invite déroulante pour détecter quand l’invite s’affiche, se ferme ou reçoit une action “Autoriser” ou “Annuler”.

Comment puis-je afficher l’invite uniquement sur certaines pages ?

Désactivez l’invite automatique, puis utilisez la méthode SDK d’invite déroulante sur les pages spécifiques où vous voulez que les invites apparaissent. L’invite cloche ne peut pas être désactivée page par page.

Pourquoi vois-je l’invite déroulante sur mobile au lieu de l’invite native ?

Chrome pour Android affiche une invite native en plein écran qui perturbe l’expérience de navigation. OneSignal affiche d’abord une invite déroulante pour offrir une meilleure expérience utilisateur. Pour contourner cela, désactivez l’invite automatique dans l’éditeur d’invite et utilisez la méthode requestPermission() du SDK Web.

Pages associées

Référence SDK Web

Référence API complète pour les méthodes de prompt, les événements et les options d’initialisation.

Push web pour iOS

Étapes de configuration supplémentaires requises pour la prise en charge du push web sur iOS et iPadOS.

Dépannage du push web

Diagnostiquez et résolvez les problèmes courants de notifications push web.

Centre de préférences

Permettez aux utilisateurs de gérer leurs préférences de notifications et leurs opt-ins de canaux.

​Vue d’ensemble

​Invites OneSignal (invites douces)

​Icône d’invite

​Configuration de l’invite de permission

​Déroulante & catégorie

​Texte de l’invite déroulante

​Catégories

​Invite Email & numéro de téléphone

​Invite cloche d’abonnement

​Invite lien personnalisé

​Invite de permission native

​Comportement de l’invite native du navigateur

​Chrome

​Firefox

​Safari

​Edge

​Paramètres d’invite automatique et d’affichage

​Logique de recul de l’invite déroulante

​Bonnes pratiques pour demander les permissions push web

​Soyez stratégique sur le moment de demander

​Utilisez l’invite cloche d’abonnement

​Laissez les utilisateurs personnaliser leurs abonnements avec les catégories

​Testez et optimisez au fil du temps

​FAQ

​Problèmes d’affichage de l’invite

​Comment afficher les invites dans une webview d’application de réseau social ?

​Pourquoi l’invite déroulante continue-t-elle à apparaître ?

​Après avoir rejeté une invite, quand s’affiche-t-elle à nouveau ?

​Pourquoi vois-je l’invite déroulante au lieu de l’invite de navigateur native ?

​Comment traduire ou localiser l’invite ?

​Puis-je faire des tests A/B sur les invites ?

​Puis-je segmenter les abonnements en fonction de la page où ils se sont abonnés ?

​Puis-je changer l’icône de la cloche ?

​Pourquoi mon audit d’accessibilité signale-t-il la cloche d’abonnement ?

​Puis-je changer les catégories en fonction de la page ?

​Comment suivre les événements de l’invite déroulante ?

​Comment puis-je afficher l’invite uniquement sur certaines pages ?

​Pourquoi vois-je l’invite déroulante sur mobile au lieu de l’invite native ?

​Pages associées

Référence SDK Web

Push web pour iOS

Dépannage du push web

Centre de préférences

Vue d’ensemble

Invites OneSignal (invites douces)

Icône d’invite

Configuration de l’invite de permission

Déroulante & catégorie

Texte de l’invite déroulante

Catégories

Invite Email & numéro de téléphone

Invite cloche d’abonnement

Invite lien personnalisé

Invite de permission native

Comportement de l’invite native du navigateur

Chrome

Firefox

Safari

Edge

Paramètres d’invite automatique et d’affichage

Logique de recul de l’invite déroulante

Bonnes pratiques pour demander les permissions push web

Soyez stratégique sur le moment de demander

Utilisez l’invite cloche d’abonnement

Laissez les utilisateurs personnaliser leurs abonnements avec les catégories

Testez et optimisez au fil du temps

FAQ

Problèmes d’affichage de l’invite

Comment afficher les invites dans une webview d’application de réseau social ?

Pourquoi l’invite déroulante continue-t-elle à apparaître ?

Après avoir rejeté une invite, quand s’affiche-t-elle à nouveau ?

Pourquoi vois-je l’invite déroulante au lieu de l’invite de navigateur native ?

Comment traduire ou localiser l’invite ?

Puis-je faire des tests A/B sur les invites ?

Puis-je segmenter les abonnements en fonction de la page où ils se sont abonnés ?

Puis-je changer l’icône de la cloche ?

Pourquoi mon audit d’accessibilité signale-t-il la cloche d’abonnement ?

Puis-je changer les catégories en fonction de la page ?

Comment suivre les événements de l’invite déroulante ?

Comment puis-je afficher l’invite uniquement sur certaines pages ?

Pourquoi vois-je l’invite déroulante sur mobile au lieu de l’invite native ?

Pages associées