Customizing templates for your email notifications

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 support@zendesk.com.

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.

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

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.

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:

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:

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.

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.

43 Comments

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.

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!

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.

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.

{{footer}}Optional. Displays the line "This email is a service from YourZendeskName."

-> Is this ZendeskName automatically changed if we have multiple brands? I am worried if this zendesk name isn't changed and remained with the default brand name.

For example if we have `Brand A` and `Brand B` than this footer will be automatically changed as per brands, so it will be like : This email is a service from "BrandA" or This email is a service from "BrandB" Right?

Question on {{footer}} and branding: before we implemented branding the footer displayed the account name (i.e. the value in settings>account>branding>your Zendesk account name. After branding was implemented (one new brand was created for the purpose of an external help center only) it is showing our default brand as that is what all our tickets will use

I prefer to continue to have the account name populate--is there any way to keep account name in the footer with branding implemented?

There's no way to remove the message ID which you've reference in your screenshot. This is required in the footer so tickets within Zendesk thread correctly when replies are sent back and forth between customer and agent. It's currently hidden on the footer being in white text.

If you happen to use a different color in your email notifications, you can look at changing the message ID text to the same color so that it blends in and is not visible to the customer.

The text you're looking to customize here lives in the Triggers in your account; not within the email template.

Head over to Admin > Business Rules > Triggers.

Edit any trigger which has "Requester" in the trigger title. These are the triggers which send out the email notifications (like you've noted in your comment above) to your end-users (ticket requesters).

On the editing page for the trigger, scroll to the bottom, where you'll find the email body section which contains the editable text. You can edit this text here to whatever you like.

Just in case you need, you can check out all of our guides which relate to triggers in our Trigger Resources section here.