Personnaliser les modéles de mails automatique

Il vous est possible grâce a votre interface de design de personnaliser le modèle des mails automatiques (@noreply.iterop.com).

Les mails automatiques concernés par cette configuration sont :

• Les notifications de nouvelles tâches
• Les notifications des tâches externes
• La création d’un nouvel utilisateur
• La récupération d’un mot de passe oublié
• Les rapports de processus en erreur

Activer et personnaliser

Pour commencer, rendez vous dans l’interface de gestion et dans la partie Modèle de mail personnalisé :

• Cochez la case : Activer le template mail personnalisé 1️⃣
• Puis cliquez sur Éditer le template mail personnalisé 2️⃣

Il vous sera possible, dans la fenêtre popup qui vient de s’ouvrir de :

1. Remettre le template par défaut
2. Créer votre template mail (HTML)
3. Consulter les balises de personnalisation afin de récupérer des informations

Les balises de personnalisation

Pour vous aidez dans la personnalisation de vos mails, il vous est possible d’utiliser des balises qui serons remplacées automatiquement par l’application.

Voici les balises disponibles, et ce qu’elles contiennent :

• [#TITLE#] : Le titre du mail ( exemple : nom de la tache )
• [#LOGO#] : Le logo de votre instance

• [#BODY#] : Le corps du mail
• [#EMAIL#] : L’adresse email du destinataire
• [#ACTION_NAME#] : Le nom de l’action à effectuer
• [#URL#] : L’URL associée s’il y en a une
• [#ALTERNATIVE_TEXT_APPLICATION_URL#] : “ou cliquez sur ce lien pour y accéder : lien”
• [#SECOND_ACTION_NAME#] : L’action & l’URL secondaire
• [#SECOND_URL#] : L’URL secondaire
• [#SECOND_HTML_BLOC_ACTION#] : Template HTML action secondaire
• [#SECOND_HTML_BLOC_URL#] : Template HTML URL secondaire

HTML_SECONDARY_ACTION = 
"<p style=\"padding-top: 25px;\"><a style=\"background-color: #28a9e1; font-size: 17px; font-weight: bold; padding: 14px 20px 14px 20px; border-radius: 3px; text-align: center; color: #ffffff; text-decoration: none;\" href=\"[#SECOND_URL#]\" target=\"_blank\">[#SECOND_ACTION_NAME#]</a></p>";

HTML_SECONDARY_URL = 
"<p style=\"font-size: 13px; text-align: center; color: #c1c1c1; \"><a href=\"[#SECOND_URL#]\" target=\"_blank\" style=\"color: #c1c1c1;\">[#SECOND_URL#]</a></p>";

Aide a la creation

Voici quelques exemples de personnalisation :

Signature simple :

<p><span style="font-size:12px"><strong><span style="font-family:&quot;Verdana&quot;,sans-serif"><span style="color:#0DA4D8">L'équipe XXX</span></span></strong></span></p>
<p><span style="color:#D87F0D"><span style="font-family:Arial,Helvetica,sans-serif"><span style="font-size:14px"><strong>support@XXX.fr</strong></span></span></span></p>
<p><img alt="" src="https://Lien_De_Votre_Logo.png" style="height:75px; width:125px" /></p>

Mail simple signé :

<img src="https://Lien_De_Votre_Logo.png"/>
<p><span style="color:#000000"><span style="font-size:14px"><span style="font-family:Arial,Times"><strong>${titre_mail}</strong></span></span></span></p>
<p><span style="color:#000000"><span style="font-size:12px"><span style="font-family:Arial,Times">${start_infosATransmettre}</span></span></span></p>
<p>${url}</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table border="0" cellpadding="2" cellspacing="1" style="width:700px">
    <tbody>
    <tr>
        <td style="width:250px"><span  style="vertical-align:top"><span style="font-size:20px"><strong><span style="color:#328ABD">${identity.getFullName(start_nomDuSignataire)}</span></strong></span><br /><span style="color:#328ABD"></span></span></td>
       <!-- Pour ajouter des logo avec les liens de Réseaux sociaux -->
        <td><a href="https://www.MonSite.fr/"><img alt="" src="https://logo.png" style="height:22px; width:22px" /></a></td>
        <td><a href="https://www.MonLinkdin.fr"><img alt="" src="https://logo.png" /></a></td>
        <td><a href="https://MonTwitter.fr"><img alt="" src="https://logo.png" /></a></td>
        <td><a href="https://MonFacebook.fr"><img alt="" src="https://logo.png" /></a></td>
    </tr>
    </tbody>
</table>
<hr />

<p style="text-align:start"><span style="font-size:small"><span style="color:#222222"><span style="font-family:Arial,Helvetica,sans-serif"><span style="background-color:#ffffff"><span style="font-size:8pt"><span style="font-family:Candara,sans-serif"><span style="color:gray">Ce message et tous les fichiers qui lui sont attach&eacute;s peuvent contenir des informations confidentielles et sont &eacute;tablis &agrave; l&#39;intention exclusive de ses destinataires.<br />
Si vous recevez ce message par erreur, merci de le d&eacute;truire et d&#39;en avertir imm&eacute;diatement l&#39;exp&eacute;diteur par e-mail.<br />
Toute utilisation de ce message non conforme &agrave; sa destination, toute diffusion et ou toute publication, totale ou partielle, est strictement interdite.<br />
</span></span></span></span></span></span></span></p>

Template par défaut :

Afin de rendre la modification de votre mail automatique plus simple, il vous est possible de partir du template par défaut et de le personnaliser depuis un IDE (logiciel de développement) spécialisé. (VisualStudioCode, PhpStorm, Notepad++, …)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body style="margin:0; padding: 0; background-color: #f4f6f9;">
<table style="width: 100%; height: 100%; margin: 0 auto 0 auto; padding: 0; font-family: Arial, sans-serif; color: #747474;font-size: 16px;">
    <tr>
        <td>
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
                   style="margin-top: 4%; margin-bottom: 1%; max-width: 600px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
                <tr>
                    <td style="padding-left: 15px;"><img src="https://static.interopsys.fr/logos/top-logo.png"
                                                         width="auto" alt="Iterop logo" style="display: block;"></td>
                </tr>
            </table>
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#ffffff"
                   style="margin-bottom: 3%; max-width: 600px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-right-radius: 4px; border-top-left-radius: 4px; border: 1px solid #e4e4e4; border-top: 4px solid #28a9e1;padding: 0 30px;">
                <tr>
                    <td style="padding-top: 40px; padding-bottom: 40px; ">
                        <div style="text-align: center;margin: 0 auto 0 auto;">[#LOGO#]</div>
                    </td>
                </tr>
                <tr>
                    <td><p style="font-weight: bold; font-size: 20px; color: #28a9e1; margin-top: 0;">[#TITLE#]</p></td>
                </tr>
                <tr>
                    <td>
                        <div>[#BODY#]</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style=" margin: 40px auto; text-align: center;"><a
                                style="background-color: #28a9e1;font-size: 17px;font-weight: bold;padding: 14px 20px 14px 20px;border-radius: 3px;text-align: center;color: #ffffff;text-decoration: none;"
                                href="[#URL#]" target="_blank">[#ACTION_NAME#]</a>[#SECOND_HTML_BLOC_ACTION#]<p
                                style="font-size: 13px; text-align: center; padding-top: 10px; color: #c1c1c1; ">
                            [#ALTERNATIVE_TEXT_APPLICATION_URL#]<br/><a href="[#URL#]" target="_blank"
                                                                        style="color: #c1c1c1;">[#URL#]</a></p>
                            [#SECOND_HTML_BLOC_URL#]
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                </tr>
            </table>
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
                   style="margin-bottom: 1%; max-width: 600px;">
                <tr style="text-align: center; font-size: 12px; color: #acadae;">
                    <td><a href="https://www.iterop.com/" target="_blank"> <img
                            src="https://static.interopsys.fr/logos/bottom-logo.png" width="auto" alt="Iterop logo"
                            style="display: block;display: block;text-align: center;margin: 0 auto 5px auto;"></a><br/>
                        <a href="https://www.iterop.com/" target="_blank" style="color: #acadae;">www.iterop.com</a>
                        <p>Email automatique, merci de ne pas r&eacute;pondre. Email envoy&eacute; &agrave;
                            [#EMAIL#]</p></td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>