Your account sends regular email notifications to end users when events such as ticket or help center updates occur. The content and format of almost all these emails is controlled by two templates in Admin Center: an HTML template and a plain text one. Both formats are included in each email sent. The version end users see depends on their preference settings in their email applications.
You can use both templates as they come or edit them to better suit your needs. Unlike the plain text template, the HTML template also lets you customize the look and feel of the email sent from your account. For example, you can add your company logo or a call-to-action banner to match your brand identity or to more closely match the look of your help center.
Limitations
- Editing email templates isn't allowed by default for trials and might not be allowed for some accounts. To enable editing, contact Zendesk Customer Support with your subdomain, a link to your company website, and a brief description of the changes you want to make.
- Side conversation email notifications don't use the email templates.
Anatomy of the email templates
The anatomy of the HTML and plain text templates are useful to know when you customize them.
Anatomy of the HTML template
The standard HTML notification email sent from your Zendesk account looks as follows:
The side numbers in the screenshot correspond to the following components in the email templates:
email body |
The email body is represented by the Before sending out the email, the system replaces the
The email body itself is defined in a trigger. In the following trigger action, the email body is highlighted in red: In the example, the email body consists of two elements:
|
standard footer |
The standard footer consists of the following two placeholders:
Both placeholders are optional. You can delete one or both from the template. |
Anatomy of the plain text template
The plain text email template is used when the user elects not to read email messages in HTML format. The template consists of two system placeholders:
{{content}} {{footer}}
The {{content}}
placeholder inserts the text 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.
If you'd like to add a line to your plain text emails, add it to the template.
Thanks for contacting Mondocam Support! {{content}} {{footer}}
Customizing your HTML email
You can customize the look and feel of the HTML email notifications sent to your customers. This section covers the following topics:
- Editing the HTML email template
- Example: Changing the color of the footer text
- Example: Adding your logo
For guidelines and recipes, see the Zendesk email design cookbook.
Editing the HTML email template
You can change the appearance of HTML emails by editing the HTML email template in Admin Center. Editing the HTML template requires a certain level of familiarity with HTML and CSS. For recipes, see the Zendesk email design cookbook. For design guidelines, see HTML guidelines for email.
The changes are applied to your outgoing email immediately after saving them. Therefore, you should preview and test your changes before applying them to the template. If you're on an Enterprise plan, you can also test email changes in a sandbox before deploying them publicly.
To edit the HTML template
-
In Admin Center, click
Channels in the sidebar, then select Talk and email > Email.
If you're on the Enterprise plan, continue by clicking Manage Settings > Templates.
- Scroll to the HTML template box.
- Modify the HTML of the template as needed.
See the Zendesk email design cookbook.
- If you want to start over with the default version, click Revert to default below the template.
- If you want to show user photos in emails, click Show user profile photos in
emails in the Email templates section.
When selected, profile photos are displayed in emails when the email client supports it. Not all email clients display images by default.
- Click Save.
Example: Changing the color of the footer text
This example shows how to change the font color of the footer to teal, which has a hex color code of #009966. For more ideas for a footer, see the following recipes in the Zendesk email design cookbook:
Suppose the footer in your template consists of the {{footer}}
and
{{footer_link}}
placeholders. If your company name is Mondocam, the
placeholders render the following line in the email sent: "This email is a service from
Mondocam. Delivered by Zendesk".
- In Admin Center, click
Channels in the sidebar, then select Talk and email > Email.
- In the Email templates section, locate the two footer placeholders and
their parent
<div>
tag:... <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> ...
- Change the value of
color
to #009966, which is the hex code for a shade of teal. - Click Save.
: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.
When changing text color, use sufficient color contrast for accessibility. Follow the Web Content Accessibility Guidelines (WCAG) recommendations and use tools like WebAIM color contrast checker to check the contrast ratio between the text and the background.
Example: Adding your logo
You can add your company logo to the top of your email notifications, but keep in mind that some email clients don't display images by default.
To add your company logo to your email notifications
- Insert an
<img>
tag (<img src="">
) after the<body>
tag but before the content<div>
tag. - Specify the URL of the logo image as the value of the
src
attribute. Example:<img src="https://mondocam.com/assets/logo.png"/>
- If you want to add a hyperlink to the logo, enclose the
<img>
tag in an anchor tag, as in this example:<a href="https://mondocam.com/home"><img src="https://mondocam.com/assets/logo.png"></a>
To customize your logo in more detail, see Recipe: Add your company logo in the Zendesk email design cookbook.
Customizing your plain text email
Because you can't use HTML, you can't customize the look and feel of the plain text email notifications sent to your customers. However, you can add information to your emails.
To customize the plain text template
- In Admin Center, click
Channels in the sidebar, then select Talk and email > Email.
- Scroll down to the Email templates section.
- Modify the text template as needed.
- If you want to start over with the default version, click Revert to default below the template.
- Click Save.
Customizing your email in triggers and automations
Triggers and automations can have actions that send email to your users. You can add HTML and Liquid markup to trigger or automation actions rather than to the email template to customize the email body. Example:
Customizing your email for multiple brands
To customize email notifications for multiple brands, you have to customize the email body in the actions of triggers and automations but keep the email template as generic as possible because you only have one. In other words, you use a single template for all brands but customize different actions for each brand. For more information, see the following resources:
- Using the email template with multiple brands
- How to structure your email template to use custom HTML layouts for each of your multiple brands, a tip contributed by Andrew Soderberg
Placeholder reference for the HTML email template
Most of the content in notification emails is generated dynamically by the Zendesk system.
The generated content is represented by placeholders in the email templates. The
placeholders are enclosed in double curly quotes, such as {{footer}}
.
The placeholders insert the email contents and footer text.
{{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.
{{quoted_content}}
- Optional. Displays the message history. The quoted content is usually collapsed in the user's email application, but the user can expand it. In Gmail, for example, the user clicks the ellipsis (…). See Understanding simplified email threading.
{{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.
{{footer_link}}
- Optional. Displays the line "Delivered by Zendesk." The word Zendesk is a link to https://www.zendesk.com.
{{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 if you are using the email delimiter. See Customizing the delimiter text in emails.
{{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 Right-To-Left.