Guide de design des e-mails Zendesk

Mon édition

Suite

Toutes les éditions

Support

Toutes les éditions

Accès rapide : Centre d’administration > Canaux > Talk et e-mail > E-mail

Ce guide contient des recettes HTML pour personnaliser l’aspect des e-mails envoyés depuis votre compte. La personnalisation de l’aspect de vos e-mails peut vous aider à promouvoir une image de marque cohérente et à booster l’engagement des clients. Par exemple, vous pouvez ajouter le logo de votre entreprise ou une bannière d’appel à l’action à la disposition de votre e-mail afin qu’il reflète l’identité de votre marque ou l’aspect de votre centre d’aide.

L’aspect des notifications par e-mail envoyées depuis votre compte Zendesk dépend essentiellement de deux modèles du Centre d’administration, un modèle HTML et un modèle texte brut. Le modèle texte brut ne prend pas en charge le type de personnalisations abordé dans ce guide. Pour en savoir plus, consultez Personnalisation de vos modèles d-email pour les notifications.

Ce guide aborde les sujets suivants :

• Schémas de design courants pour les e-mails de notification
• Directives et meilleures pratiques HTML pour les e-mails
• Recette : ajout du logo de votre entreprise
• Recette : ajout d’une bannière d’entreprise
• Recette : ajout d’une bannière d’appel à l’action
• Recette : ajout d’un pied de page
• Recette : ajout de liens vers les réseaux sociaux dans le pied de page
• Recette : personnalisation du corps de l’e-mail
• Test de vos modifications

Ces recettes utilisent HTML et CSS pour personnaliser les notifications par e-mail. Pour une introduction et un guide de référence CSS, consultez CSS : Feuilles de style en cascade sur le réseau des développeurs Mozilla.

Remarque – Cet article est fourni à titre informatif uniquement. Zendesk ne fournit pas l’assistance pour HTML et CSS que présentent les recettes. Pour des réponses ou des solutions, faites des recherches sur le Web ou demandez à votre chatbot d’IA préféré.

Schémas de design courants pour les e-mails de notification

Apprenez à comprendre les schémas de design courants pour créer des dispositions d’e-mails cohérentes et efficaces qui reflètent votre marque.

La plupart des e-mails de notification ne contiennent que quelques composants.

• Logo : une image de logo.
• Bannière d’entreprise : une alternative à l’utilisation d’un logo seulement.
• Contenu : le corps de l’e-mail.
• Bannière d’appel à l’action : un appel à l’action pour rejoindre votre communauté, utiliser votre centre d’aide, essayer un nouveau produit, etc.
• Pied de page : il peut contenir diverses informations, notamment les coordonnées, des liens vers les réseaux sociaux, etc.

Dans le modèle d’e-mail, seul le contenu est obligatoire.

Les recettes de ce guide expliquent comment créer et insérer des éléments de design dans le modèle d’e-mail. Vous pouvez utiliser les éléments de votre choix à votre guise pour créer votre propre design. Voici quelques schémas de design courants.

Logo de l’entreprise	Logo de l’entreprise avec pied de page

Bannière de l’entreprise avec pied de page	Bannière de l’entreprise avec pied de page et bannière d’appel à l’action

Si vous avez besoin d’inspiration, consultez le blog Lotus Themes.

Directives et meilleures pratiques HTML pour les e-mails

Le design de l’aspect des e-mails n’est pas toujours simple, car le rendu des éléments HTML et CSS peut être différent selon les applications de messagerie. Certains types de formatage peuvent même être interprétés comme du spam.

Quand vous travaillez sur le design de vos e-mails, suivez ces directives générales :

• Restez simple : évitez les dispositions complexes et privilégiez un design simple.
• Utilisez des tableaux : certaines applications de messagerie ne rendent pas les dispositions basées sur CSS de façon fiable. Utilisez plutôt des tableaux HTML pour créer vos dispositions.
• Utilisez des styles CSS intégrés : utilisez des styles intégrés, qui sont des styles définis dans l’attribut style d’un élément HTML, par exemple : <p style="width=400px;">. Il est possible que certaines applications de messagerie ne prennent pas en charge les feuilles de style importées ou les styles définis dans une balise <style>.
• Utilisez des polices Web sûres : utilisez des polices Web sûres comme Arial, Verdana ou Georgia. Les polices personnalisées peuvent ne pas être prises en charge ou rendues correctement dans certaines applications de messagerie.
• Minimisez le formatage du texte : si vous minimisez le formatage du texte, votre disposition reste propre et claire. En outre, s’il y a trop de texte en gras, l’e-mail peut être détecté comme spam.

