Comment ajouter un bouton d'abonnement aux notifications push aux popups

Vous cherchez un moyen d'ajouter un bouton d'abonnement aux notifications push à vos popups ?

Les popups sont un excellent moyen d'augmenter vos conversions et de développer une liste d'e-mails. Mais ce n'est pas tout ce que vous pouvez faire avec. Si vous utilisez le bon constructeur de popups, vous pouvez tout personnaliser sur vos popups.

Par défaut, les notifications push sont également accompagnées de modales popup. Mais vous pouvez obtenir beaucoup plus d'options de personnalisation avec un constructeur de popups.

Nous allons donc utiliser un constructeur de popups pour créer la popup et ajouter un lien d'abonnement afin de collecter des abonnés aux notifications push.

Vous pouvez facilement ajouter un bouton pour collecter les abonnés aux notifications push directement depuis vos popups. Et c'est très facile à faire. Tout ce dont vous avez besoin, c'est d'un constructeur de popups et d'un logiciel de notifications push pour configurer des popups personnalisées afin de collecter des abonnés aux notifications push.

Plongeons dans le vif du sujet.

Comment créer une popup pour collecter des abonnés aux notifications push

Commençons par créer une popup. Nous vous recommandons d'utiliser OptinMonster pour créer toutes vos popups.

OptinMonster est la boîte à outils de conversion n°1 au monde et nous l'utilisons nous-mêmes. OptinMonster rend très simple la création de popups puissantes qui convertissent. Et vous n'aurez jamais besoin d'utiliser de code.

OptinMonster a à peu près tout ce dont vous avez besoin pour démarrer, développer et faire évoluer votre processus de génération de prospects.

Voici un aperçu rapide de ce que vous pouvez faire en utilisant la boîte à outils :

• Collectez des abonnés aux notifications push à l'aide d'une popup
• Convertissez les visiteurs de la première visite en lecteurs réguliers
• Réduire les taux d'abandon de panier et d'abandon de navigation
• Créez des offres à durée limitée avec de vrais compteurs
• Augmentez les téléchargements d'eBooks et les ventes de produits numériques
• Créez un tunnel pour les événements en direct
• Améliorez l'engagement sur le site à l'aide de pop-ups gamifiés
• Redirigez votre trafic vers des pages et des articles qui vous rapportent de l'argent

Nous utilisons OptinMonster assez souvent et nous avons même écrit une critique complète d'OptinMonster. Vous pouvez la consulter, ou commencer votre campagne dès maintenant. Tout ce que vous avez à faire est de vous inscrire à OptinMonster et de suivre le reste de cet article.

Étape n°1 : Créez une campagne popup pour collecter des abonnés

Rendez-vous sur votre tableau de bord OptinMonster et cliquez sur le bouton Créer :

Sélectionnez l'option Template pour commencer à créer une option à l'aide d'un modèle prédéfini :

Pour ce tutoriel, nous allons créer une popup pour le Black Friday. Sélectionnez le type de campagne Popup et recherchez un modèle de campagne

Vous pouvez choisir le modèle que vous voulez, mais nous allons utiliser le modèle de campagne Black Friday pour ce tutoriel.

Après avoir sélectionné votre modèle, donnez un nom à votre campagne. N'oubliez pas que ce nom de campagne est pour vous et que vous créerez probablement un grand nombre de ces popups avec différentes options de ciblage. Donnez donc un nom significatif à la campagne, sinon vous finirez par être vraiment confus plus tard.

De plus, en fonction de votre plan, vous pouvez également utiliser OptinMonster sur plusieurs sites. Sélectionnez donc le site Web où vous souhaitez afficher votre campagne. Cliquez sur Commencer la création une fois que vous avez terminé.

Étape n°2 : Modifiez votre popup pour personnaliser son apparence

Avec OptinMonster, vous bénéficiez d'un constructeur de popup visuel par glisser-déposer. Une fois que vous avez terminé de nommer votre campagne, vous pourrez modifier les moindres détails de votre popup.

