Mon édition
Suite Toutes les éditions
Support Toutes les éditions
Accès rapide : Centre d’administration > Canaux > Talk et e-mail > E-mail

Votre compte envoie régulièrement des notifications par e-mail aux utilisateurs finaux quand des événements (mises à jour des tickets ou du centre d’aide, par exemple) ont lieu. Le contenu et le format de quasiment tous ces e-mails sont contrôlés par deux modèles dans le Centre d’administration : un modèle HTML et un modèle texte brut. Les deux formats sont inclus dans chaque e-mail envoyé. La version affichée aux utilisateurs finaux dépend des paramètres de leur application de messagerie.

Vous pouvez utiliser les deux modèles tels quels ou les modifier en fonction de vos besoins spécifiques. Contrairement au modèle texte brut, le modèle HTML vous permet de personnaliser l’aspect des e-mails envoyés depuis votre compte. Par exemple, vous pouvez ajouter le logo de votre entreprise ou une bannière d’appel à l’action afin que vos e-mails reflètent l’identité de votre marque ou l’aspect de votre centre d’aide.

Cet article aborde les sujets suivants :
  • Limites
  • Anatomie des modèles d’e-mail
  • Personnalisation de vos e-mails HTML
  • Personnalisation de vos e-mails en texte brut
  • Personnalisation de vos e-mails dans les déclencheurs et les automatismes
  • Personnalisation de vos e-mails pour plusieurs marques
  • Balises pour le modèle d’e-mail HTML - Référence

Limites

  • La modification des modèles d’e-mail n’est pas autorisée par défaut pour les comptes d’essai. Il est aussi possible qu’elle ne soit pas autorisée pour tous les comptes. Pour activer la modification, contactez l’assistance client Zendesk en spécifiant votre sous-domaine, un lien vers le site Web de votre entreprise et une courte description des modifications que vous voulez effectuer.
  • Les notifications pour les conversations annexes via e-mail n’utilisent pas les modèles d’e-mail.

Anatomie des modèles d’e-mail

Il est utile de comprendre l’anatomie des modèles HTML et texte brut pour les personnaliser.

Anatomie du modèle HTML

L’e-mail de notification HTML standard envoyé depuis votre compte Zendesk ressemble à ce qui suit :

Les numéros sur le côté de la capture d’écran correspondent aux composants des modèles d’e-mail suivants :

Corps de l’e-mail

Le corps de l’e-mail est représenté par la balise {{content}} dans le modèle d’e-mail HTML du Centre d’administration (cadre rouge) :

Avant d’envoyer l’e-mail, le système remplace la balise {{content}} dans le modèle par des éléments HTML supplémentaires pour afficher le corps de l’e-mail.

Le corps de l’e-mail lui-même est défini dans un déclencheur. Dans l’action de déclencheur suivante, le corps de l’e-mail est mis en surbrillance rouge :

Dans cet exemple, le corps de l’e-mail est composé de deux éléments :

  • Un message de notification : « Votre demande ({{ticket.id}}) a été mise à jour. Pour ajouter des commentaires supplémentaires, répondez à cet e-mail. »
  • Les commentaires du ticket représentés par la balise {{ticket.comments_formatted}}

Consultez Personnalisation de vos e-mails dans les déclencheurs et les automatismes.

Pied de page standard

Le pied de page standard se compose des deux balises suivantes :

  • {{footer}} : rend « Cet e-mail est un service de MondoCam. »
  • {{footer_link}} : rend : « En partenariat avec Zendesk »

Ces deux balises sont facultatives. Vous pouvez les supprimer du modèle.

Anatomie du modèle texte brut

Le modèle d’e-mail au format texte brut est utilisé lorsque l’utilisateur choisit de ne pas lire ses messages au format HTML. Le modèle se compose de deux balises système : 

{{content}}

{{footer}}

La balise {{content}} insère le texte généré par les règles de gestion (déclencheurs, automatismes ou macros) et les commentaires du ticket. La balise {{footer}} est facultative. Vous pouvez la supprimer si vous le souhaitez. Pour en savoir plus, consultez Balises système.

Si vous souhaitez ajouter une ligne à vos e-mails en texte brut, ajoutez-la dans le modèle. 

Thanks for contacting Mondocam Support!

{{content}}

{{footer}}

Personnalisation de vos e-mails HTML

Vous pouvez personnaliser l’aspect des notifications par e-mail HTML envoyées à vos clients. Cette section aborde les sujets suivants :

  • Modification du modèle d’e-mail HTML
  • Exemple : modification de la couleur du texte du pied de page
  • Exemple : ajout de votre logo

Si vous avez besoin de directives ou de recettes, consultez le Guide de design des e-mails Zendesk.

Modification du modèle d’e-mail HTML

Vous pouvez modifier l’aspect des e-mails HTML en modifiant le modèle d’e-mail HTML du Centre d’administration. Pour modifier le modèle HTML, vous devez un certain niveau de connaissances HTML et CSS. Si vous avez besoin de recettes, consultez le Guide de design des e-mails Zendesk. Si vous avez besoin de directives et conseils de design, consultez Directives et conseils pour les e-mails HTML.

