Pour pouvoir envoyer des notifications Web Push depuis l'application Dialog Insight, il faut identifier et configurer le site web pour lequel vous voulez afficher des notifications. Vous pourrez par la suite créer des notifications Web Push.
Préalables
- Créer une autorisation Firebase Cloud Messaging
- Impliquer votre équipe TI
- Avoir l'URL de votre site Web (doit être en HTTPS)
Étape 1 : Ajouter le site Web
Rendez-vous d'abord dans Communications -> Notifications Push, puis cliquez sur Configurations en haut à droite sous les 3 points :
Cliquez sur Ajouter votre site Web :
Ajoutez l'URL de votre site Web et indiquez les langues offertes sur votre site Web :
*Ne pas mettre le HTTPS au début de l'URL.
**Il est important d'indiquer les langues dans lesquelles vous prévoyez envoyer des notifications pour qu'elles soient disponibles lors de la création des notifications.
Étape 2 : Configurer la présentation du Web Push
Dans la section Présentation, ajoutez l'icône de votre entreprise :
Étape 3 : Sélectionner une autorisation FCM
Comme indiqué au début de l'article, il faut au préalable créer une autorisation Firebase Cloud Messaging qui servira de messager entre DI et votre site Web.
Sélectionnez l'autorisation, ajoutez le JSON de votre Web app Firebase et indiquez le Sender ID :
Étape 4 : Intégrer les Web Push sur le site Web
Dans la section Code et fichier, copiez-collez le code (script) sur toutes les pages de votre site Web où vous désirez afficher la notification Push. Insérez le code à l'intérieur de la balise <head></head> ou juste avant la balise </body>. La version la plus à jour au moment de la mise à jour de cet article est 7.4.0. Cliquez sur le bouton Télécharger le fichier et copiez-le ce fichier à la racine (root) de votre site Web.
*Si votre site est en WordPress, installez ce plugin WordPress afin d'insérer le code sur vos pages.
Vous devez ajouter une demande d'autorisation (un popup qui s'affiche dans le navigateur pour demander au visiteur du site son autorisation à recevoir les notifications de ce site).
- Intégrez la demande d'autorisation à votre site sur un élément cliquable. Ceci peut être un bouton, un lien, une image, etc. Nous recommandons que ce soit le visiteur qui fait l'action de le demander et non automatiquement dès l'arrivée sur votre site.
- Ajoutez la fonction suivante :
DI.WebPush.RequestPermission("Code de langue");Code de langue doit être le code à deux caractères indiquant la langue de l'abonnement. Ce code est affiché à côté des langues configurées.
//Exemple au chargement de la page Web //Cet exemple n’est pas supporté par Firefox, vous pouvez utiliser un des deux exemples plus bas. <body onload="DI.WebPush.RequestPermission('fr');" //Exemple sur un lien texte <a href="#" onclick="DI.WebPush.RequestPermission('fr');"> Je désire recevoir les notifications. </a> //Exemple sur une image <img src="image.jpg" onclick="DI.WebPush.RequestPermission('fr');" alt="Je désire recevoir les notifications"/>
Fonction qui vous permet d'identifier les abonnés sur lesquels vous possédez déjà des informations. Par exemple, si votre site permet au visiteur de se connecter à celui-ci, vous avez donc quelques informations déjà comme le courriel, prénom, nom.
Il est également possible d'identifier les abonnés aux contacts de votre projet par l'envoi d'un courriel (via les règles d'injection) (voir Identifier les abonnés anonymes).
- Utilisez la bonne information afin d'appeler la fonction suivante :
DI.WebPush.Identify("f_CodeDuChamp", "Valeur"); - Remplacez f_CodeDuChamp par le code du champ clé unique.
- Remplacez Valeurpar la valeur à trouver dans la liste de contacts (votre projet).
//Exemple avec la clé unique sur le courriel DI.WebPush.Identify("f_EMail", "courriel@domaine.com"); //f_EMail est à titre indicatif seulement, vérifiez le bon code dans la configuration des champs de votre projet. //Exemple avec la clé unique sur le numéro de client DI.WebPush.Identify("f_NoClient", "123456789"); //f_NoClient est à titre indicatif seulement, vérifiez le bon code dans la configuration des champs de votre projet. //Exemple avec deux clés uniques DI.WebPush.Identify("f_EMail", "courriel@domaine.com", "f_NoClient", "123456789"); //f_EMail et f_NoClient est à titre indicatif seulement, vérifiez le bon code dans la configuration des champs de votre projet. - Consultez la page de résultats pour voir si le nombre de visiteurs connus a augmenté.
Fonction qui vérifie si le navigateur supporte les Web Push et qu'il est supporté par Dialog Insight.
if(DI.WebPush.isSupported()){
//La fonction retournera la valeur booléenne true si le navigateur les supporte et false s'il ne les supporte pas.
}Conseil : Faire afficher la demande d'abonnement sur votre site web seulement si le navigateur supporte les Web push.
Fonction qui vérifie si le visiteur a autorisé les Web Push dans son navigateur.
if(DI.WebPush.isSubscribed()){
//La fonction retournera la valeur booléenne true si le visiteur est abonné et false s'il n'est pas abonné.
}Conseil : Ne pas afficher la demande d’abonnement si le visiteur est déjà abonné.
Fonction qui vérifie si le visiteur a bloqué les Web Push sur le site.
if(DI.WebPush.isBlocked()){
//La fonction retournera la valeur booléenne true si le visiteur les a bloquées et false s'il les a autorisées.
}Conseil : Ne pas offrir les Web Push si le visiteur les a bloquées.
Étape 5 : Tester
Bien que cette étape ne soit pas obligatoire, elle est fortement conseillée, car elle vous permet de tester l'affichage des notifications Web Push dans votre site web mais sur une page autre que les vôtres. La page démo à télécharger vous permettra donc d'effectuer un test sans affecter votre site.
Voici quelques instructions pour se désabonner des notifications pour un site spécifique :
- Chrome : Activer ou désactiver les notifications
- Firefox : Les notifications Web Push dans Firefox
- Opera : Manage desktop notifications