La partie la plus incroyable ici est que vous cliquez simplement sur le texte que vous souhaitez modifier et vous le changez en ligne. Il n'est pas nécessaire de remplir un formulaire ou de modifier du code HTML dans la popup.

Vous pouvez tout modifier sur votre popup, y compris les images. Lorsque vous êtes satisfait de l'apparence de l'optin, vous pouvez passer à des paramètres plus avancés.

La façon dont ce modèle particulier est configuré est qu'il y a trois parties à la popup. Vous avez un écran initial Oui/Non où les visiteurs optent pour un coupon lors du Black Friday. C'est ce que vous voyez dans l'image ci-dessus. Par défaut, il s'agit d'un coupon de livraison gratuite. Mais vous pouvez ajouter n'importe quelle offre ou coupon que vous souhaitez.

Lorsque vos visiteurs cliquent sur le bouton Oui de la popup, ils sont envoyés à l'écran Optin. C'est là que vous collecteriez les abonnés. Par défaut, l'écran d'optin collecte les e-mails. Nous allons le remplacer par un bouton pour collecter les abonnés push.

Enfin, vous avez un écran Succès qui s'affiche lorsque votre visiteur s'inscrit.

Faisons cela étape par étape.

Étape n°3 : Supprimer l'optin par e-mail de la popup

Vous pouvez modifier n'importe quel module de la popup que vous souhaitez. Allez à l'écran Optin dans la barre inférieure :

Ici, vous pouvez survoler le module d'optin par e-mail et cliquer sur le bouton de suppression pour le supprimer :

Maintenant que l'optin par e-mail a disparu, nous allons y ajouter un bouton pour collecter les abonnés aux notifications push.

Étape n°4 : Ajouter un bouton « Cliquez pour vous abonner » à votre fenêtre contextuelle

Tout d'abord, ajoutez un bloc HTML à votre popup depuis la barre latérale dans OptinMonster.

C'est ici que nous allons ajouter le code pour collecter les abonnés aux notifications push. Tout d'abord, collez le code suivant pour créer un bouton cliquable :

<button class = "btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications Instead</button>

Collez le code là où il est indiqué que vous pouvez ajouter du HTML. À ce stade, vous devriez voir un nouveau bouton dans votre popup :

Ensuite, faites défiler vers le bas et collez le CSS suivant dans le conteneur CSS :

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

À ce stade, vous devriez voir un beau bouton sur votre popup :

Étape n°5 : Obtenir le code d'abonnement de PushEngage

Les notifications push vous aident à augmenter le trafic de votre site Web et l'engagement de manière autonome. Les notifications push Web sont un moyen efficace de ramener les utilisateurs qui ont pu abandonner leur session ou quitter le site Web. Cela aide à réengager les utilisateurs en les informant de nouveaux contenus, offres ou événements.

Les notifications push incluent également des messages clairs et exploitables et des boutons d'appel à l'action, encourageant les utilisateurs à entreprendre des actions spécifiques, telles que la lecture d'un article, la finalisation d'un achat ou la participation à un événement.

Vous pouvez adapter les notifications push en fonction des préférences, du comportement et des intérêts des utilisateurs, afin de vous assurer que les messages sont pertinents et précieux pour chaque utilisateur. Les utilisateurs doivent accepter de recevoir des notifications push Web. Cela garantit que les messages ne sont pas considérés comme du spam et qu'ils sont envoyés avec la permission des utilisateurs.

La partie la plus cool est que vous pouvez collecter des abonnés aux notifications push à partir de votre popup d'e-mail. Donc, juste au cas où vos visiteurs du site ne voudraient pas donner leur adresse e-mail, vous pouvez toujours les faire s'abonner en utilisant les notifications push Web.

Nous vous recommandons d'utiliser PushEngage pour envoyer des notifications push Web.

Voici un aperçu rapide de ce que vous obtenez avec PushEngage:

• Campagnes automatisées à forte conversion
• Ciblage multiple et options de planification de campagne
• Le suivi des objectifs et les analyses avancées
• Tests A/B intelligents
• Un responsable du succès dédié

