Email template

Rafal Kloc
5 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.

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

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.

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 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:

Email template example

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

Automated rules

What are automated rules? Automated rules help you to create automatic workflows that will speed up your work. There are four rules available.

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

14-day free trial Easy setup

Discover our other products