Tip of the Week: Add a Custom Header to Your Support Emails

A few weeks ago, we discussed adding a custom image to your Zendesk Web Portal. In this tip, we’ll show you how to add a similar header to the emails you send out through your Zendesk.

As you know, your Zendesk comes ready with email integration. Using Triggers, your Zendesk can send out email updates for pretty much anything that happens within your support tickets and support workflow. Including some even minimal branding on that communication helps establish the legitimacy of your support communication, as well as adds a bit of polish.

As with the previous tip, it helps to understand some basic HTML and CSS before tackling these tasks.

The Default Email Template

When you sign up for a Zendesk account, you start with the default email template. Zendesk sends out HTML emails. You can see and change the HTML for this template by going to Mails and Domains page under your Account tab in the top navbar. It is, appropriately enough, labeled “HTML email template”.

So we know what we are working with, it is helpful to submit a test ticket to your Zendesk. If you are working with the default triggers (listed under Manage >> Trigger and mail notifications), submitting a test ticket will generate an email back to you.

NOTE: Make sure you use an email address different than the one you use to access your Zendesk account when testing this stuff. In a lot of cases, the default triggers will not generate emails if you submitted the ticket using your Zendesk account email – the idea being that you sent in the email, so you probably don’t need to be notified that you sent it.

For our tip, we want to add our company logo to the default email that is sent out, as well as change the colors to match our brand.

Making the Changes

Back on the Mails and Domains page, we can start changing the HTML.

Adding the Logo

First, you’ll need to generate an appropriately sized image for your logo. Because a lot of email programs have variable width, it’s safe to stick to something under 600px or even smaller if you can.

We will upload to our server, or somewhere we can access it using a public URL. Once it’s uploaded, take the public URL and insert it on it’s own row in the header table. So if the original code looks like this:

<table width="100%">	<tr>    	<td style="font-size: 12px; font-weight: bold; color: #fff; line-height: 1.5em;font-family: Helvetica, Arial, sans-serif; width: 100%;text-align: center;background: #98c332; padding:8px; margin:4px">          {{header}}        </td>	</tr></table>

We will add our new row right underneath the opening “table” tag.

<table width="100%">	<tr><img src="http://mattlatmatt.com/shared/totw-email-header-export.png" /></tr>	<tr>    	<td style="font-size: 12px; font-weight: bold; color: #fff; line-height: 1.5em;font-family: Helvetica, Arial, sans-serif; width: 100%;text-align: center;background: #98c332; padding:8px; margin:4px">          {{header}}        </td>	</tr></table>

Hit Update Account Settings at the bottom of the page to save your changes.

To check the change, go back to your test ticket and add an update. Again, using the default triggers, this will send out an email notification back to you.

So our logo looks good, but the green color doesn’t fit with our brand. Let’s change that.

Changing Email Colors

Back to our Zendesk account Mails and Domains page. The color is controlled within the background attribute of the “td” tag.

The number “#98c332” is called a hex color. We need to change what’s there — which makes it green — to “#CC9933”, a color from our branding. There is one section in the template which controls the top color and one that controls the bottom. We’ll make sure and change them both. So now the code looks like this:

<td style="font-size: 12px; font-weight: bold; color: #fff; line-height: 1.5em;font-family: Helvetica, Arial, sans-serif; width: 100%;text-align: center;background: #CC9933; padding:8px; margin:4px"></td>

We will update our Account Settings again, and then update our test ticket to send out another email update.

You can take those principles now and take it even further if you like. Just make sure you read the explanation of some of the Zendesk tags in there like {{header}} and {{content}} as they affect what is actually sent out in your emails.