Suivez ces directives pour les images :

• Utilisez les images avec parcimonie : si vous utilisez peu d’images, votre disposition reste propre et claire. En outre, s’il y a trop d’images, l’e-mail peut être détecté comme spam.
• Définissez la taille des images avec CSS : utilisez les styles intégrés pour définir la taille des images dans votre disposition. Les images dont la taille n’est pas définie altèrent souvent la disposition des e-mails. Pour une plus grande tranquillité d’esprit, redimensionnez physiquement les images à l’aide du rééchantillonnage.
• Utilisez des balises ALT pour toutes les images : les balises ALT permettent aux utilisateurs de voir une description des images avant leur affichage dans l’e-mail.
• Ne créez pas de liens vers des images dans un compte Zendesk fermé : si le destinataire n’est pas un utilisateur inscrit et connecté, les images ne fonctionneront pas.

Recette : ajout du logo de votre entreprise

Cette recette vous explique comment ajouter le logo de votre entreprise au modèle d’e-mail. Exemple :

Ingrédients

• URL de l’image du logo de votre entreprise

Recette

1. Collez le bloc de code suivant dans un éditeur HTML ou texte :

   <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
    <tbody>
       <tr>
        <td align="center" style="padding-top: 0px; padding-bottom: 0px;">
           <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto;">
         </td>
       </tr>
     </tbody>
   </table>

2. Apportez les modifications ci-dessous pour personnaliser le logo.

   Modification
   Image du logo	Élément : img > src Remplacez la valeur de la variable de l’attribut src par l’URL de l’image de votre logo. Exemple : img src="https://www.example.com/images/logo_acme.png"
   Taille du logo	Élément : img > style > width Modifiez la valeur width pour redimensionner votre logo. Exemple : img style="width: 120px; height: auto; ..."
   Espace autour du logo	S’il y a trop d’espace autour de votre logo, vous devrez peut-être rogner l’espace blanc autour de l’image avec un outil de modification d’image. S’il n’y a pas assez d’espace autour de l’image, vous pouvez accroître le remplissage de la cellule du tableau. Élément : td > style Ajoutez padding à l’attribut style et ajustez sa valeur. Exemple : td style="padding: 10px; ..."
   Alignement horizontal du logo	Élément : td > align Choisissez centre, gauche ou droite. Exemple : td align="left"
   Alignement vertical du logo	Élément : td > style > padding-top Modifiez la valeur padding-top pour ajouter de l’espace au-dessus du logo. Élément : td > style > padding-top Modifiez la valeur padding-bottom pour ajouter de l’espace sous le logo. Exemple : td style="padding-top: 15px; padding-bottom: 5px; ..."

3. Ajustez les autres valeurs en fonction de vos besoins.
4. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
5. Consultez l’aperçu du logo dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
6. Quand vous êtes prêt, insérez le bloc de code du logo à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Recette : ajout d’une bannière d’entreprise

Cette recette vous explique comment ajouter une bannière d’entreprise au modèle d’e-mail. Une bannière d’entreprise se compose généralement du logo et du nom de l’entreprise sur un arrière-plan de couleur. Exemple :

Ingrédients

• URL de l’image du logo de votre entreprise
• Valeurs des couleurs de l’identité de votre marque

Recette

1. Collez le bloc de code suivant dans un éditeur HTML ou texte :

   <table style="background-color: #c0c7d8;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px;">
           <img src="company_logo.png" alt="company logo" style="width: 100px; height: auto; margin-right: 10px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 24px; font-weight: bold; color: #333; margin-top: 50px;">Company name</p>
         </td>
       </tr>
     </tbody>
   </table>

