Since you may have multiple teams with different goals and daily tasks, such as sales, marketing, customer service, finance, legal, and tech — you may want to customize their messaging process independently, and you can, thanks to multiple email templates.
What is an email template?
An email template is one of the most important ways to personalize your communication with your recipients. It gives your HelpDesk messages an aesthetic and branded look that enhances your credibility.
Currently, by default, customers see your emails in text form (plain text).
Enriching your emails with a logo, footer, or personalized custom variables like subject can affect how customers perceive your business.
Note that email templates only affect the visual appearance of your messages. The content of the message will be the same as your responses sent using HelpDesk. If you want to create pre-defined messages to save your time on sending similar answers, read about canned responses.
You can find an email template in the “Settings” section in the “Email template” category.
Here, you can use four actions within the email template:
- Edit - allowing you to edit the selected email template.
- Duplicate - allowing you to duplicate the selected email template.
- Set as default - allowing you to set the selected email template as the default. All teams without a specific email template assigned will use this email template during the reply process.
- Delete - allowing you to delete the selected email template.
Creating an email template
To create your email template, click on the “Create email template” button. You’ll see an email template editor that will allow you to create your own email template on the spot.
First, name your email template, for example, general topics, first-line support, second-line support, invoices, sales pitches, and so on.
Next, use the drop-down menu to select the teams that will use this email template during the replying process.
Finally, if you’re using the Enterprise solution, you can decide whether you want to send messages with a HelpDesk label.
When you’re done with this part, the left side of your editor should be filled with basic information and look like this:
Then, you must prepare the HTML and the plain text versions of your email template.
In the HTML section, edit the code using the built-in editor that can recognize the code syntax. Editing the plain text version is easier and requires only adding the “Message” variable.
Remember to use the required “Message” variable for both the HTML and the plain text version. See more information on the email template variables.
How to prepare an HTML version
The current implementation allows for the freedom to do so, but remember that preparing this type of template, especially in the HTML version, is a task for someone with the right skills. Ask a developer for help. You can try to edit the template provided by HelpDesk, but you’ll want to be aware of the changes being made at this stage.
For your convenience, we’ve prepared an example HTML template below.
Just copy and paste the code into the editor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="x-apple-disable-message-reformatting">
<title>{{ticket.subject}}</title>
<style type="text/css" rel="stylesheet" media="all">
body {
width: 100% !important;
height: 100%;
margin: 0 auto;
line-height: 1.5em;
font-size: 16px;
background-color: #f3f7f9;
color: #74787e;
-webkit-text-size-adjust: none;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
box-sizing: border-box;
}
p a,
h2 a,
h1 a,
h3 a {
color: #3869d4;
}
td {
word-break: break-word;
}
.email-content {
width: 100%;
margin: 0;
padding: 0;
-premailer-width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
}
/* Masthead ----------------------- */
.email-masthead {
padding: 25px 25px;
text-align: center;
background-color: #f3f7f9;
}
.email-masthead_name {
font-face: Verdana;
font-size: 22px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
/* Body ----------------------- */
.email-body {
width: 100%;
margin: 0;
padding: 0;
-premailer-width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
background-color: #f3f7f9;
}
.email-body_inner {
width: 570px;
margin: 0 auto;
padding: 0;
-premailer-width: 300px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
background-color: #ffffff;
}
.email-body_inner table td {
text-align: center;
font-size: 14px;
white-space: nowrap;
}
.history-email {
border-bottom: 1px #ccc solid;
}
.agent-email {
background-color: #eafaf1 !important;
}
.header {
width: 100%;
margin: 0;
padding: 1em 0;
}
.header p {
width: 570px;
-premailer-width: 570px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
font-size: 80%;
font-weight: 700;
color: #666;
letter-spacing: 1px;
}
.content-cell {
padding: 35px;
}
h1 {
margin-top: 0;
color: #000000;
font-size: 18px;
font-weight: bold;
text-align: left;
}
h2 {
margin-top: 0;
color: #000;
font-size: 16px;
font-weight: bold;
text-align: left;
}
h4 {
font-size: 12px;
text-transform: uppercase;
font-weight: 400;
color: #4d4d4d;
margin: 0;
}
.attachments-list {
margin: 0;
padding: 0;
list-style: none;
}
.attachments-list li {
font-size: 12px;
padding: 0;
margin: 0;
}
p {
margin-top: 0;
color: #000000;
font-size: 16px;
line-height: 1.5em;
text-align: left;
}
p.center {
text-align: center;
}
.history-date {
font-size: 75%;
margin-bottom: -1.5em;
text-align: right;
color: #666;
}
@media (max-width: 570px) {
.email-body_inner {
width: 300px;
margin: 0 auto;
padding: 0;
-premailer-width: 300px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
background-color: #ffffff;
}
.header p {
width: 300px;
margin: 0 auto;
padding: 0;
-premailer-width: 300px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
}
p {
margin-top: 0;
color: #000000;
font-size: 14px;
line-height: 1.5em;
text-align: left;
}
body {
font-size: 14px;
}
}
</style>
</head>
<body>
<table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table
class="email-content"
width="100%"
cellpadding="0"
cellspacing="0"
>
<tr>
<td class="email-masthead">
<a href="https://helpdesk.com/" class="email-masthead_name">
<img
src="https://cdn.helpdesk-static.com/mailing/logo.png"
width="192"
height="30"
alt="HelpDesk"
/>
</a>
</td>
</tr>
<tr>
<td
class="email-body"
width="100%"
cellpadding="0"
cellspacing="0"
>
<table
class="email-body_inner"
align="center"
width="570"
cellpadding="0"
cellspacing="0"
>
<tr>
<td class="content-cell">
<h1>Hi, {{ticket.requesterName}}!</h1>
<p>{{{message.html}}}</p>
</td>
</tr>
</table>
</td>
</tr>
{{#events.0}}
<tr>
<td class="header">
<p>Previous messages:</p>
</td>
</tr>
{{/events.0}}
{{#events}}
<tr>
<td class="email-body">
<table class="email-body_inner {{#author.isAgent}}agent-email{{/author.isAgent}} {{#author.isRule}}agent-email{{/author.isRule}} history-email">
<tr>
<td class="content-cell">
{{#author.isRule}}
<h2>Agent wrote:</h2>
{{/author.isRule}}
{{#author.isAgent}}
<h2>{{#author.name}}{{.}}{{/author.name}}{{^author.name}}{{author.email}}{{/author.name}} wrote:</h2>
{{/author.isAgent}}
{{#author.isClient}}
<h2>{{author.email}} wrote:</h2>
{{/author.isClient}}
<p>{{{message.textBr}}}</p>
{{#attachments.0}}
<h4>Attachments</h4>
<ul class="attachments-list">
{{/attachments.0}}
{{#attachments}}
<li><a href="{{url}}">{{name}}</a></li>
{{/attachments}}
{{#attachments.0}}
</ul>
{{/attachments.0}}
<p class="history-date">{{date.utcUS}}</p>
</td>
</tr>
</table>
</td>
</tr>
{{/events}}
</table>
</td>
</tr>
</table>
</body>
</html>
Using this template, your conversation history in the email will look like this:
Adding variables to the email template
There are several variables available to personalize your emails. In addition to the required “Message” variable mentioned above, there are several others.
Click on the “Add variable” drop-down menu to see the list of available variables.
Available email template variables
- Requester name - displays the name of the requester.
- Ticket ID - displays the ticket identification code.
- Agent name - displays the name of the agent assigned to the ticket.
- Subject - displays the subject of the ticket.
- Ticket history - displays conversation history in the email.
- People in the loop - displays the people who are added to the message as recipients.
To paste the variable into the body of the email, select it from the list, and it’ll appear at your cursor position or at the end of the template when the editor isn’t active.
Conversation history in the email thread
Use the “Ticket history” variable to keep the history of your conversation in the email thread. Also, this option is useful when adding new people to the loop to see previous messages and get the right context.
You can customize your email template with the ticket history variable to your needs. Differentiate each part related to the recipient, agent, or automated message, and give your email template your style.
Check out how your customers see your messages.
Saving the email template
Saving changes to the template is very important. After confirming the saved changes, they will become active, and the customer will see the new template. To confirm the changes, click “Create email template” on the bar that appears at the bottom of the screen.
Click “Cancel” to discard the changes and return to the previous template.
The “Email template status” function informs us whether the template is complete and checks it on an ongoing basis. When it shows a status other than “OK ✅,” it means that you have to add the appropriate variable to the template.
Currently, the required variable is “Message” for HTML and plain text.
What will your template look like?
Once you have prepared an HTML and text version of your template, you can test it and see how it looks in two ways: using the email template preview or sending a test email template to a specific email address.
Using the email template preview
Use the “Preview” switch to see the look of the final email template in desktop and mobile versions. You can view the HTML version and plain text there.
It’s worth mentioning that browsers may sometimes display the content of this type of template differently. Because of that, it’s worth using the email template testing option.
Sending a test email template
You can also send a test to specific email addresses to see the final look of your email template in the inbox.
To test the template in the mail provider inbox, you need to provide the email addresses to which the test will be sent. An advantage of this test is the ability to add multiple emails after the comma.
Changing the time stamp (time zones) in the ticket history
If you want to send a conversation history with a time zone other than UTC, edit your email template and change the date.utcUS to date.ownerUS. The UTC time zone will change to the time zone of the person who created the HelpDesk license by automatically retrieving this information from their web browser.
If you have questions, use the chat and ask us.