Forums/Product news and updates/Announcements

Introducing an all new email notification template

Jake Holman
posted this on July 20, 2012 13:01

For any of you that have submitted tickets to support@zendesk.com recently, you'll have noticed that the response you get back looks very different from emails sent out of your account. We've been working on it for a while, and now we're ready to reveal our new and improved email notification template!

What's new and what does it look like?

The current email template has been in Zendesk since the beginning, we hadn't yet changed much about it at all. When we sat down to think about how we wanted to improve things, we settled on 3 aims:

  1. Come up with a template which is completely clean. It should look good without any branding, but allow branding headers and footers to be added if so desired
  2. Make it absolutely clear who each comment is from, what type of comment they're making (private or public), what they look like and who they are in Zendesk (agent or customer)
  3. Be readable for slow and faster readers, as well as comfortable on mobile devices
We came up with something that I think will fit everyones' needs, and is a great improvement over the existing template you may still be using. Here's a complete overview:
email_template.png

How do I get this in my account?

For accounts created before July 12th, 2012 this is an opt-in enhancement, which means there are a few things you'll need to do in order to get this new template design.

Here's the steps:

  1. As an Administrator of your Zendesk account, go to Settings > Channels and then "Email".
  2. Scroll down to the "Email templates" section.
  3. If you've made any customization to the existing, legacy template then you may want to copy and paste this somewhere in order to back it up.
  4. Check the "Enable modern template" option.
  5. This will load-in one additional option, "Show user profile photos in email". This will show agent and customer avatars either from your account or using Gravatar. We highly recommend enabling this, as it leads to a far more personal experience for your customers.
  6. When "Enabled modern template" is checked, the markup you see in "HTML Template" is the new template. You're welcome to customize the entire contents of this box, and if you go wrong you can simply hit "Revert to default" at the bottom of the box.
  7. When you're ready, click "Save Tab". Note: you will lose the "old" email template by doing this.
Once you've completed Step 7, any new outbound email will use the newer template.

Additional tips

The new template hasn't changed too much from the existing one, but here are a few tips to understand the subtleties between them.

  • There is not a link to the ticket in the email template. We believe the email template should be about design, not content. Most standard triggers that send out email notifications have links to the ticket - but if you've removed this you'll want to add that back in.
  • Try not to go too wild with branded headers and footers. Remember that in email, a lot of people will not see images you embed, because they'll be turned off by default in almost all mail clients unless customers white list you (which is, unfortunately, unlikely). This is not something Zendesk has control over.
  • While you can use styles in the template using <style>...</style> we recommend against it. Most of the time mail clients will completely strip this out so your customers won't see a lot of styling you've added. This is not something Zendesk is doing, or has control over.
 

Comments

User photo
Arnaud de Theux
Zendesk

Great news, I liked this new design when contacting Support.

July 24, 2012 03:45
User photo
Kevin Hill
Crain

I like the new design, but it would be nice to be able to hide the ticket info from the bottom. In our case, we customized the email templates a while ago to show ticket field information at the top of every notification, even for requesters. And we don't use the standard "Priority" fields, so having that in the footer of the notification is a waste of space for us.

July 24, 2012 06:22
User photo
Carsten Falborg
IKEA
Awesome... Been looking forward to getting that template... Looking good...
July 25, 2012 01:11
User photo
Toan
searsms

Is it possible to customize the {{footer}} ?  It looks hard coded.  I'd love to be able to add custom fields to it and remove some of the default fields we need to see. 

We've been crudely relying on periods / dots to manually align the text, but it still looks unprofessional.  Or if possible, it'd be great if there was a way to change the font in our trigger text content.

July 25, 2012 07:32
User photo
David Kapell
delphix

I second Toan's question.  We'd love to see custom fields included, and some of the base ones removable.

July 25, 2012 10:31
User photo
Marc Perry
builtlean