2. Apportez les modifications ci-dessous pour personnaliser la bannière de l’entreprise.

   Modification
   Image du logo	Élément : img > src Remplacez la valeur de la variable de l’attribut src par l’URL de l’image de votre logo. Exemple : img src="https://www.example.com/images/logo_acme.png"
   Taille du logo	Élément : img > style > width Modifiez la valeur width pour redimensionner votre logo. Exemple : img style="width: 120px; height: auto; ..."
   Espace autour du logo	S’il y a trop d’espace autour de votre logo, vous devrez peut-être rogner l’espace blanc autour de l’image avec un outil de modification d’image. S’il n’y a pas assez d’espace autour de l’image, vous pouvez accroître le remplissage de la cellule du tableau. Élément : td > style Ajoutez padding à l’attribut style et ajustez sa valeur. Exemple : td style="padding: 10px; ..."
   Format du nom de l’entreprise	Élément : p > style Modifiez un ou plusieurs styles de texte, ou ajoutez le vôtre. Exemple : p style="font-size: 30px; color: #553e3e; ..."
   Espace entre le logo et le nom de l’entreprise	Élément : img > style > margin-right Augmentez ou réduisez la valeur margin-right pour accroître ou réduire l’espace entre le logo et le nom. Exemple : img style="margin-right: 15px; ..."
   Alignement vertical du nom de l’entreprise par rapport au logo	Élément : p > style > margin-top Augmentez ou réduisez la valeur margin-top pour déplacer le nom de l’entreprise vers le haut ou le bas par rapport au logo. Exemple : p style="margin-top: 40px; ..."
   Couleur d’arrière-plan de la bannière	Élément : table > style > background-color Remplacez la valeur hexadécimale de #d3d3d3 du style background-color par votre propre valeur. Consultez les directives pour l’image de votre marque ou un sélecteur de couleur en ligne comme html-color.codes. Exemple : table style="background-color: #d8e3fb; ..."

3. Ajustez les autres valeurs en fonction de vos besoins.
4. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
5. Consultez l’aperçu de la bannière dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
6. Quand vous êtes prêt, collez le bloc de code de la bannière à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Recette : ajout d’une bannière d’appel à l’action

Cette recette vous explique comment ajouter une bannière d’appel à l’action au modèle d’e-mail. Une bannière d’appel à l’action se trouve généralement après le corps de l’e-mail. Elle invite généralement l’utilisateur à faire quelque chose : rejoindre votre communauté, utiliser votre centre d’aide, essayer un nouveau produit, etc. Elle se compose d’un graphique, d’un texte et d’un lien sur un arrière-plan de couleur. Exemple :

Ingrédients

• Texte de votre appel à l’action
• URL d’une image d’appel à l’action
• URL d’un lien pour aider les utilisateurs à accomplir à l’action
• Valeurs des couleurs de l’identité de votre marque

Recette

1. Collez le bloc de code suivant dans un éditeur HTML ou texte :

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
   <tbody>
     <tr>
       <td align="left" style="display: flex; padding-top: 0px; padding-bottom: 0px; padding-left: 50px; margin-top: 12px; margin-bottom: 8px;">
   
         <div id="cta-text" style="width: 300px;">
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #333; margin-top: 6px;">Take a hand, lend a hand</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 14px;">Join our worldwide community to ask expert users for advice or share your own.</p>
           <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px;"><a href="#">Ask the community</a></p>
         </div>
   
         <div id="cta-image" style="padding-left: 20px;">
           <img src="cta_image.png" alt="cta_image" style="width: 140px; height: auto; border-radius: 50% 50% 0 0;">
         </div>
   
       </td>
     </tr>
   </tbody>
   </table>

2. Ajoutez votre appel à l’action dans les balises des trois paragraphes. Ajoutez ou supprimez des paragraphes en fonction de vos besoins.
3. Apportez les modifications ci-dessous pour personnaliser la bannière d’appel à l’action.

   Modification
   Image d’appel à l’action	Élément : img > src Remplacez la valeur de la variable de l’attribut src par l’URL de l’image de votre appel à l’action. Exemple : img src="https://www.example.com/images/cta_image.png"
   Taille de l’image	Élément : img > style > width Modifiez la valeur width pour redimensionner votre image. Exemple : img style="width: 120px; height: auto; ..."
   Format des messages d’appel à l’action	Élément : p > style Modifiez un ou plusieurs styles de texte, ou ajoutez le vôtre. Exemple : p style="font-size: 30px; color: #553e3e; ..."
   Espace entre les messages et l’image	Élément : div id="cta-image" > style > padding-left Augmentez ou réduisez la valeur padding-left pour accroître ou réduire l’espace entre les messages et l’image. Exemple : div id="cta-image" style="padding-left: 30px; ..."
   Couleur d’arrière-plan de la bannière	Élément : table > style > background-color Remplacez la valeur hexadécimale de #d8e3fb du style background-color par votre propre valeur. Consultez les directives pour l’image de votre marque ou un sélecteur de couleur en ligne comme html-color.codes. Exemple : table style="background-color: #d3d3d3; ..."