Les modifications sont appliquées à vos e-mails sortants dès leur enregistrement. Il est donc conseillé de vérifier et tester vos modifications avant de les appliquer au modèle. Avec l’édition Entreprise, vous pouvez aussi tester les modifications apportées aux e-mails dans une sandbox avant de les déployer publiquement.

Pour modifier le modèle HTML

  1. Dans le Centre d’administration, cliquez sur Canaux dans la barre latérale, puis sélectionnez Talk et e-mail > E-mail.

    Si vous utilisez l’édition Enterprise, continuez en cliquant sur Gérez les paramètres > Modèles.

  2. Faites défiler la page jusqu’à la case Modèle HTML.
  3. Modifiez le code HTML du modèle en fonction de vos besoins.

    Consultez le Guide de design des e-mails Zendesk.

  4. Si vous souhaitez repartir à zéro avec la version par défaut, cliquez sur Rétablir la valeur par défaut sous le modèle.
  5. Dans la section Modèles d’e-mail, cliquez sur Afficher les photos de profil utilisateur dans les e-mails pour afficher les photos des profils d’utilisateur dans les e-mails.

    Quand cette option est sélectionnée, les photos des profils s’affichent dans les e-mails quand le client de messagerie prend cette fonctionnalité en charge. Certains clients de messagerie n’affichent pas les images par défaut.

  6. Cliquez sur Enregistrer.

Exemple : modification de la couleur du texte du pied de page

Cet exemple montre comment changer la couleur de la police du pied de page afin d’utiliser le bleu sarcelle, dont le code hexadécimal est #009966. Pour aller plus loin, consultez les recettes suivantes pour les pieds de page dans le Guide de design des e-mails Zendesk :

  • Recette : ajout d’un pied de page
  • Recette : ajout de liens vers les réseaux sociaux dans le pied de page

Supposez que le pied de page de votre modèle se compose des balises {{footer}} et {{footer_link}}. Si votre entreprise s’appelle Mondocam, les balises rendent la ligne suivante dans l’e-mail envoyé : « Cet e-mail est un service de MondoCam. En partenariat avec Zendesk. ».

Pour modifier la couleur du texte du pied de page
  1. Dans le Centre d’administration, cliquez sur Canaux dans la barre latérale, puis sélectionnez Talk et e-mail > E-mail.
  2. Dans la section Modèles d’e-mail, recherchez les deux balises du pied de page et leur balise <div> mère :
    ...
  <div style="padding: 10px;
              line-height: 1.5; 
              font-family: 'Lucida Grande',Verdana,Arial,sans-serif; 
              font-size: 12px; 
              color: #aaaaaa; 
              margin: 10px 0 14px 0; 
              padding-top: 10px; 
              border-top: 1px solid #eeeeee;">
    {{footer}} {{footer_link}}
  </div>
...
  3. Remplacez la valeur de color par #009966, code hexadécimal du bleu sarcelle
  4. Cliquez sur Enregistrer.