In the article, you "highly" recommend enabling gravatars to show up in the new email template for a more personal experience, but then under additional tips you note the problem that most email client do not accept images.  This seems like contradictory information.  Do you still support showing gravatars despite the image email client issue?

The new email template looks great.  Thank you!

 

July 26, 2012 08:45
User photo
David Spence
officespacesoftware

This is great! How can we add the users Organization to the info, this will make things easier for agents to take tickets based on the Organizations they are responsible for:

Ticket # 12345
Status New
Requester  NAME
CCs -
Group -
Assignee -
Priority -
Type Incident
Channel -
July 26, 2012 08:57
User photo
Thomas Andersen
tv2net

Can we use the same code in the text template? 

July 27, 2012 03:45
User photo
Tom Corbett
dotmailer

@Zendesk Great to see you guys release this :-)

July 27, 2012 04:08
User photo
Jake Holman
Product Manager

Hello everyone!

Thanks for much for the feedback so far, and I'm glad everyone seems to be enjoying the new layout.

@Toan, Dave: About the agent footer, we hear you and will look into adding custom fields and removing fields that are deactivated on your account. We'll also look into actually hyperlinking content where applicable (such as the organization, requester, etc). As it stands right now we're not going to be opening up customization to that section yet.

@Thomas, Marci, Gary, Lisa, Joey, Brett: Thanks for the feedback about "(agent)", you're certainly not alone in that feedback. Given the reaction to it so far, we'll be completely removing the string. We originally only had it showing to agents, but opened this up to end-user visibility thinking it would be beneficial.

We may have been naive to think that everyone refers to their staff as "Agents", but had to settle on one reference to it. The reason we didn't implement it as a customizable feature is two fold:

  1. We offer all generated email content in multiple languages. Pretty much everything we write is internationalized and localized. As soon as we open up the ability to customize this one word, you lose that feature completely. You may not be using our localized capabilities, but many others are
  2. Where possible we'll always try and keep the number of settings down
Given the removal of the agent title, I'll be cleaning up these comments to remove reference so as not to confuse future readers. 
We are considering replacing the agent title with something else in the future, perhaps the name of your company, so this would appear as:
Jake Holman (Zendesk) 

For example. A company name is rarely localized, and it's customizable!

@Thomas: The "Text Template" is for the plain text portion of the email, something that's rarely seen unless you email client is set up to not read HTML emails. Putting this template in there would not work, as it would appear as written, and not in the richness you would expect. This is not a limitation of Zendesk, but simply how email in general works. See http://en.wikipedia.org/wiki/MIME for more info.

@Marc: You're correct, it's somewhat contradictory. The same rule would apply since it's just an image, so they would not be visible by default in most email clients. But hey, at least the people that would turn on images would see that smiling face with the lovely rose bushes behind you, so your choice!

Keep the feedback coming!

July 27, 2012 16:26
User photo
Jake Holman
Product Manager

@Gary: Almost forgot. The time should be showing in the appropriate time zone of the recipient. We did notice some bugs around this (as well as some locale related stuff) and will be fixing very soon.

July 27, 2012 16:29
User photo
Gary Lavin
ceojuice

@Jake Company name in place of Agent works for us.

July 27, 2012 16:36
User photo
Marci

@Jake - Thanks for the response!

Actually, I would like to vote that the (agent) string stays in!! I find it VERY helpful to have it there, just as it shows in the graphic above -- as a way to easily tell which comments are from agents. I LOVE this!!

Changing the word from "agent" is all I needed to do, and it's now PERFECT. I hope it doesn't go away -- unless there remains a way to put something equivalent in it's place -- maybe using Liquid?

July 27, 2012 16:49
User photo
Kristina Hall
convio

In our old email template, we had our company logo at the top - is this something I'm able to add to this new template? If so, what code do I use and where in the HTML for the modern template do I place it? Thank you :)

July 30, 2012 09:26
User photo
Jake Holman
Product Manager

@Kristina: You're still able to place your logo into the template if you wish. Unfortunately I'm unable to help you with custom HTML, but if you email support@zendesk.com they should be able to help you out.