4. Ajustez les autres valeurs en fonction de vos besoins.
5. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
6. Consultez l’aperçu de la bannière dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
7. Quand vous êtes prêt, collez le bloc de code de la bannière à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Recette : ajout d’un pied de page

Cette recette vous explique comment ajouter un pied de page au modèle d’e-mail. il peut contenir diverses informations, notamment les coordonnées, des liens vers les réseaux sociaux, etc. Pour les liens vers les réseaux sociaux, consultez la recette suivante, Recette : ajout de liens vers les réseaux sociaux dans le pied de page.

Le modèle d’e-mail standard fournit déjà les variables suivantes pour un pied de page :

• {{footer}} : affiche ce qui suit : « Cet e-mail est un service d’Acme.», où « Acme » est le nom de votre entreprise.
• {{footer_link}} : affiche ce qui suit dans l’e-mail : « Envoyé par Zendesk. », avec un lien sur « Zendesk » qui renvoie à zendesk.com.

Vous pouvez remplacer ces variables ou les compléter avec votre propre pied de page.

Dans cette recette, nous allons créer un pied de page qui fournit des coordonnées. Cela remplacera les variables {{footer}} et {{footer_link}}. Exemple :

Ingrédients

• Les coordonnées de votre entreprise
• Valeurs des couleurs de l’identité de votre marque

Recette

1. Collez le bloc de code suivant dans un éditeur HTML ou texte :

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

2. Changez les coordonnées dans les balises des trois paragraphes.
3. Apportez les modifications ci-dessous pour personnaliser le pied de page.

   Modification
   Couleur d’arrière-plan du pied de page	Élément : table > style > background-color Remplacez la valeur hexadécimale de #d8e3fb du style background-color par votre propre valeur. Consultez les directives pour l’image de votre marque ou un sélecteur de couleur en ligne comme html-color.codes. Exemple : table style="background-color: #d3d3d3; ..."
   Couleur du texte	Élément : p > style > color Modifiez la valeur color. Exemple : p style="color: #553e3e; ..."
   Formatage de texte	Élément : p > style Modifiez un ou plusieurs styles de texte, ou ajoutez le vôtre. Exemple : p style="font-family: Georgia, sans-serif; ..."
   Espace entre les bords supérieur et inférieur	Élément : td > style > padding-top Augmentez ou réduisez la valeur padding-top pour accroître ou réduire l’espace entre le bord supérieur et le texte. Exemple : td style="padding-top: 8px; ..." Élément : td > style > padding-bottom Augmentez ou réduisez la valeur padding-bottom pour accroître ou réduire l’espace entre le texte et le bord inférieur. Exemple : td style="padding-bottom: 8px; ..."

4. Ajustez les autres valeurs en fonction de vos besoins.
5. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
6. Consultez l’aperçu du pied de page dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
7. Quand vous êtes prêt, collez le bloc de code à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Recette : ajout de liens vers les réseaux sociaux dans le pied de page

Cette recette vous explique comment ajouter des liens vers les réseaux sociaux à un pied de page personnalisé.

Remarque – Si vous avez ajouté des canaux de réseaux sociaux à votre compte Zendesk, vous pouvez faire en sorte que la variable {{footer}} affiche des boutons vers ces canaux. Consultez Ajout de boutons de réseaux sociaux à vos e-mails.

Exemple :

Ingrédients

• URL vers les images des réseaux sociaux à utiliser comme boutons
• Liens vers vos comptes de réseaux sociaux

Recette

