What is an email template?
An email template is one of the most important ways for you to personalize communication with your customer. It provides the visual appearance of the messages you send using HelpDesk. Currently, by default, customers see your emails in text form (plain text).
Enriching your emails with a logo, footer, or personalized custom parameters like subject can affect how customers perceive your company.
Note that the email template only affects the visual appearance of your messages. The content of the message will be the same as your responses sent via HelpDesk. If you want to create pre-defined messages to save your time on sending similar answers read about canned responses.
The email template can be found in the Settings -> Email template.
How to edit the email template
To fully use the email template, you need to prepare the HTML and the plain text versions. Both are required for the template to work. 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” parameter.
Can I add parameters to the template?
Yes, there are several parameters available to personalize your emails. In addition to the required “Message” parameter mentioned above, there are several others.
Available parameters:
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 the full history of conversation in the email
People in the loop - displays the people who are added to the message as recipients. Learn more about the “People in the loop”
To paste the parameter into the body of the email, select it from the list and click “Add.” The parameter will appear at the cursor position or at the end of the template when the editor is not active.
Conversation history in the email thread
Use the “Ticket history” parameter 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 parameter to your needs. Differentiate each part related to the recipient, agent, or automated message, and give your email template your style.
Managing the visibility of ticket history in the licenses created:
- Before November 23rd, 2020
If you’re on the Team plan or have an Enterprise solution, you can add the “Ticket history” parameter to your email template to set up the ticket history.
- After November 23rd, 2020
If you’ve created a new account after November 23rd, the “Ticket history” parameter is added to your email template by default
Check out how your customers see your messages.
How to save the 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 “Save changes” on the bar that appears at the bottom of the screen. Click “Cancel” to discard the changes and return to the previous template.
What does my template look like?
To see what the template looks like, use the “Preview” tab. 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 “Test” function available above the editor in the section description.
To test the template in the mail client, you must provide an email that the test will be sent to. An advantage of this test is the ability to add multiple emails after the comma.
The “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 parameter to the template. Currently, the required parameter is “Message” for HTML and plain text. In the case of the HTML version, paste it in (here). In the case of the plain text version, this is optional.
How to change the timestamp (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.
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 who has 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 have prepared an example HTML template below. Just copy and paste the code to 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" />
<title>{{ticket.subject}}</title>
<style type="text/css" rel="stylesheet" media="all">
body {
width: 100% !important;
height: 100%;
margin: 0;
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 tickets will look like this:
If you have questions, use the chat and ask us.