Skip to main content

Les notifications

GLPI.png

Pourquoi personnaliser les notifications ?

GLPI envoie une quantité importante de mails aux utilisateurs, techniciens et valideurs (création de ticket, changement de statut, validation, etc.). Or, par défaut, ces notifications sont 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, pour améliorer le taux de consultation et la compréhension côté utilisateur final.

Accéder aux modèles de notification

Rends-toi dans GLPI, dans Configuration > Notifications > Modèles de notification.

image.png

Créer un nouveau modèle

Clique sur « + Ajouter » en haut de la page

image.png

Renseigne les champs suivants :

  • Nom du modèle
  • Type (ici, Ticket)
  • Commentaire (facultatif)
  • Style CSS (facultatif, si tu veux harmoniser le rendu)

Valide avec « + Ajouter ». Tu es alors redirigé vers la page de configuration du modèle.

image.png

Comprendre les onglets du modèle

Une fois sur cette page, quatre onglets sont disponibles :

Onglet Rôle
Traduction Les différentes versions linguistiques de la notification. L'utilisateur reçoit la version correspondant à la langue définie dans son profil si elle existe, sinon la version par défaut.
Notification La ou les notifications qui utilisent ce modèle (configuré plus tard).
Historique Le suivi des modifications du modèle (qui a modifié quoi, et quand).
Tous Regroupe l'ensemble des onglets précédents sur une seule vue.

C'est l'onglet Traduction du modèle qui nous intéresse pour la personnalisation. Rends-toi dessus et clique sur « Ajouter » pour créer une traduction.

image.png

Construire le contenu du mail

Trois éléments sont à renseigner :

Le sujet

C'est l'objet du mail. GLPI ajoute automatiquement un préfixe du type [GLPI #<Ticket_ID>].

Le corps du mail (texte et HTML)

Le corps existe en deux versions :

  • Version texte : peut être générée automatiquement à partir de la version HTML
  • Version HTML : c'est celle qu'on va personnaliser

Les variables GLPI

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

On peut s'en servir directement dans l'objet du mail, ce qui est bien plus parlant qu'un simple ID :

##ticket.title##

Ce qui donnera par exemple : [GLPI #0000018] Impossible de se connecter

L'ensemble des variables disponibles est consultable via le bouton « Voir la liste des balises disponibles » :

image.png

Exemple appliqué : la notification de création de ticket

Voici le modèle que j'ai mis en place pour la notification « Création de ticket », reçue par l'utilisateur en confirmation de l'ouverture de sa demande :

image.png

Pour intégrer le code HTML directement, il faut basculer l'éditeur WYSIWYG en mode « code source » (icône <>), puis y coller le code suivant :

<!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

Au moment de cliquer sur « + Ajouter », GLPI génère automatiquement la version texte du modèle à partir de cette version HTML.

No comments to display

Back to top