1. Collez le bloc de code suivant dans un éditeur HTML ou texte :

   <table style="background-color: #d8e3fb; margin-top: 12px;" width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
     <tbody>
       <tr>
         <td align="center" style="padding-top: 4px; padding-bottom: 8px; margin-top: 12px; margin-bottom: 8px;">
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 12px; font-weight: bold; color: #333;">support.eatwell.com</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">181 Fremont Street, San Francisco, CA 94105</p>
             <p style="font-family: Verdana, Arial, sans-serif; font-size: 9px;">Copyright 2024 Eatwell Inc All Rights Reserved</p>    
         </td>
       </tr>
     </tbody>
   </table>

   C’est la recette pour créer un pied de page avec des coordonnées (Recette : ajout d’un pied de page).

2. Ajoutez vos icônes de réseaux sociaux au code HTML avant la balise du premier paragraphe. Exemple :

   <div style="padding-top: 12px; padding-bottom: 0px;">
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_facebook.png"/></a>
     <a href="#"><img style="width: 30px; padding-right: 10px;" src="https://www.example.com/images/icon_x.png"/></a>
     <a href="#"><img style="width: 30px;" src="https://www.example.com/images/icon_instagram.png"/></a>  
   </div>

3. Pour chaque lien vers les réseaux sociaux, modifiez l’URL du lien (href="...") et l’image de l’icône (src="...") pour chaque lien.
4. Apportez les modifications ci-dessous pour personnaliser les icônes.

   Modification
   Taille des icônes	Élément : img > style > width Assurez-vous que toutes les icônes ont la même valeur de largeur (width). Exemple : img style="width: 24px; ..."
   Espacement entre les icônes	Élément : img > style > padding-right Modifiez la valeur du style padding-right pour tous les liens vers les réseaux sociaux, sauf le dernier. Exemple : img style="padding-right: 8px; ..."
   Espace au-dessus et en-dessous des icônes	Élément : div > style > padding-top Augmentez ou réduisez la valeur padding-top pour ajuster l’espace au-dessus des icônes. Exemple : div style="padding-top: 8px; ..." Élément : div > style > padding-bottom Augmentez ou réduisez la valeur padding-bottom pour ajuster l’espace sous les icônes. Exemple : div style="padding-bottom: 10px; ..."

5. Ajustez les autres valeurs en fonction de vos besoins.
6. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
7. Consultez l’aperçu du pied de page dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
8. Quand vous êtes prêt, collez le bloc de code à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Recette : personnalisation du corps de l’e-mail

Cette recette vous explique comment personnaliser le corps de l’e-mail. Vous allez changer la police et la taille du texte, ainsi que l’espace autour du corps de l’e-mail.

L’e-mail se compose du message de notification et de la conversation par e-mail. Dans le modèle d’e-mail, le corps de l’e-mail est représenté par la variable {{content}}. Zendesk remplace la variable avec les éléments HTML avant d’envoyer l’e-mail. Exemple :

Certains des éléments HTML insérés par Zendesk contiennent des styles qui ne peuvent pas être modifiés ou remplacés. Pour en savoir plus, consultez Personnalisation du corps des e-mails - Limites.

Recette

1. Collez la variable {{content}} et sa balise parente div dans un éditeur HTML ou texte. Exemple :

   <div style="padding: 10px; line-height: 1.5; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;">
     {{content}}
   </div>

2. Apportez les modifications suivantes aux styles de la balise parente div pour personnaliser le corps de l’e-mail.

   Modification
   Taille du texte du message	Élément : div > style > font-size Modifiez la valeur font-size. Notez que cette modification ne modifiera pas la taille du texte du nom d’utilisateur ou de l’heure d’envoi de l’e-mail. Exemple : div style="font-size: 11px; ..."
   Police du texte	Élément : div > style > font-family Vous pouvez changer les polices dans certaines limites. Utilisez des polices Web sûres comme Trebuchet MS, Verdana ou Georgia. Les autres polices risquent de ne pas être prises en charge par toutes les applications de messagerie. Exemple : div style="font-family: 'Trebuchet MS', sans-serif; ..."
   Espace autour du corps de l’e-mail	Élément : div > style > padding Augmentez ou réduisez la valeur padding pour accroître ou réduire l’espace autour du corps de l’e-mail. Exemple : div style="padding: 15px; ..." Si vous voulez changer l’espace sur la gauche et sur la droite (p. ex, 25 pixels), spécifiez deux valeurs pour le style padding. La première valeur est le remplissage pour le haut et le bas, et la deuxième le remplissage pour la gauche et la droite. Exemple : div style="padding: 15px 25px; ..."

