Customizing templates for your email notifications

Fastpath: Admin > Channels > Email

Important: The option to edit email templates is not enabled by default for trials and might not be enabled for some accounts. To enable editing, send a request with your subdomain to [e-mail].

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.

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.

This article contains the following sections:

• Editing the email templates
• Editing the HTML template
• Editing the text template
• Understanding the system placeholders

Related articles:

• Adding or removing ticket links in emails
• Customizing the delimiter text in emails
• Showing user profile photos in HTML emails

Editing the email templates

The look and feel of the emails are controlled by an HTML template and a text template. 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).

To edit the email templates

1. Click the Admin icon () in the sidebar, then select Channels > Email.
2. Find the Email templates section and modify the templates as needed.

   If you need help, see the following topics:

   • Editing the HTML template
   • Editing the text template
3. If you want to start over with the default 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 themselves as follows:

• Show user profile photos
• Add or remove ticket links
• Edit the delimiter text
• Use Liquid markup

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 is not enabled by default. To enable editing in the template, send a request (including your subdomain) to [e-mail].

This section covers the following topics:

• Changing the appearance of HTML emails
• Guidelines for customizing HTML emails

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 following two system placeholders are required and should not be deleted: {{delimiter}}, {{content}}. The {{styles}} and {{attributes}} placeholders are for future use and are sometimes used by the system to inject styles and attributes to support Right-to-Left locales. 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.

Community tip: If you have set up multiple brands, check out this tip How to structure your email template to use custom HTML layouts for each of your multiple brands contributed by Andrew Soderberg.

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:

• CSS portal on the Mozilla Developer Network
• Help Center CSS Cookbook

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.
• Keep text formatting to a minimum. Lots of bold text can trigger spam filters.
• 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 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}}

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 Customizing the delimiter text in emails.

{{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 Creating and managing triggers for ticket updates and notifications.

{{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.

{{styles}}

Optional. For future use. Currently, the system uses this placeholder to inject styles when it detects that the locale is a Right-To-Left locale.

{{attributes}}

Optional. For future use. Currently, the system uses this placeholder to inject attributes when it detects that the locale is a Right-To-Left locale.