Customizing your email templates Follow

all plans

All the email notifications sent from your Zendesk are formatted for both HTML and plain text emails. Both formats are included in each email. The version end-users see depends on the preference settings of their email clients. You can customize the HTML template to match your branding by making a few simple style changes. You can also edit the information in the text versions of your emails.

The look and feel of the emails are controlled by an HTML template and a text template.

To edit the email templates
  1. Click the Admin icon () in the sidebar, then select Channels > Email.
  2. Modify the email templates.

    If you need help, see the following topics:

  3. If you want to start over with the unmodified version of the template, click the Revert to Default link below the template.
  4. Click Save.
In addition to customizing the email templates, you can change emails as follows:

Tip: If you are on Enterprise, you can modify and test email changes in a sandbox before deploying them publicly. See Testing changes in your sandbox.

Editing the HTML template

You can change the appearance of HTML emails by editing the HTML and CSS in the HTML template.

Note: HTML template editing its not enabled by default. To enable editing in the template, send a request (including your subdomain) to support@zendesk.com.

This section covers the following topics:

Note: If you signed up to Zendesk before July 12th, 2012, you have a different HTML template. See Editing the old HTML template for instructions. If you want to upgrade to the new template, see Switching to the new HTML template.

Changing the appearance of HTML emails

The HTML template consists of DIV tags and system placeholders.

The placeholders supply most of the content to the email. The {{delimiter}} and {{content}} placeholders are required and should not be deleted. The {{footer}} placeholder is optional. No other placeholder can be used in the template. For more information, see Understanding the system placeholders.

The DIV tags apply CSS styles to the content. By adding or modifying CSS styles, you can change the look and feel of the email as a whole, the delimiter, or the footer.

To edit the styles in the template
  1. Click the Admin icon () in the sidebar, then select Channels > Email.
  2. Scroll down to Email Templates.

  3. Make your changes.

    If you want to use any of the standard template placeholders, start typing the placeholder name, then choose from the available options that appear.

  4. Click Save when you're finished.

For example, here's how to change the font color of the footer to teal:

...
 <div style=" color: #009966;
              margin: 10px 0 14px 0;
              padding-top: 10px;
              border-top: 1px solid #eeeeee;" >
    {{footer}}{{footer_link}}
  </div>
...

The font color is set to teal's hexadecimal value with the following style declaration:

color: #009966;
Note: The color of links can't be customized. Links are styled with CSS pseudo classes such as :hover. Example: a:hover {color:#FF00FF;}. Unfortunately, CSS pseudo classes are not supported in inline CSS, and major email clients like Gmail strip out any CSS that is not inline.

To add an image such as a company logo to the template, insert an IMG tag that references the image. Example:

<img src="http://YOURWEBSITE.com/logo.png"/>
Note: Before adding logos and other images, remember that most email clients don't display images by default.
If you want to add a hyperlink to the logo, enclose the IMG tag in an anchor tag, as in this example:
<a href="http://YOURACCOUNT.zendesk.com"><img src="http://YOURWEBSITE.com/logo.png"></a>
For more information, see the following resources:

Guidelines for customizing HTML emails

You can customize the HTML template extensively. However, keep in mind that designing HTML emails is hard because of the way HTML and CSS are rendered in different web browsers and email clients. Certain types of formatting can even be interpreted as spam. In general, keep your customization as simple as possible and follow these guidelines:
  • Do not use CSS3 style declarations. Stick to CSS1 or 2.
  • Do not add more DIV sections.
  • Do not use <style>...</style> to apply styles. Most email clients strip out the tag.
  • Keep text formatting to a minimum. Lots of bold text can trigger spam filters.
  • HTML5 is not yet supported, so don't use it.
  • Don't add lots of images (another trigger for spam filters) and downscale the images that you do use.
  • Use the ALT tag on all images. The tag displays a description of the image before users allow the images to be displayed.
  • If you know the width and height of the image, define it. This forces the email client to reserve the image space in the layout of the email before the images have been downloaded.
  • Background images are not supported in all email clients, so don't rely on them for information or functional design.
  • Don't link to images in a closed Zendesk. If the intended recipient is not a registered and signed-in user, the images will be broken.