July 30, 2012 09:51
User photo
Kristina Hall
convio

Thank you Jake!

July 30, 2012 10:34
User photo
Thomas Andersen
tv2net

@Jake: Thanks for elaboration.

July 31, 2012 01:35
User photo
Philip Moy

I'm finding that a lot of the images/logos i upload for profile pictures in ZenDesk look great, but the quality looks degraded in the new email template. I was directed by support to reupload at 80x80px 72dpi but it seems to still be having the same effect. Is there anything i can do to compensate for the size change? 

It also might be good to post the upload image recommended specs where you can add profile pics. Thanks!

July 31, 2012 08:03
User photo
Jake Holman
Product Manager

@Philip: I'd recommend 200x200 (the 1:1 size ratio is important here). However, this can also be dependent on the rendering engine used by your mail client, or if you use an online service like Gmail, the rendering engine of your browser. They all handle downscaling differently.

It also points out something we need to start doing, which is to enforce 1:1 size ratios at upload, allowing both end-users and agents to crop images on upload.

July 31, 2012 08:21
User photo
Rory K
researchmonitor

Switching to the new format removes the link to the ticket, as you noted. CC notifications appear to not have the ticket link and so far as I can tell there's no way to change the content of the CC notification email, is that correct? Does that mean if we want CCs to have a link to the ticket it needs to go in the trigger template? If so I think it'd be worthwhile mentioning that above in the note about the ticket link being removed. Lots of our users have come to rely on those links and are now complaining that they're not there.

July 31, 2012 12:56
User photo
Jake Holman
Product Manager

@Rory: oversight on my part, sorry about that. I'll be adding the link into the CC template right away, sorry about that.

July 31, 2012 12:58
User photo
Jake Holman
Product Manager

Alright, I've just updated the default text of the CC notification. You can also do this by going to Settings > Tickets > "CC" section - here you can add in a placeholder to render the ticket link, such as {{ticket.url}}

This is the standard CC notification text as it stands now:

You are registered as a CC on this help desk request ({{ticket.url}}) and thus receiving email notifications on all updates.

Reply to this email to add a comment to the request.

{{ticket.comments_formatted}}

Again, this is completely customizable in Settings > Tickets > "CC" section.

July 31, 2012 13:07
User photo
Rory K
researchmonitor

Great, thanks Jake. I assume this might affect email-only helpdesks (which isn't us but I thought I'd mention in case it means changes for someone somewhere else too).

July 31, 2012 14:25
User photo
Brad Campbell
aweber

Does the  {{ticket.comments_formatted}} placeholder tag work in email templates? Currently I'm trying to get the new option of showing the users photos in emails to work in our custom email template. Our problem is that the comments seem to be getting placed outside of the HTML of our template. The most recent comment is the only one that is displaying correctly. Is there a way to fix this or a placeholder tag we can use?

August 01, 2012 08:40
User photo
Jake Holman
Product Manager

The only supported placeholders are {{delimiter}} which displays the "Please reply above this line" text, {{footer}} which contains text along the lines of "This is an email service from {accountName}" which is localized, and then {{content}} which contains any content passed to it by a trigger, automation or anything else that sends emails from your account.

The email template does not take any other placeholder. You control the layout of information within Triggers and Notifications, you can see an article here: https://support.zendesk.com/entries/20011606-streamlining-workflow-with-ticket-updates-and-triggers or if you continue to have issues, don't hesitate to contact support@zendesk.com

August 01, 2012 08:45
User photo
Pierre Chevalier

First, congratulations for the new layout. Love it. But I just had a complain from agents about the size of the font of the {{ticket.comments_formatted}}  placeholder, it has a 14px font size, whereas the rest is 12px. They then complain that they can not see enough at once. I checked the email CSS but could not find any reason why it is like that. Is there any way to change that font size? Thanks!

August 02, 2012 02:19
User photo
Jake Holman
Product Manager

