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
Ajout du script au 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.
Intégration d'une demande d'autorisation
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.
Exemples//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" />
É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