Remarque – La couleur des liens ne peut pas être personnalisée. Le style des liens est défini avec des pseudo-classes CSS comme :hover. Exemple : a:hover {color:#FF00FF;}. Malheureusement, les pseudo-classes CSS ne sont pas prises en charge en CSS incorporé et les principaux clients de messagerie comme Gmail retirent tout code CSS qui n’est pas incorporé.

Quand vous modifiez la couleur du texte, choisissez un contraste suffisant à des fins d’accessibilité. Suivez les recommandations des directives pour l’accessibilité du contenu Web (Web Content Accessibility Guidelines, WCAG) et utilisez des outils comme WebAIM color contrast checker pour vérifier le rapport de contraste entre le texte et l’arrière-plan.

Exemple : ajout de votre logo

Vous pouvez ajouter le logo de votre entreprise en haut de vos notifications par e-mail, mais n’oubliez pas que certains clients de messagerie n’affichent pas les images par défaut.

Pour ajouter le logo de votre entreprise à vos notifications par e-mail

  1. Insérez une balise <img> (<img src="">) après la balise <body> mais avant la balise de contenu <div>.

  2. Spécifiez l’URL de l’image du logo comme valeur de l’attribut src. Exemple : 
    <img src="https://mondocam.com/assets/logo.png"/>
  3. Si vous souhaitez ajouter un hyperlien au logo, placez la balise <img> dans une balise d’ancrage, comme dans l’exemple suivant :
    <a href="https://mondocam.com/home"><img src="https://mondocam.com/assets/logo.png"></a>

Pour personnaliser votre logo de façon plus détaillée, consultez Recette : ajout du logo de votre entreprise dans le Guide de design des e-mails Zendesk.

Personnalisation de vos e-mails en texte brut

Comme vous ne pouvez pas utiliser d’éléments HTML, vous ne pouvez pas personnaliser l’aspect des notifications par e-mail en texte brut envoyées à vos clients. Cependant, vous pouvez ajouter des informations à vos e-mails.

Pour personnaliser le modèle texte brut

  1. Dans le Centre d’administration, cliquez sur Canaux dans la barre latérale, puis sélectionnez Talk et e-mail > E-mail.
  2. Allez à la section Modèles d’e-mail.
  3. Modifiez le modèle texte brut en fonction de vos besoins.
  4. Si vous souhaitez repartir à zéro avec la version par défaut, cliquez sur Rétablir la valeur par défaut sous le modèle.
  5. Cliquez sur Enregistrer.

Personnalisation de vos e-mails dans les déclencheurs et les automatismes

Les déclencheurs et les automatismes peuvent inclure des actions qui envoient des e-mails à vos utilisateurs. Vous pouvez ajouter des éléments HTML et Liquid aux actions des déclencheurs et des automatismes, plutôt qu’au modèle d’e-mail, pour personnaliser le corps du message. Exemple :

Pour en savoir plus, consultez les articles suivants :
  • Modification et clonage des déclencheurs de ticket
  • Ajouter ou supprimer des liens de ticket
  • Utilisation de Liquid pour personnaliser le formatage et le placement de texte dans les commentaires et notifications par e-mail
Conseil – Lisez cet article du blog Zendesk pour apprendre comment gagner du temps avec des messages de service client courants pour le corps des notifications par e-mail.

Personnalisation de vos e-mails pour plusieurs marques

Pour personnaliser les notifications par e-mail pour plusieurs marques, vous devez personnaliser le corps de l’e-mail dans les actions des déclencheurs et des automatismes, tout en gardant le modèle d’e-mail le plus générique possible, car vous n’en avez qu’un. En d’autres termes, vous utilisez un seul modèle pour plusieurs marques, mais personnalisez différentes actions pour chaque marque. Pour en savoir plus, consultez les ressources suivantes :

  • Utilisation du modèle d’e-mail avec plusieurs marques
  • Comment structurer votre modèle d’e-mail pour utiliser des mises en page HTML personnalisées pour chacune de vos marques, une astuce d’Andrew Soderberg.

Balises pour le modèle d’e-mail HTML - Référence

La majeure partie du contenu des notifications par e-mail est générée dynamiquement par le système Zendesk. Ce contenu généré est représenté par des balises dans les modèles d’e-mail. Ces balises sont placées entre accolades doubles, par exemple {{footer}}.

Les balises insèrent le contenu de l’e-mail et le texte du pied de page.

{{content}}
Affiche le contenu de l’e-mail, qui peut comprendre des commentaires de tickets et des photos de profils utilisateur. Le contenu est défini dans le déclencheur, l’automatisme ou toute autre règle qui envoient l’e-mail depuis votre compte. Consultez Création et gestion des déclencheurs pour les mises à jour des tickets et les notifications.
{{quoted_content}}
(facultatif) Affiche l’historique des messages. Le contenu cité entre guillemets est généralement réduit dans l’application de messagerie de l’utilisateur, mais il peut le développer. Dans Gmail par exemple, l’utilisateur clique sur les trois points (…). Consultez Threads d’e-mails simplifiés.
Le contenu cité peut ne pas contenir les pièces jointes, selon la façon dont le ticket a été créé :
  • Les pièces jointes ne sont pas incluses dans le contenu cité si le ticket a été créé via e-mail.
  • Les pièces jointes sont incluses dans le contenu cité si le ticket été créé via formulaire Web (ou un autre canal autre que l’e-mail).
{{footer}}
(facultatif) Affiche la ligne « Cet e-mail provient de NomdevotreZendesk. » Cette balise affiche également les propriétés du ticket, telles que l’état et le demandeur, dans les e-mails envoyés aux agents. En revanche, les propriétés ne figurent pas dans les e-mails envoyés aux utilisateurs finaux.
{{footer_link}}
(facultatif) Affiche la ligne « Envoyé par Zendesk ». Le mot Zendesk est un lien vers https://www.zendesk.com.
{{delimiter}}
Affiche la ligne « ##- SVP n’écrivez pas sous cette ligne -## ». Le système utilise le délimiteur pour séparer le texte d’origine du nouveau. Lorsqu’une personne répond à un e-mail, le nouveau texte de la réponse est ajouté au ticket sous forme de commentaire. Cette balise est obligatoire dans le modèle HTML si vous utilisez le délimiteur d’e-mail. Consultez Personnalisation du texte du délimiteur dans les e-mails.
{{styles}}
(facultatif) Pour un usage futur. Actuellement, le système utilise cette balise pour inclure des styles quand il détecte une langue s’écrivant de droite à gauche.
{{attributes}}
(facultatif) Pour un usage futur. Actuellement, le système utilise cette balise pour inclure des attributs quand il détecte une langue s’écrivant de droite à gauche.
Réalisé par Zendesk