@Pierre: At the moment there's no way to customize much in the way of styling for the email template. We increased the font size from 12 to 14px mainly for the purpose of readability and quick scanning. We had the same reaction internally when we first switched, but found it was simply a standard reaction to change most people have, and everyone quickly adjusted.

Hopefully your agents will get used to the changes rapidly, and realize it's certainly much easier to read now than it was.

August 02, 2012 11:34
User photo
Jake Lehner
airwatch

Hey Jake. I've been having some struggles getting a customer template to format properly in Gmail. I don't know if it has anything to do with the new email template, or just email in general.

Ticket # is 249660 if you care to take a look in case you have some knowledge to share with the support team.

August 02, 2012 11:51
User photo
Jake Holman
Product Manager

@Jake: I'll take a look, will respond in the ticket. Might take me a little while to get back to you.

August 02, 2012 11:56
User photo
Kathryn

@Jake - I see in one of the earlier comments that you were modifying the CC template to include a link to the ticket - but for some reason it's not showing up for me.  I tested this out by CC'ing another email address of mine on a ticket - and although I received the email containing the ticket comment thread (very clean format by the way), I am not able to see a link to the ticket.  Is there a setting I need to change?

August 07, 2012 09:35
User photo
Jake Holman
Product Manager

@Kathryn: You can edit the template under Settings > Tickets > CC section. In the template, there should be a placeholder: {{ticket.url}} - if it's not there, place it where you'd like it to be.

August 07, 2012 10:04
User photo
Bojan
innofield

Is it somehow possible to change the font family fort the {{ticket.comments_formatted}} placeholder?

Thanks,
Bojan 

August 08, 2012 07:55
User photo
Sarah Crane Newman
sifteo

Hi,

Is there a way for me to preview what my emails now look like? (Similar to the widget preview functionality when creating a widget.) I want to figure out what changes to make to my html customization, and so would like to view my current email template.

Thanks,

Sarah

August 08, 2012 13:36
User photo
Ken Strange
wordex

@Bojan - I'm with you on this one, would like to change the font family too.

August 08, 2012 18:49
User photo
Pierre Chevalier

@Bojan, @Ken  With you too font family and size would be great, it seems that I'll have to revert back to the old layout because of agent  + my CEO agrees with them.

@Jake - you said that you did implement it in your support desk. It's been a long time that I did not use it, but the mail notifications that I receive for posts on this forum are made with a font size of 12, not 14 ;-) The more so, all the other texts from the template are in 12.

August 08, 2012 23:50
User photo
shawn eisenach
lexmachina

Looking the example above, your version of the New Email Template does not contain, "

To add additional comments, reply to this email or click the link below: " text.

In this thread you mention that {{delimiter}} is just the, "##- Please type your reply above this line -##" copy.

I am using the following customized email template;

<!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;
}
</style>
</head>
<body style="width: 100%!important; margin: 0; padding: 0;">
<div style="padding: 10px ; line-height: 18px; font-family: 'Lucida Grande',Verdana,Arial,sans-serif; font-size: 12px; color:#888888;">
<div style="color: #888888">{{delimiter}}</div>
{{content}}
<div style="color: #888888; margin: 10px 0 14px 0; padding-top: 10px; border-top: 2px solid #0771b8;">
{{footer}}.
</div>
</div>
</body>
</html>

 

and still get, "To add additional comments, reply to this email or click the link below: http://lexmachina.zendesk.com/tickets/14" inserted into emails.  


