Vous pouvez utiliser les fonctions JavaScript ci-dessous pour gérer efficacement l’affichage des options d’abonnement et de confirmation d’action (exemple : « Vous êtes abonné ! ») sur votre site web.

* Vous aurez besoin de la personne technique responsable de votre site pour réaliser certaines des étapes de cet article.

Pré-requis

Avoir accès au code de votre site.

Comment faire

Afficher la demande d'autorisation

Fonction qui vous permet de déclencher la demande d'autorisation du navigateur pour envoyer des notifications. Les visiteurs préalablement identifiés qui auront autorisé les notifications dans leur navigateur seront admissibles aux web push.

  1. Intégrez la demande d'abonnement à 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.
  2. 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 à la section Configuration (voir Configurer l'utilisation des notifications web push).

    Exemples
    //Exemple au chargement de la page Web : 
    <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" />

Identifier un contact

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).

  1. Utilisez la bonne information afin d'appeler la fonction suivante :
    DI.WebPush.Identify("f_CodeDuChamp", "Valeur");
  2. Remplacez f_CodeDuChamp par le code du champ clé unique. Vous pouvez trouver cette information à la page de configuration des champs de votre projet.
  3. Remplacez Valeur par la valeur à trouver dans la liste de contacts (votre projet).
    Exemples
    //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.
  4. Consultez la page Configuration > Notifications push pour voir si le nombre de visiteurs connus a augmenté.

Vérifier si le navigateur est supporté

Fonction qui vérifie si le navigateur supporte les web push et qu'il est supporté par Dialog Insight.

Il suffit d'ajouter :

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.

Vérifier si le visiteur a autorisé les notifications

Fonction qui vérifie si le visiteur a autorisé les web push dans son navigateur.

Il suffit d'ajouter :

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é.

Vérifier si le visiteur a bloqué les notifications

Fonction qui vérifie si le visiteur a bloqué les web push sur le site.

Il suffit d'ajouter :

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.