Editing the old HTML template

If you signed up to Zendesk before July 12th, 2012, you have a different HTML email template. Refer to this section to customize it. If you want to upgrade to the new template, see Switching to the new HTML template.

The older version of the template consists of the email text delimiter, a header, the content area, and the footer. All of them are contained within an HTML table.

The template also includes system placeholders that insert the delimiter, header, footer, and ticket content. The {{delimiter}} and {{content}} placeholders are required. The {{header}} and {{footer}} placeholders are optional. See Understanding the system placeholders.

You can make minor changes to the HTML to make simple branding changes. For example, here's how to set the background and font colors of the header and footer (relevant code in bold):

<td style="font-size: 12px;
            font-weight: bold;
            color: #fff;
            line-height: 1.5em;
            font-family: Helvetica, Arial, sans-serif;
            width: 100%;
            text-align: center;
            background: #98c332;
            padding:8px;
            margin:4px">
  {{header}}
</td>

...

<td style="font-size: 12px;
            font-weight: bold;
            color: #fff;
            line-height: 1.5em;
            font-family: Helvetica, Arial, sans-serif;
            width: 100%;
            text-align: center;
            background: #98c332;
            padding:8px">
  {{footer}}
</td>

The font color is set with this style declaration:

color: #fff;
The background color is set with this style declaration:
background: #98c332;

For a great example of a customized email template complete with sample files, check out Ben Lucier's post A better email template for Zendesk in our Community forums.

Switching to the new HTML template

If you signed up to Zendesk before July 12th, 2012, you have an older version of the HTML email template.

You can upgrade to the new version as follows.

  1. Click the Admin icon () in the sidebar, then select Channels > Email.
  2. Scroll down to the Email Templates section.
  3. If you customized the existing legacy template, you may want to paste the markup in a separate file as a backup.
  4. Select the Enable modern template option.

    The markup for the new template replaces the old markup.

  5. Click Save to start using the new template with your emails, or customize it first. See Changing the appearance of HTML emails.

Editing the text template

The text template is used when the user elects not to read email messages in HTML format. To edit the text template, open the Email channel settings page and scroll down to Email Templates. Make sure to click Save when you're done.

The text email template consists of two system placeholders:

{{content}}

{{footer}}

The {{content}} placeholder inserts the text delimiter, the ticket title, the text that is generated from business rules (triggers, automations, or macros), and the ticket comments. The {{footer}} placeholder is optional. You can remove it if you want. For more information, see Understanding the system placeholders.

Note: The {{delimiter}} placeholder is not required in the text template. The {{content}} placeholder contains the delimiter text.

If you'd like to add a line to your emails, simply add it to the template.

Thanks for contacting MondoCam Support!

{{content}}

{{footer}}

Showing user profile photos in HTML emails

To show user profile photos next to ticket comments in HTML emails, select the Show User Profile Photos in Emails option on the Channels/Email page.

Be aware of the costs and benefits of displaying profile photos. On the positive side, pictures lead to a more personal experience for your customers. On the negative side, most email clients don't display images by default.

The emails display the photos from Zendesk account profiles or from Gravatar. If you want to display your company logo next to ticket comments, upload it to Zendesk as your profile photo. Make sure the image size ratio is 1:1. The recommended size is 200x200px.
Note: The various rendering engines used by mail clients and web browsers may affect the quality of the images.

Adding or removing ticket links in emails

Your email notifications can provide a link back to the ticket being discussed. Example:

This type of link is defined in a trigger or automation, not in the template. For example, most of the default triggers have an action that sends an email notification with a link to a ticket. If you provide support with email only, you don't want customers to see a link to a ticket that would prompt them to log in. In this case, you must edit your triggers or any other business rules that generate email notifications.

