Skip to main content

Les notifications

GLPI.png

Personnaliser

Pourquoi personnaliser les notifications mails

?

GLPI eut envoyerenvoie une quantité importante de mailmails aux utilisateurs, auxtechniciens techniciens,et valideurs etc

Il peut être intéressant(création de personnaliserticket, changement de statut, validation, etc.). Or, par défaut, ces notifications poursont sobres et peu engageantes : beaucoup d'utilisateurs ne les lisent simplement pas. On ne peut pas vraiment leur en vouloir.

L'objectif ici est de rendre ces notifications plus claires et plus attractives à la lecture, beaucouppour tropaméliorer d'utilisateursle netaux lesde lisconsultation toutet simplementla pas.compréhension côté utilisateur final.

On

Accéder neaux peutmodèles pasde leur en vouloir.notification

Commençons par se rendreRends-toi dans GLPI, dans Configuration > Notifications > Modèles de Notification :notification.

image.png

Créer un nouveau modèle

Ici, on va pouvoir cliquerClique sur "« + Ajouter"Ajouter » en haut :de la page

image.png

OnRenseigne définiles unchamps nom,suivants un:

type
    Nom du modèle Type (ici, Ticket),Ticket) unCommentaire commentaire(facultatif) auStyle besoin,CSS et même un style css(facultatif, si ontu veux harmoniser le souhaiterendu) :

    Une fois ces champs rempli, on valideValide avec "« + Ajouter"Ajouter avant». d'êtreTu es alors redirigé survers cettela page :de configuration du modèle.

    image.png

    Comprendre les onglets du modèle

    L'ongletUne fois sur cette page, quatre onglets sont disponibles :

      Onglet Rôle Traduction vaLes êtredifférentes l'ensembleversions des versionlinguistiques de la notification,notification. si on souhaite avoir plusieurs langue, l'L'utilisateur recevrareçoit la version danscorrespondant à la langue définidéfinie dans son profil si elle est disponible,existe, sinon la version par défautdéfaut. Notification, on leNotification verraLa plusou tard, c'est la/les notificationnotifications qui utilisent ce modèle (configuré plus tard). Historique contientLe l'historiquesuivi des modifications du modèle,modèle (qui àa modifiermodifié quoi, àet quelquand). moment Tous, rassembleTous tousRegroupe lesl'ensemble des onglets précédents sur une seule vue.

      CeluiC'est l'onglet Traduction du modèle qui nous intéresse ici,pour c'estla Traductionpersonnalisation. duRends-toi modèle, on s'y rend,dessus et onclique ajoutesur un« modèleAjouter :» pour créer une traduction.

      image.png

      Construire le contenu du mail

      Trois éléments sont à renseigner :

      Le sujet,sujet

      c'

      C'est évidemment ce qui servira d'l'objet du mail, sachant quemail. GLPI metsajoute parautomatiquement défautun enpréfixe débutdu d'objettype : [GLPI #<Ticket_ID>].

      Ensuite, on retrouve le

      Le corps du mail,mail d'abord(texte et HTML)

      Le corps existe en versiondeux texte,versions puis en version HTML.:

      La

      versionVersion texte,texte : peut seêtre générée d'elle même,automatiquement à partir de la version HTML.HTML Version HTML : c'est celle qu'on va personnaliser

      Les variables GLPI

      GLPI utilisemet à disposition ses propres variables (tags) à utiliserinsérer dans le modèle,modèle. parPar exemple, le titre du ticket se note ##ticket.title##.

      On peut s'en servir directement dans l'objet du ticket,mail, ouce sonqui titre c'est : ##ticket.title##.

      On pourrait alors l'utiliser dans l'objet, c'estbien plus parlant quequ'un l'simple ID du:

      ticket : 
      ##ticket.title##

      Ce qui pourraitdonnera donnerpar exemple : "[GLPI #0000018] Impossible de se connecter"connecter

      L'ensemble des variables GLPIdisponibles utilesest sontconsultable présentéesvia enle appuyantbouton sur« "Voir la liste des balises disponibles"disponibles » :

      image.png

      Maintenant

      Exemple queappliqué nous savons tout ce qu'il faut, ne reste plus qu'à créer son modèle.

      Pour: la notification "de création de ticket

      Voici le modèle que j'ai mis en place pour la notification « Création de ticket"ticket que», reçue par l'utilisateur vaen recevoirconfirmation pourde confirmation,l'ouverture j'aide choisisa cecidemande :

      image.png

      IlPour ne me reste alors qu'à cliquer surintégrer le mode "code source"HTML dedirectement, il faut basculer l'editeuréditeur WYSIWYG représentéen parmode "« code source » (icône <>"), etpuis y coller monle code HTMLsuivant :

      <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body style="margin:0;padding:20px;background:#f0f2f5;font-family:Arial,sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" style="max-width:640px;margin:0 auto;">

  <tr>
    <td style="background:#1a56a0;padding:22px 28px;border-radius:10px 10px 0 0;">
      <p style="margin:0;color:#ffffff;font-size:17px;font-weight:bold;">✅ Votre demande a bien été enregistrée</p>
      <p style="margin:5px 0 0;color:rgba(255,255,255,0.75);font-size:13px;">Ticket ##ticket.id## · Rakouns</p>
    </td>
  </tr>

  <tr>
    <td style="background:#ffffff;border:1px solid #e5e5e5;border-top:none;border-radius:0 0 10px 10px;padding:24px 28px;">

      <p style="margin:0 0 12px;font-size:13px;color:#888888;">Ouvert le ##ticket.creationdate## par <strong style="color:#555;">##ticket.openbyuser##</strong></p>

      <p style="margin:0 0 14px;font-size:22px;font-weight:bold;color:#111111;">##ticket.title##</p>

      <p style="margin:0 0 18px;">
        <span style="display:inline-block;font-size:12px;font-weight:bold;padding:4px 12px;border-radius:99px;background:#e6f1fb;color:#185fa5;">##ticket.status##</span>
        &nbsp;
        <span style="display:inline-block;font-size:12px;font-weight:bold;padding:4px 12px;border-radius:99px;background:#faeeda;color:#854f0b;">##ticket.priority##</span>
      </p>

      <table width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 18px;">
        <tr>
          <td width="50%" style="padding:0 6px 0 0;vertical-align:top;">
            <div style="background:#f7f7f7;border-radius:7px;padding:12px 14px;">
              <p style="margin:0 0 3px;font-size:12px;color:#888888;text-transform:uppercase;letter-spacing:0.05em;">Catégorie</p>
              <p style="margin:0;font-size:15px;font-weight:bold;color:#111111;">##ticket.category##</p>
            </div>
          </td>
          <td width="50%" style="padding:0 0 0 6px;vertical-align:top;">
            <div style="background:#f7f7f7;border-radius:7px;padding:12px 14px;">
              <p style="margin:0 0 3px;font-size:12px;color:#888888;text-transform:uppercase;letter-spacing:0.05em;">Technicien assigné</p>
              <p style="margin:0;font-size:15px;font-weight:bold;color:#111111;">##ticket.assigntousers##</p>
            </div>
          </td>
        </tr>
      </table>

      <hr style="border:none;border-top:1px solid #eeeeee;margin:0 0 18px;">

      <p style="margin:0 0 8px;font-size:12px;color:#888888;text-transform:uppercase;letter-spacing:0.05em;">Votre message</p>
      <div style="background:#f7f7f7;border-radius:7px;padding:12px 14px;font-size:15px;color:#333333;line-height:1.7;">##ticket.content##</div>

      <p style="margin:18px 0 0;font-size:14px;color:#555555;line-height:1.7;">Notre équipe informatique prend en charge votre demande. Vous serez notifié(e) par e-mail à chaque mise à jour.</p>

      <div style="text-align:center;margin:22px 0 0;">
        <a href="##ticket.url##" style="display:inline-block;background:#1a56a0;color:#ffffff;font-size:14px;font-weight:bold;padding:12px 28px;border-radius:7px;text-decoration:none;">Suivre mon ticket →</a>
      </div>

    </td>
  </tr>

  <tr>
    <td style="text-align:center;padding:14px 0 0;font-size:12px;color:#aaaaaa;">
      Rakouns · Ne pas répondre directement à cet e-mail
    </td>
  </tr>

</table>
</body>
</html>

      image.png

      Et auAu moment oude je cliquecliquer sur "« + Ajouter"Ajouter il», vaGLPI créergénère leautomatiquement la version texte du modèle Texte,à partir de luicette même.version HTML.

       

      Back to top