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
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.
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 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: 14px;
background-color: #f3f7f9;
color: #74787e;
-webkit-text-size-adjust: none;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
box-sizing: border-box;
}
p,
ul,
ol,
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: 300px;
margin: 0 auto;
padding: 0;
-premailer-width: 300px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
background-color: #ffffff;
}
.content-cell {
padding: 35px;
}
h1 {
margin-top: 0;
color: #000000;
font-size: 18px;
font-weight: bold;
text-align: left;
}
p {
margin-top: 0;
color: #000000;
font-size: 14px;
line-height: 1.5em;
text-align: left;
}
p.center {
text-align: center;
}
@media (min-width: 570px) {
.email-body_inner {
width: 570px;
margin: 0 auto;
padding: 0;
-premailer-width: 570px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
background-color: #ffffff;
}
p {
margin-top: 0;
color: #000000;
font-size: 16px;
line-height: 1.5em;
text-align: left;
}
body {
font-size: 16px;
}
}
</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>
</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.