21

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:

ben_zendesk-html-template-default-example.gif

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:

Example Screenshot of HTML 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.

14 comments

  • 0

    This is awesome, Ben. Thanks for sharing with the community!

  • 0

    Great tip.  It looks way better than the generic layout, no offense Zendesk :)

  • 0

    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

  • 0

    Joseph, that looks great. Thanks for sharing!

  • 0

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

  • 0

    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)

  • 0

    Ben: Thank you. I really enjoyed this tip and I am using your suggested template. 

  • 0

    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. 

    http://zurb.com/playground/social-webicons

  • 0

    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?

  • 0

    Thanks to Zendesk CS I realized I just need to update the trigger. All is good now.

  • 0

    Oh, glad to hear it! Thanks for reporting back.

  • 0

    Ben, 

    Thank you for this, was a really nice starting place for us customizing the emails from Zendesk!  Thank you for sharing. 

  • 0

    When I click on this:  Example Screenshot of HTML template  

    , I get an error with this "We cannot complete this request, remote data was invalid"

  • 0

    Hi Mark, 

    I'm creating a ticket for you so we can troubleshoot further. I'll see you in that ticket shortly!

Please sign in to leave a comment.