Email template

Rafal Kloc
8 min read
updated: Jun 22, 2020

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

Email message in Gmail.

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.

You can only create one email template for your license, so there is no option to differentiate it by teams.
You can only create one email template for your license, so there is no option to differentiate it by teams.

The email template can be found in the Settings -> Email template.

Email template settings.

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.

Remember to use the required “Message” parameter for both the HTML and the plain text version.
Remember to use the required “Message” parameter for both the HTML and the plain text version.

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.

Email template parameters.

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.

The email template is editable only for the Team plan and higher. If you’re already in the Starter plan or have downgraded to this plan, you won’t be able to manage the email template. You’ll still have the basic template look available.
The email template is editable only for the Team plan and higher. If you’re already in the Starter plan or have downgraded to this plan, you won’t be able to manage the email template. You’ll still have the basic template look available.

Managing the visibility of ticket history in the licenses created:

  1. Before November 23rd, 2020

If you’re in the Starter plan, please contact us so that we can include the “Ticket history” parameter in your email template, as it’s not manageable in your plan.

If you’re in the Team plan or higher, you can add the “Ticket history” parameter to your email template to set up the ticket history.

  1. 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.

Saving email 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.

Email template preview.

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.

Sending email template test.

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.

Email template validation.

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:

Example of an email template.

If you have questions, use the chat and ask us.

Was this article helpful?

Got it!

Thanks for your feedback.

Thank you!

We’re happy to help.

RELATED ARTICLES

How do my clients see the messages sent from HelpDesk?

HelpDesk converts your emails into tickets. However, the messages sent from HelpDesk look like standard emails.

Read the article

Inline images

Add images to your messages and signature to create brand identity and help your customers better.

Read the article

Try HelpDesk today

Invite your team and explore HelpDesk features for free

Signup hand
14-day free trial Easy setup

Discover our other products