Comment ajouter une notification push Web à votre site WordPress

Avez-vous remarqué les notifications push Web utilisées sur des sites Web populaires tels que Facebook? Récemment, un de nos lecteurs nous a demandé s’il était possible d’ajouter des notifications Web push dans WordPress. Bien sûr, ça l'est. Dans cet article, nous allons vous montrer comment ajouter une notification push Web à votre site WordPress..

Pourquoi ajouter des notifications Web Push sur votre site WordPress?

Les notifications Web push sont des messages cliquables affichés sur le bureau de l'utilisateur. Ils peuvent être affichés même lorsque le navigateur de l'utilisateur n'est pas ouvert.

En plus du bureau, les notifications Web push fonctionnent également sur les navigateurs mobiles.

Des sites populaires tels que Facebook, Pinterest, LinkedIn et de nombreux autres utilisent déjà des notifications Web push. Il s'avère être plus attrayant que les SMS, le marketing par courriel et les autres médias sociaux. Selon un sondage, le taux d'ouverture des notifications push sur les appareils mobiles est de 50%.

Cela signifie un public plus engagé pour votre site WordPress et une augmentation significative du nombre de pages vues et de visiteurs.

Cela dit, examinons comment ajouter des notifications Web push à un site WordPress..

Configuration de notifications Web Push dans WordPress avec OneSignal

OneSignal est un service gratuit qui vous permet d'ajouter des notifications push à tout site Web, application Web ou application mobile..

La première chose à faire est d’installer et d’activer le plugin OneSignal. Pour plus de détails, consultez notre guide étape par étape pour installer un plugin WordPress..

Lors de l'activation, le plugin ajoutera un nouvel élément de menu intitulé OneSignal dans votre barre d'administration WordPress. En cliquant dessus, vous accédez à la page des paramètres du plug-in..

La page des paramètres est divisée en onglets Configuration et Configuration. L'onglet Configuration est en fait une documentation détaillée sur la configuration des notifications push OneSignal dans WordPress. Il a les mêmes étapes que nous allons vous montrer dans ce tutoriel.

Pour configurer OneSignal, vous devez ajouter différentes clés d’API et ID d’application dans les paramètres du plug-in..

Commençons.

Étape 1: créer des clés Google

Tout d'abord, vous devez visiter le site Web de Google Services Wizard..

Donnez simplement un nom à votre application et ajoutez un nom de package Android. OneSignal n'utilise pas le nom du package Android, mais il s'agit d'un champ obligatoire..

Ensuite, choisissez votre pays et votre région, puis cliquez sur le bouton "Choisir et configurer les services"..

Cela vous mènera à l'écran suivant où il vous sera demandé de sélectionner les services Google que vous souhaitez utiliser avec votre application. Vous devez cliquer sur le bouton "Activer la messagerie Google Cloud"..

Vous verrez maintenant votre clé API de serveur et votre identifiant d'expéditeur.

Vous devez copier votre identifiant d'expéditeur et le coller dans l'onglet Configuration du plugin WordPress sous le champ Numéro de projet Google..

Vous devez également copier votre clé API de serveur et la coller dans un fichier texte sur votre ordinateur. Vous aurez besoin de cette clé API plus tard dans ce tutoriel..

Étape 2: Configuration des notifications push de Chrome et de Firefox

Nous allons maintenant configurer les notifications push sur Chrome et Firefox. Tout d'abord, vous devez visiter le site Web OneSignal et créer votre compte gratuit..

Une fois votre compte créé, vous devez vous connecter et cliquer sur le bouton "Ajouter une nouvelle application"..

Vous serez invité à entrer un nom pour votre application. Vous pouvez utiliser le nom de votre choix, puis cliquer sur le bouton "Créer" pour continuer..

Sur la page suivante, vous serez invité à sélectionner une plate-forme à configurer. Vous devez sélectionner 'Website Push' puis cliquer sur le bouton suivant pour continuer..

Après quoi, il vous sera demandé de sélectionner la plate-forme du navigateur. Vous verrez Google Chrome et Mozilla Firefox dans une boîte et Safari dans une autre..

Vous devez cliquer sur Google Chrome et sur la boîte Mozilla Firefox. Nous allons vous montrer comment configurer Safari, plus loin dans cet article..

Cliquez sur le bouton suivant pour continuer.

Dans l'étape suivante, vous serez invité à entrer l'URL de votre site WordPress, la clé de l'API Google Server et l'URL de votre icône de notification par défaut..

Si votre site Web ne prend pas en charge SSL / HTTPS, cochez la case en regard de "Mon site n'est pas entièrement HTTPS" option. Vous pouvez également configurer SSL sur votre site Web si vous le souhaitez, mais ce n'est pas obligatoire..

Google Chrome ne prend pas en charge les notifications Web push pour les sites Web autres que SSL ou http. OneSignal résout ce problème en abonnant les utilisateurs à un sous-domaine sur leur propre domaine https..

Vérification "Mon site n'est pas entièrement HTTPS" option affichera les options de secours HTTP. Vous devrez choisir un sous-domaine pour votre application et entrer le numéro de projet Google ou l'ID de l'expéditeur que vous avez généré lors de la première étape..