Vous pouvez commencer gratuitement, mais si vous êtes sérieux au sujet de la croissance de votre entreprise, vous devriez acheter un plan payant. De plus, avant d'acheter un service de notification push, vous devriez consulter ce guide sur les coûts des notifications push.

Et si vous gérez une boutique en ligne, PushEngage vous aide également à augmenter vos ventes en vous aidant à créer des notifications push e-commerce automatisées.

Vous verrez que PushEngage est de loin le meilleur choix si vous voulez générer du trafic, de l'engagement et des ventes pour votre entreprise. Et si vous avez un budget limité, vous pouvez toujours faire preuve d'un peu créativité avec vos notifications push.

Rendez-vous sur la page d'accueil de PushEngage et cliquez sur le bouton Commencer :

Ensuite, vous devrez sélectionner le plan gratuit pour essayer PushEngage ou choisir un plan payant si vous êtes sérieux au sujet de la croissance de votre entreprise. Les plans payants offrent plus d'options de campagne et la possibilité de créer des listes d'abonnés encore plus grandes.

Dans votre tableau de bord PushEngage, allez dans Paramètres du site » Détails du site et cliquez sur le bouton Cliquez ici pour les instructions de configuration. Sous N'importe quel site, vous obtiendrez votre code d'installation :

ATTENTION : Vous devez copier le code que vous obtenez de votre tableau de bord. Le code est unique pour chaque utilisateur de PushEngage. Vous ne pourrez pas copier le code de l'image et collecter les abonnés aux notifications push.

Une fois que vous avez le code dans votre tableau de bord PushEngage, prenez le deuxième script et ajoutez-lui du code supplémentaire. Votre code final devrait ressembler à ceci :

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
}]);
}
</script>

Étape n°6 : Ajoutez votre code d'abonnement au bloc HTML de votre popup

Ajoutez ce code au bloc HTML dans OptinMonster et vous aurez terminé !

Lorsque vous avez terminé, cliquez simplement sur les boutons Enregistrer et Publier.

Étape n°7 : Ajoutez le suivi des clics et la fermeture de la campagne

La dernière chose que nous devons faire est d'ajouter le code de suivi des clics pour considérer chaque abonné comme une conversion dans OptinMonster. De plus, lorsque le visiteur s'abonne, vous voudrez soit qu'il passe à l'écran Succès, soit qu'il quitte la campagne.

Dans l'extrait de code Javascript, ajoutez les lignes de code suivantes :

Pour activer le suivi des conversions, ajoutez ce code :

om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster

Pour déplacer votre abonné vers l'écran de succès, ajoutez ce code :

om{{id}}.changeView('success'); // Show Success view on submission

Pour fermer la campagne lors de l'abonnement, ajoutez ce code :

om{{id}}.startClose();// Close campaign on submission

Vous pouvez également ajouter plusieurs extraits de code. Nous vous recommandons de déplacer les abonnés vers l'écran de succès et de suivre la conversion. Ainsi, l'extrait de code final que nous recommandons d'utiliser (y compris le bouton et tout le Javascript) est :

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.startClose();// Close campaign on submission
}]);
}
</script>
<div>
	<button class="btn" onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Ou, vous pouvez utiliser ce code à la place pour fermer directement la campagne :

<script src="https://clientcdn.pushengage.com/core/02a6e92667ae2279fcba8932356c1d93.js" async></script>
<script> window._peq = window._peq || [];
function subscribeOnClickButton(){
window._peq.push(['subscribe',{}.pe,function(res){
console.log(res);
om{{id}}.Listeners.convert(); //Track submission as a conversion in OptinMonster
om{{id}}.changeView('success'); // Show Success view on submission
}]);
}
</script>
<div>
	<button onclick="subscribeOnClickButton()">Get Updates via Push Notifications</button>
</div>

Copiez et collez simplement le code dans le bloc HMTL de votre popup OptinMonster.