3. Ajoutez d’autres styles intégrés ou ajustez d’autres valeurs en fonction de vos besoins.

   Notez que certaines propriétés du corps de l’e-mail ne peuvent pas être modifiées. Consultez Personnalisation du corps des e-mails - Limites.

4. Enregistrez le fichier avec l’extension .html et consultez fréquemment l’aperçu de vos modifications.
5. Consultez l’aperçu des modifications dans un modèle d’e-mail test avant de l’ajouter au modèle d’e-mail de votre compte.
6. Quand vous êtes prêt, collez le bloc de code à l’emplacement suivant dans le modèle d’e-mail HTML du Centre d’administration (Centre d’administration > Canaux > E-mail).

   

Personnalisation du corps des e-mails - Limites

Zendesk remplace la variable {{content}} avec ses propres éléments HTML avant d’envoyer l’e-mail. Cependant, le code HTML généré par le système contient des styles intégrés pour certains éléments du corps de l’e-mail. Hélas, vous ne pouvez pas accéder à ces styles pour les modifier. Vous ne pouvez pas non plus les remplacer en utilisant les styles intégrés du modèle d’e-mail. Dans CSS, les styles intégrés des éléments enfants ont précédence sur les styles intégrés des éléments parents, comme les éléments div.

Cette section présente certaines des limites de la personnalisation du corps de l’e-mail. N’oubliez pas d’en tenir compte quand vous prendrez vos décisions de design pour le reste du corps de l’e-mail.

Texte du corps

Vous ne pouvez pas changer les styles suivants pour le texte du corps :

• Couleur de la police
• Hauteur des lignes
• Marges autour du texte

Les paramètres pour ces styles sont les suivants :

color: #2b2e2f; line-height: 22px; margin: 15px 0

Texte du nom et de la date d’envoi

Vous ne pouvez pas changer les styles suivants pour le texte du nom et de la date d’envoi :

• Couleur de la police
• Famille de police
• Taille de la police
• Hauteur des lignes
• Marges autour du texte

Les paramètres pour le texte du nom sont les suivants :

color: #1b1d1e"; font-family: Verdana, Tahoma, sans-serif; font-size: 15px;
line-height: 18px; margin-bottom: 0; margin-top: 0;padding: 0; color: #1b1d1e"

Les paramètres pour le texte de la date d’envoi sont les suivants :

font-family: Verdana, Tahoma, sans-serif; font-size: 13px; line-height: 25px; 
margin-bottom: 15px; margin-top: 0; padding: 0; color: #bbbbbb"

Test de vos modifications

Vous pouvez tester les modifications avec le modèle d’e-mail test joint à cette recette.

Les modifications apportées au modèle d’e-mail dans le Centre d’administration sont immédiatement publiées. Il est donc vivement conseillé de tester vos modifications dans le modèle test de façon approfondie pour vérifier qu’elles fonctionnent correctement avant de les ajouter au modèle d’e-mail de votre compte.

Pour tester vos modifications

1. Téléchargez le modèle d’e-mail test, test_email_template.html joint ci-dessous et ouvrez-le dans un éditeur HTML ou texte.
2. Collez le bloc de code pour votre composant à l’emplacement indiqué dans le modèle d’e-mail test. Exemple :

   <!-- Paste logo or company banner code block here -->

3. Ouvrez le modèle test dans un navigateur et rétrécissez la fenêtre de navigateur pour émuler une application de messagerie.
4. Modifiez le code dans le modèle test, puis actualisez la page de navigateur pour voir comment se présentent vos modifications.
5. Continuez à apporter des modifications itératives jusqu’à ce que vous soyez satisfait du design.
6. Quand vous êtes prêt, collez le bloc de code pour votre composant au même emplacement dans le modèle d’e-mail du Centre d’administration (Centre d’administration > Canaux > E-mail).