Cliquez sur le bouton Enregistrer pour continuer. Vous pouvez maintenant quitter cette boîte de dialogue. Vous serez averti que votre configuration n'est pas encore terminée et peut être reprise plus tard. Cliquez sur Oui pour fermer la boîte de dialogue..

Étape 3: Obtention des clés OneSignal

Vous devez maintenant obtenir des clés OneSignal pour votre site Web. Dans le tableau de bord de votre application, cliquez sur Paramètres de l'application..

Cela vous mènera à la page des paramètres de votre application. Vous devez cliquer sur l'onglet Clés et identifiants..

Cela montrera votre identifiant OneSignal App et votre clé API Rest.

Vous devez les copier et les coller dans l'onglet de configuration du plugin OneSignal WordPress sur votre site..

Étape 4: Configuration des notifications Safari Web Push

N'oubliez pas que nous avons ignoré les paramètres de notification Push Web de Safari. Nous allons maintenant vous montrer comment configurer les notifications Web push de Safari..

Connectez-vous à votre compte OneSignal et accédez à la page Paramètres de votre application. Descendez sur les plates-formes Web et cliquez sur le bouton de configuration à côté de Apple Safari.

Cela fera apparaître une boîte de dialogue dans laquelle il vous sera demandé de saisir le nom de votre site et son URL..

Ensuite, vous devez cocher la case à côté de "J'aimerais télécharger mes propres icônes de notification" option.

Vous verrez maintenant une option pour télécharger différentes tailles d'icônes. Ce sont des images carrées, utilisez Photoshop ou n’importe quel programme d’édition d’images pour créer des icônes de la taille exacte..

Cliquez sur les boutons de choix de fichier pour télécharger toutes vos icônes..

Cliquez sur le bouton Enregistrer, puis fermez la boîte de dialogue..

Actualisez la page Paramètres de l'application et faites défiler jusqu'à la section Plateformes Web. Cette fois, vous verrez "Web ID" sous Apple Safari.

Vous devez copier cet ID Web et le coller dans l'onglet Configuration du plug-in OneSignal sur votre site..

C'est tout, vous avez correctement configuré les notifications Web push OneSignal pour votre site WordPress..

Étape 5: Test des notifications Web Push sur votre site WordPress

Par défaut, le plug-in OneSignal ajoutera une icône d'abonnement à votre site WordPress. Visitez votre site Web dans un navigateur pris en charge, puis cliquez sur le bouton S'abonner..

Vous verrez le message par défaut "Merci pour votre inscription".

Connectez-vous maintenant au compte OneSignal. Cliquez sur le nom de votre application, puis sur Paramètres de l'application..

Faites défiler jusqu'à la section des plates-formes Web et cliquez sur le bouton de configuration à côté de Google Chrome et Firefox.

Vous verrez l'écran de configuration de la plate-forme que vous avez rempli précédemment. Cliquez simplement sur le bouton Enregistrer, puis sur Continuer..

Vous serez invité à sélectionner le SDK cible. Vous devez sélectionner WordPress puis cliquer sur Suivant..

Comme vous n'avez qu'un seul abonné pour le moment, votre identifiant d'abonné sera automatiquement renseigné..

Cliquez sur le bouton suivant pour atteindre le "Paramètres de test" étape.

Cliquer sur 'Envoyer une notification de test' bouton.

One Signal va maintenant envoyer une notification Web push.

L’apparence des notifications peut varier selon le navigateur auquel vous vous êtes abonné. Lorsque la notification apparaît sur l'écran de votre ordinateur, vous devez cliquer dessus..

Vous verrez apparaître un écran de confirmation indiquant que vous avez correctement configuré les notifications Web Push OneSignal pour votre site Web..

Retournez à l'écran de configuration sur le site Web OneSignal et cliquez sur 'Vérifier l'état de la notification' bouton.

Vous verrez maintenant un autre message de succès indiquant que vous avez ajouté des notifications Web Push à votre site WordPress..

Comment envoyer des notifications Web Push dans WordPress avec OneSignal

Le plug-in de notifications push Web OneSignal sur votre site WordPress envoie automatiquement une notification à tous les abonnés lorsque vous publiez un nouveau message..

Vous pouvez également envoyer manuellement des notifications depuis votre tableau de bord OneSignal App. Connectez-vous à votre compte OneSignal et cliquez sur le nom de votre application..

Dans le menu de gauche, cliquez sur le bouton "Nouveau message"..

Cela vous amènera à l'écran du nouveau message. Vous pouvez entrer un titre et du contenu pour votre notification.

Vous pouvez également cliquer sur Options, Segment, Planifier / Envoyer plus tard pour personnaliser davantage votre notification push Web..

Par exemple, vous pouvez le lier à une page particulière de votre site, l'envoyer à un segment particulier de vos utilisateurs ou le programmer pour qu'il soit envoyé à une heure précise..

Nous espérons que cet article vous a aidé à ajouter une notification Web push à votre site WordPress. Vous voudrez peut-être aussi voir notre liste des meilleurs plugins d'adhésion pour WordPress.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.