To add or remove a ticket link in a notification trigger or automation
  1. Click the Admin icon () in the sidebar, then select Triggers or Automations.
  2. Locate the notification trigger or automation and select Edit.
  3. Modify the action or actions as needed.

    The following placeholders insert ticket links in the email body: {{ticket.link}} or {{ticket.id}}.

  4. Click Update.
For more information on editing triggers to remove ticket links, see Removing placeholders that contain URLs from your notification triggers.

If you provide support through email only, see Setting up to provide email-only support. The article describes how to remove links back to your Help Center that would prompt your end-users to attempt to sign in.

Editing the delimiter text

The text in the email delimiter is used to inform the email recipient that any text entered into a reply must be above a certain line in the email.

When the recipient's reply is received in Zendesk, the delimiter is used to separate old content from new. The new content is added to the ticket as a comment.
Note: You cannot remove the delimiter from the email template. Without a delimiter, any text typed below it would not appear in the ticket.

Even though you cannot remove the delimiter, you can customize your delimiter's text and font size, color, and type.

Editing the delimiter text

  1. Go to Admin>Channels>Email.
  2. Underneath the Email Template HTML, locate Mail Delimiter.
  3. Type in your personalized delimiter between 20 to 65 characters long.
  4. Your delimiter can also support multiple languages by typing in the {{txt.email.delimiter}} placeholder.

    When you use this place holder, the text in the delimiter is drawn from the translations that are provided for the languages supported in Zendesk. The language shown in the email message is based on each user's language preference. This is a convenient way to support different languages in your email template. However, it also means that you have no control over the words in the translated versions of the delimiter.

    Note: If your users don't have a language preference selected, as is the case with unverified users in a Zendesk set up for email-only support (see Setting up to provide email-only support). The delimiter is displayed in your primary (default) language.

    5. Click Save

Editing the delimiter font size, color, and type

You can edit your delimiter font size, color, and type in your Email template HTML. Your edits should be on the same line as the placeholder. Do not make these changes on any other line as it will affect the rest of your text.

For more information on customizing text see, Jordan Wheelock's support tip Changing your email template content fonts and Ben Lucier's community tip, A better email template for Zendesk.

Using Liquid markup

Liquid markup does not work in the email templates. It only works in the business rules (triggers, automations) that generate the email notifications.

If you want to use Liquid markup to have more control over the content of email notifications, see Using Liquid markup to customize comments and email notifications.

Understanding the system placeholders

Most of the content in notification emails is generated dynamically by the Zendesk system. The dynamically generated content is represented by placeholders in the email templates. The placeholders are enclosed in double curly quotes, such as {{footer}}.

The placeholders insert delimiter text, the email contents, and a footer.

{{delimiter}}
Displays the line "##- Please type your reply above this line -##". The delimiter is used by the system to separate old content from new. When a person replies to an email, the new content in the reply is added to the ticket as a comment. This placeholder is required in the HTML template. For more information, see Editing the text in the mail delimiter and supporting other languages.
{{content}}
Displays the email content, which can include ticket comments and user profile photos. The content is defined in the trigger, automation, or anything else that sends email from your account. See Streamlining workflow with ticket updates and triggers.
{{footer}}
Optional. Displays the line "This email is a service from YourZendeskName." It also displays ticket properties, such as status and requester, in emails sent to agents. The properties are not displayed in emails sent to end-users. The list of properties can't be customized at this time.
{{footer_link}}
Optional. Displays the line "Delivered by Zendesk". The word Zendesk is a link to http://www.zendesk.com.
Have more questions? Submit a request