Et pour l'un ou l'autre extrait de code, n'oubliez pas d'ajouter le CSS suivant dans la section CSS de votre bloc HTML :

html div#om-{{id}} .btn
{
    font-family: Arial, sans-serif;
    font-weight: 0;
    font-size: 14px;
    color: #fff;
    background-color: #cf1f31;
    padding: 10px 30px;
    width: 100%;
    margin: auto;
    border: solid #cf1f31 2px;
    box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
    border-radius: 50px;
    transition : 1000ms;
    transform: translateY(0);
    display: grid;
    align-text: center;
    cursor: pointer;
}

html div#om-{{id}} .btn:hover
{
    transition : 1000ms;
    padding: 10px 35px;
    transform : translateY(-0px);
    background-color: #ffffff;
    color: #cf1f31;
    border: solid 2px #ffffff;
}

Lorsque vous avez terminé, cliquez sur Enregistrer. Si vous vérifiez votre site Web, vous devriez maintenant voir la popup collecter les abonnés par e-mail et par notifications push :

Et voilà, vous collectez des abonnés push depuis votre popup. Les notifications push sont livrées avec leurs propres modales de popup. Mais elles sont un peu difficiles à personnaliser. Vous pouvez donc créer de belles popups en utilisant OptinMonster et les utiliser comme vos popups de notification push.

Étape n°8 : Publiez votre popup d'intention de sortie dans WordPress

Lorsque vous créez une nouvelle campagne, elle est En pause par défaut.

Accédez à l'onglet Publier depuis le menu supérieur pour voir les Options de publication. Ensuite, définissez le statut sur Publier et sélectionnez la plateforme de site Web :

Si vous utilisez un site WordPress, le plugin OptinMonster s'occupe du reste de la configuration automatiquement. Il en va de même pour Shopify et BigCommerce. Pour tout autre site, cliquez sur N'importe quel site et collez le code d'intégration dans l'en-tête de votre site Web :

Et voilà !

Étape bonus : Désactiver l'installation rapide dans PushEngage

L'installation rapide est une méthode d'ajout d'abonnés aux notifications push à un site Web sans certificat SSL. De nos jours, presque tous les sites ont un certificat SSL, mais juste au cas où vous n'en auriez pas installé, nous vous recommandons vivement d'en installer un immédiatement. Consultez cet article sur comment installer un certificat SSL dans WordPress.

Donc, avant de commencer à collecter des abonnés sur votre site, nous vous recommandons également de désactiver l'installation rapide. Accédez au tableau de bord PushEngage et allez dans Design » Modales de popup. Ensuite, désactivez l'installation rapide :

Et maintenant, vous êtes prêt à promouvoir votre site Web et à collecter plus d'abonnés pour le Black Friday !

Que faire après avoir commencé à collecter des abonnés aux notifications push

C'est tout pour cette fois, les amis !

Faites-nous savoir si cet article vous a aidé. La création de pop-ups sur votre site peut vous aider à convertir votre trafic en abonnés aux notifications push et en prospects commerciaux réels. Et nous vous recommandons vivement de commencer à créer des pop-ups d'intention de sortie dès maintenant.

Et si vous recherchez un moyen abordable d'augmenter votre trafic, nous vous recommandons d'utiliser les notifications push. Les notifications push peuvent vous aider à générer plus de trafic de retour et d'engagement sur le site. Vous pouvez également créer des campagnes de notifications push automatisées qui génèrent des ventes.

Pas convaincu ? Consultez ces ressources :

• 7 stratégies intelligentes pour stimuler l'engagement client
• Les notifications push sont-elles efficaces ? 7 statistiques + 3 conseils d'experts
• Comment configurer des notifications push pour paniers abandonnés (Tutoriel facile)
• Comment ajouter un plugin WordPress de notifications Web à votre site

Nous vous recommandons d'utiliser PushEngage pour créer vos campagnes de notifications push. PushEngage est le logiciel de notifications push n°1 au monde. Donc, si ce n'est pas déjà fait, commencez avec PushEngage dès aujourd'hui !