Skip to main content

Les notifications

GLPI.png

Personnaliser les notifications mails

GLPI eut envoyer une quantité importante de mail aux utilisateurs, aux techniciens, valideurs etc

Il peut être intéressant de personnaliser ces notifications pour les rendre plus attractives à la lecture, beaucoup trop d'utilisateurs ne les lis tout simplement pas.

On ne peut pas leur en vouloir.

Commençons par se rendre dans GLPI, dans Configuration > Notifications > Modèles de Notification :

image.png

Ici, on va pouvoir cliquer sur "+ Ajouter" en haut :

image.png

On défini un nom, un type (ici, Ticket), un commentaire au besoin, et même un style css si on le souhaite :

Une fois ces champs rempli, on valide avec "+ Ajouter" avant d'être redirigé sur cette page :

image.png

L'onglet :

  • Traduction va être l'ensemble des version de la notification, si on souhaite avoir plusieurs langue, l'utilisateur recevra la version dans la langue défini dans son profil si elle est disponible, sinon la version par défaut
  • Notification, on le verra plus tard, c'est la/les notification qui utilisent ce modèle
  • Historique contient l'historique du modèle, qui à modifier quoi, à quel moment
  • Tous, rassemble tous les précédents

Celui qui nous intéresse ici, c'est Traduction du modèle, on s'y rend, et on ajoute un modèle :

image.png

Le sujet, c'est évidemment ce qui servira d'objet du mail, sachant que GLPI mets par défaut en début d'objet : [GLPI #<Ticket_ID>]

Ensuite, on retrouve le corps du mail, d'abord en version texte, puis en version HTML.

La version texte, peut se générée d'elle même, à partir de la version HTML.

GLPI utilise ses propres variables à utiliser dans le modèle, par exemple, l'objet du ticket, ou son titre c'est : ##ticket.title##.

On pourrait alors l'utiliser dans l'objet, c'est plus parlant que l'ID du ticket : ##ticket.title##
Ce qui pourrait donner : "[GLPI #0000018] Impossible de se connecter"

L'ensemble des variables GLPI utiles sont présentées en appuyant sur "Voir la liste des balises disponibles" :

image.png

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

Pour la notification "Création de ticket" que l'utilisateur va recevoir pour confirmation, j'ai choisi ceci :

image.png

Il ne me reste alors qu'à cliquer sur le mode "code source" de l'editeur WYSIWYG représenté par "<>", et y coller mon code HTML :

<!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 au moment ou je clique sur "+ Ajouter" il va créer le modèle Texte, de lui même.

 

Back to top