A better email template for Zendesk
My name is Ben Lucier and I've been a Zendesk customer for as long as I can remember. I recently wrote the article on my personal blog (benlucier.com/blog) and at the request of Zendesk, I thought I'd share it here too. I hope it makes your life easier.
If you’re a new customer of Zendesk, you’ve probably noticed the bland default HTML template. The simple default is the best choice for those just starting out because it’s uncomplicated to read if you’ve got a basic understanding of HTML and inline CSS.
I thought I’d share a template that I’ve been using for a while now that might be helpful if you’re looking to add your company logo, office hours, contact information and social media channels.
First, let's take a look at what an email looks like with the Zendesk default template applied:
The template is pretty darn drab, isn't it?
When customers contact your company, they’re looking for something. Maybe they’re having trouble and need help, or they might be inquiring about buying something.
Don’t let the opportunity pass!
Putting the important details in your help desk email template is a great way to let your customers know about your customer community, social channels, support hours, and more.
Here’s what the template looks like with a revised template:
The new template includes hours of operation, phone number, company logo, and links to the blog, help site and forums, Twitter, and Facebook.
If you want a more helpful email template for Zendesk, I've attached a file which contains all the necessary files you need and follow the instructions below.
Customize the Zendesk email template for your company
- Open ‘companylogo.png’ in your favorite image editor and add your own logo. It works best if you keep your logo to a maximum height of 45 pixels.
- Upload companylogo.png, social-facebook.png, and social-twitter.png to your company website.
- Replace <a href=”http://YOURCOMPANY.COM”> with your company’s domain name.
- The sample HTML file uses relative filenames in order for you to view the HTML. Before using the template, make sure you add the full URL (including the HTTP) to your uploaded images. For example: <img src=”./companylogo.png” would be <img src=”http://caninesoftware.com/companylogo.png” (assuming caninesoftware.com is your company domain name).
- Look for and replace “http://www.facebook.com/YOURFACEBOOK” with your company Facebook URL.
- Look for and replace “http://www.twitter.com/YOURTWITTER” with your company Twitter URL.
- Look for and replace “help@YOURCOMPANY.com” with your company’s email address
Once you’ve finished customizing the template with your company details, the only thing left to do is add the email template to Zendesk. You can do this by logging in as an administrator, then clicking Settings -> Channels -> Email. Then, delete the existing HTML in the HTML Template field and paste your new HTML. Remember to click Save.
-
This is awesome, Ben. Thanks for sharing with the community!
-
Great tip. It looks way better than the generic layout, no offense Zendesk :)
-
Thanks Ben for sharing this. I started using ZenDesk a few weeks ago and I also wanted to customize the email template. Modifying {{content}} is a bit limited but the result is pretty decent. I tested the template in several email clients and you can see this here: https://litmus.com/pub/6935df0/screenshots
The template also embeds a few elements using Markdown format; so you can see how it will look like in different configurations. Then you can choose what you want to use. Hope it helps
-
Joseph, that looks great. Thanks for sharing!
-
This sounds really interesting. I tried both templates and unfortunately the [content] part (ie the comments) didn't react to the CSS - either inline or in the head. It's still in a really big, ugly font.
Is there some trick to get that working? The rest works perfectly :)
-
Hey Stevie,
I don't understand... can you elaborate a bit? I put the HTML within the trigger itself. If you want to add styling to a comment, I'd suggest using markdown for that. But I don't 100% understand what you're asking. You can email me if that's helpful. http://benlucier.com/contact/ (sorry for the link, I don't like to put my email in public forums for obvious reasons)
-
Ben: Thank you. I really enjoyed this tip and I am using your suggested template.
-
Thanks, Ben. I adapted this one for our Zendesk email template as well. I needed alternate social buttons (LinkedIn and G+ are more relevant to us) so I grabbed these and added them. No sweat.
-
This worked out great but it has created one problem for me. I receive emails when customers leave a comment with their feedback. With the default template I can easily click the link which takes me to the ticket to see the comment. Now that I've modified the email template the emails I receive no longer have a link or tell me what ticket they are associated with. The email subject is still the same with the reference to the ticket in brackets.
Is there a way to either include the link for these feedback emails so I can easily launch the ticket? Or is there a way to look up the ticket code (ie [XGWM-FKFW]) in order to determine which ticket the feedback is regarding?
-
Thanks to Zendesk CS I realized I just need to update the trigger. All is good now.
-
Oh, glad to hear it! Thanks for reporting back.
-
Ben,
Thank you for this, was a really nice starting place for us customizing the emails from Zendesk! Thank you for sharing.
-
When I click on this:
, I get an error with this "We cannot complete this request, remote data was invalid"
-
Hi Mark,
I'm creating a ticket for you so we can troubleshoot further. I'll see you in that ticket shortly!
-
** DISREGARD ** I had to change the properties of the file to be able to open in Notepad++ for editing. That worked.
This may be a dumb question, but when I open that template it opens right into Chrome and is not easy to work with. I don't easily have the code I need to paste into the HTML template. Is there another file or another way for me to open this file?
Thanks!
-
Hey Sarah! I'm glad you got it figured out!
-
Where are you customizing the HTML before pasting it in Zendesk? Can someone send step by step instructions on how to do this?
-
Hi Jamey, check out our documentation on Customizing your email templates.
Let us know if that helps!
-
Jennifer, I have looked at Customizing your email templates. It does not provide a step-by-step process for adding colors, images, a header, etc. I am referring this post and how Ben was able to setup his html email template. Did he use an html editor then paste it in Zendesk?
-
Oh, gotcha, Jamey. Sorry, I don't know about that.
I've pinged Ben to see if he can reply, but he hasn't been around in a very long time, so I'm not sure if he'll pop in or not.
If not, maybe someone else in the community knows the answer. I know a lot of users have implemented this very popular tip.
Thanks!
-
I used an html editor then pasted in Zendesk, so that worked. I still would like to see how to add a color banner & social media icons that link to our social media pages.
-
Hey Jamey -
There are several members in our community that know a lot about customizations (@Trapta, @Wes Drury, and @CustomSupportTheme, to name a few) who should be able to weigh in on this and give some recommendations. I'll try to ping them and see if I can get them in here to help you out.
-
Hi Jamey, yes, it's much easier if you are using HTML editors like Sublime Text, for instance. Here is a screenshot of part of the code that refers to social media links: https://cl.ly/mHxm
To add social media icons or banner, you first need to upload them. You can use Help Center for that purpose. Go to edit your help center and chose assets tab, like on this prt scr https://cl.ly/mIXj
When the images are uploaded, you should grab the links to it and change it in the code:
- change src="./social-twitter.png"
- to src="you_img_new_full_url"Hope this helps!
Vlad -
Thanks for helping, Vlad. That's great info.
Jamey, does that help you?
-
Yes, that helps. Thanks.
댓글을 남기려면 로그인하세요.
25 댓글