In the old template it was possible to remove {{header}}, is there a way to edit the new email template to not display links to the ticket (effectively making it an email only help desk?


August 09, 2012 15:08
User photo
Catherine Mayfield

does {{delimiter}} now cover the different languages?


Enter {{txt.email.delimiter}} if you want the delimiter text displayed in the language selected in the email recipient’s user profile Language setting.



August 16, 2012 07:03
User photo
Aaron Wheeler

This looks great! We were heading this way anyways, so you made it easier. One issue: our trigger emails use returns for spacing, and those don't seem to show up in the emails we send out. However, when I add a line break with html instead, it shows up double spaced. Any idea why that's happening? Check it out: http://www.screencast.com/t/ZtD9D23JicqB

August 20, 2012 11:01
User photo
Jake Holman
Product Manager

@Bojan: Unfortunately it's not possible to change the font family at this time. 

@Sarah, Kan: There's no real "preview", but you could try putting everything into a .html file and previewing it that way, but it's going to unfortunately be devoid of content.

@Pierre: That's a very good point, we'll adjust the email notifications

@Shawn: Make sure you edit all your triggers. The HTML email template just adds the "frame" and persistant content. Triggers add the real content.

@Catherine: I'll have to look into that. I was under the impression {{delimiter}} is now i18n, but you may be right about {{txt.email.delimiter}}

@Aaron: Erm, that's a bug. Opening a ticket for you now. We did just implement yet more revisions to our email renderer so that might be the reason. Email your way soon.

August 20, 2012 11:16
User photo
Jason Nassi
twilio

+1 on Aaron Wheeler's bug. We noticed it on Friday as well, our trigger emails are now being handled as HTML, and we didn't have any HTML line breaks in the body. I manually added HTML line breaks to one trigger, but haven't had a chance to go through all of our triggers... pretty daunting task.

August 20, 2012 11:19
User photo
Gary Lavin
ceojuice

FYI I really much prefer the old system for warning when two people are viewing the same ticket.

"Just so you know, that feature (agent collision detection) is represented a little differently in the new interface. Instead of a big banner descending from the top of the page to warn you, there should be a small yellow box that appears above the 'Assignee' field (on the left)."

September 19, 2012 15:34
User photo
Craig Morton
movingdata

Changing the Agent Notification Footer: (only sent to agents)

I've been advised by support that the following liquid code can change the agent notification footer, but I can't get any variation of it to work. Has anybody tried this? 

 {% if footer contains 'You are an agent. Add a comment by replying to this email or view ticket in Zendesk' %}{{footer | replace: 'You are an agent. Add a comment by replying to this email or view ticket in Zendesk', ' Add a comment by replying to this email above the line, or view the ticket at mycompany'}}{% else %}{{footer}}{% endif %}

Jake's comment on the {{footer}} tag on Aug 3 may need an update as his {{footer}} text example is editable in the HTML template 

Am I missing something? or can anyone spot a problem with the syntax?

September 20, 2012 05:24
User photo
Wayne Kelly

Hi, 

Did we end up getting the ability to add custom fields to the notification emails? We have a 'client' field and need to include that when logging support tickets.

Thanks

Wayne

February 03, 2013 21:32
User photo
Jake Holman
Product Manager

@Wayne: Think of the email template as simply a wrapper. There's two main parts to any email notification going out of Zendesk:

  1. First we take the Email Template and load all of that in. This is always used for any email notification from your account, including (for now) notifications sent for system purposes (Suspended Ticket notifications, sharing agreements, etc)
  2. You might notice the {{content}} placeholder in the email template. This the second part. The "notification" defined in your triggers and automations replaces the {{content}} placeholder. At this stage, it's ticket aware, meaning you can use any placeholder.
The email template does not support standard placeholders because we can't guarantee any of them will work due to the broad use the email template receives. Take a look at this article to understand how you can use placeholders (including custom fields) in trigger and automation notifications: https://support.zendesk.com/entries/20203943-zendesk-data-object-pl... 
February 04, 2013 09:14
User photo
Stacy LaHam
fastspot

Back in July 2012, @Jake commented that Zendesk was not yet opening up customization of the agent footer in the template to include the Organization name. Like @David, my company would also find having the requester's organization in the footer extremely helpful to our internal process. Any word on if this can be added, even if you're not allowing us to customize it ourselves?

Thanks,

Stacy

March 20, 2013 09:22
Topic is closed for comments