Comments

  • 0

    Would love to be able to add {{footer}} to end user tickets

  • 0

    Hi Anna!

    Can you elaborate on this a little more? Do you want that added to incoming ticket?

  • 0

    Hello everyone,

    this topic is great however and having a hard to making the email look like a "normal" email in terms of font and alignment.

    1. Im not sure if the padding/margin adjustments I made are ok for all users in order to look normal. If I use what suggested at the thread the text is on the very very left in my OS X MAIL and iOS Mail.

    2. Even harder: I can not adjust the font style of the content. While it works for my footer, changing font-family: 'Lucida Grande',Verdana,Arial,sans-serif; into 'Helvetica Neue,Helvetica,Arial,sans-serif; makes the template looking very strange. It does not work.

    Can anyone help please?

    Here is my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

    <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <style type="text/css">

        table td {

          border-collapse: collapse;

        }

        {{styles}}

      </style>

    </head>

    <body {{attributes}} style="width: 100%!important; margin: 0; padding: 0;">

      <div style="padding: 20px ; line-height: 18px; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#000000;">

        <div style="color: #b5b5b5;">{{delimiter}}</div>

        

    {{content}}

      </div>

      <div style="padding: 20px ; line-height: 18px; font-family: 'Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 12px; color: #aaaaaa;

        margin: 10px 0 14px 0; padding-top: 10px;">

      This is my footer. Font change works.

      </div>

    </body>

    </html>

  • 0

    Hi there - are you trying the approach outlined in this article? 

    https://support.zendesk.com/hc/en-us/articles/203661346-Setting-up-an-unformatted-email-template

    That is one way to make your email notifications look like normal emails without the extra formatting. If that doesn't work for you please let us know.

  • 0

    Hi,

    A number of our customers have voiced concerns that tables embedded in their original support requests lose their formatting in corresponding notifications. Is this something that we can rectify for them on our end?

  • 0

    Hey Zendesk Admin,

    You need to make sure, by checking the events of your tickets, that the e-mail notifications sent out by your triggers/automations (or maybe even CC notifications) contain placeholders where comments are being formatted. Placeholders that contain the "_formatted" part causes the tables to be shown in your email notifications.

  • 0

    Hi Robbert,

     

    Thanks for your response. We are using these placeholders in our notifications already but the formatting is retained only in rare instances. When we select 'view original email' we can see the proper formatting on the incoming request. Any thoughts on why this might be? 

  • 0

    Hey Zendesk Admin,

    I will reach out to you separately by email, we will need to look at these individual examples and see what is happening here.

  • 0

    I would really like to be able to customise the delimiter for the 3 languages we support, because the wording is too formal. However, editing the {{txt.email.delimiter}} in Admin: Channels:Email is not an option because that would change the delimiter for all languages to that specific text, and editing {{delimiter}} in the HTML template would do the same. Help please!

  • 0

    Hi Jenneke - unfortunately there isn't an easy way to do this. The delimiter field will basically accept either the standard placeholder or static text of your choosing. There isn't a way to use custom dynamic content as the delimiter.

    You could consider creating dynamic content and placing that at the very start of your notification triggers, that would then be below the delimiter (which you could replace with symbols or something innocuous). I haven't had a chance to test that approach though, so I recommend you reach out in a ticket if you try that and are having issues.

  • 0

    I'd like to be able to add a tag such as {recipients}. This would list everyone who received the email and who will receive the response.

     

    ~Kevin

  • 0

    Is there any way to change the font of the emails (do not want Lucida, Verdana, Tahoma, etc)?

  • 0

    Hey Patrick!

    We have a Support Tip that should help you out: Changing your email template content fonts. Hope that helps!

  • 0

    Is it possible to show a {{group.name}} or something similar in the footer?

    Or is the only option {{footer}} and {{footer.link}} or hard-coding HTML?

  • 0

    Hey Maurice!

    The {{footer}} and {{footer.link}} placeholders are hard-coded and can't be altered. However, they are definitely optional, so if you want to leave them out and add something else at the bottom of your template, you certainly can. You can code the HTML so that the bottom of the email template is formatted to show a footer section that's formatted differently from the rest of the email.

    As for showing the {{group.name}} or other placeholder in the footer section you create, those placeholders aren't made for use in the email template, so if you add them, nothing will show up in the email. You would need to add those placeholders to your trigger or automation notifications instead.

    You can find more information about our placeholders here: Zendesk Support placeholders reference

Please sign in to leave a comment.

Powered by Zendesk