Template examples

Email template examples that you can use to customize your email templates.

PreviousCustom email templates NextIncidents & Maintenance

Last updated 7 months ago

Template examples

Email template examples that you can use to customize your email templates.

Use this HTML files to customize your email template in order to include a company logo, add your business address or otherwise to modify the looks to suit your branding.

Configure your logo

In order to configure your company logo just replace the image under the .header class.

<div class="header">
  <img src="https://www.statuspal.io/images/acme_inc_logo.svg" alt="Company logo" class="logo">
 </div>

Configure your company address

Simply override the generic address found in status-notification-email-template.html and confirmation-email-template.html:

<!-- Company Address Information -->
<tr class="aligncenter content-block">
  <td>YourCompany Inc, 26985 Brighton Lane, Lake Forest, CA, United States</td>
</tr>
<!-- Company Address Information -->

Layout template example

<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>
      /* -------------------------------------
          GLOBAL
          A very basic CSS reset
      ------------------------------------- */
      * {
        margin: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        box-sizing: border-box;
        font-size: 14px;
      }

      img {
        max-width: 100%;
      }

      body {
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        width: 100% !important;
        height: 100%;
        line-height: 1.6em;
        /* 1.6em * 14px = 22.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
        /*line-height: 22px;*/
      }

      /* Let's make sure all tables have defaults */
      table td {
        vertical-align: top;
      }

      /* -------------------------------------
          BODY & CONTAINER
      ------------------------------------- */
      body {
        background-color: #f6f6f6;
      }

      .body-wrap {
        background-color: #f6f6f6;
        width: 100%;
      }

      .container {
        display: block !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        /* makes it centered */
        clear: both !important;
      }

      .content {
        max-width: 600px;
        margin: 0 auto;
        display: block;
        padding: 20px;
      }

      /* -------------------------------------
          HEADER, FOOTER, MAIN
      ------------------------------------- */
      .main {
        background-color: #fff;
        border: 1px solid #e9e9e9;
        border-radius: 3px;
      }

      .content-wrap {
        padding: 20px;
      }

      .content-block {
        padding: 0 0 20px;
      }

      .header {
        width: 100%;
        padding-top: 20px;
        text-align: center;
      }

      .header td {
        color: #999;
      }

      .logo {
        max-width: 300px;
      }

      .footer {
        width: 100%;
        clear: both;
        color: #999;
        padding: 20px;
      }

      .footer p, .footer a, .footer td {
        color: #999;
        font-size: 12px;
      }

      /* -------------------------------------
          TYPOGRAPHY
      ------------------------------------- */
      h1, h2, h3 {
        font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        color: #000;
        margin: 40px 0 0;
        line-height: 1.2em;
        font-weight: 400;
      }

      h1 {
        font-size: 32px;
        font-weight: 500;
        /* 1.2em * 32px = 38.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
        /*line-height: 38px;*/
      }

      h2 {
        font-size: 24px;
        /* 1.2em * 24px = 28.8px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
        /*line-height: 29px;*/
      }

      h3 {
        font-size: 18px;
        /* 1.2em * 18px = 21.6px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
        /*line-height: 22px;*/
      }

      h4 {
        font-size: 14px;
        font-weight: 600;
      }

      p, ul, ol {
        margin-bottom: 10px;
        font-weight: normal;
      }

      p li, ul li, ol li {
        margin-left: 5px;
        list-style-position: inside;
      }

      /* -------------------------------------
          LINKS & BUTTONS
      ------------------------------------- */
      a {
        color: #348eda;
        text-decoration: underline;
      }

      .btn-primary {
        text-decoration: none;
        color: #FFF;
        background-color: #348eda;
        border: solid #348eda;
        border-width: 8px 16px;
        line-height: 2em;
        /* 2em * 14px = 28px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
        /*line-height: 28px;*/
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        border-radius: 5px;
        text-transform: capitalize;
      }

      .powered-by {
        margin-left: 30px;
        font-size: 12px;
      }

      /* -------------------------------------
          OTHER STYLES THAT MIGHT BE USEFUL
      ------------------------------------- */
      .last {
        margin-bottom: 0;
      }

      .first {
        margin-top: 0;
      }

      .aligncenter {
        text-align: center;
      }

      .alignright {
        text-align: right;
      }

      .alignleft {
        text-align: left;
      }

      .clear {
        clear: both;
      }

      /* -------------------------------------
          ALERTS
          Change the class depending on warning email, good email or bad email
      ------------------------------------- */
      .alert {
        font-size: 16px;
        color: #fff;
        font-weight: 500;
        padding: 20px;
        text-align: center;
        border-radius: 3px 3px 0 0;
      }

      .alert a {
        color: #fff;
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
      }

      .alert b {
        font-size: 16px;
      }

      .alert.alert-warning {
        background-color: #FF9F00;
      }

      .alert.alert-bad {
        background-color: #D0021B;
      }

      .alert.alert-good {
        background-color: #68B90F;
      }

      .alert.alert-ok {
        background-color: #2f81ff;
      }

      .alert.alert-info {
        background-color: #48CBA5;
      }

      /* -------------------------------------
          SERVICES
      ------------------------------------- */
      .services {
        color: #808080;
        text-wrap: pretty;
        word-wrap: break-word;
      }

      .services span.service{
        display: inline-block;
        white-space: nowrap;
        border: 1px solid rgb(0, 132, 255);
        padding: 1px 3px;
        margin-bottom: 5px;
        border-radius: 3px;
      }

      /* -------------------------------------
          RESPONSIVE AND MOBILE FRIENDLY STYLES
      ------------------------------------- */
      @media only screen and (max-width: 640px) {
        body {
          padding: 0 !important;
        }

        h1, h2, h3, h4 {
          font-weight: 800 !important;
          margin: 20px 0 5px !important;
        }

        h1 {
          font-size: 22px !important;
        }

        h2 {
          font-size: 18px !important;
        }

        h3 {
          font-size: 16px !important;
        }

        .container {
          padding: 0 !important;
          width: 100% !important;
        }

        .content {
          padding: 0 !important;
        }

        .content-wrap {
          padding: 10px !important;
        }
      }

      /*# sourceMappingURL=styles.css.map */
    </style>

  </head>
  <body itemscope itemtype="http://schema.org/EmailMessage">
    {{ content }}
  </body>
</html>

Content template examples

Confirmation template example

<table class="body-wrap">
  <tr>
    <td></td>
    <td class="container" width="600">
      <div class="header">
        <img src="https://www.statuspal.io/images/acme_inc_logo.svg" alt="Company logo" class="logo">
      </div>
      <div class="content">
        <table class="main" width="100%" cellpadding="0" cellspacing="0" itemprop="action" itemscope itemtype="http://schema.org/ConfirmAction">
          <tr>
            <td class="content-wrap">
              <meta itemprop="name" content="Confirm Email"/>
              <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="content-block">
                    <p>
                      {{ t_body_confirm_p }}.
                    </p>
                    <p>
                      <a href="{{ subscription.do_confirm_url }}" class="btn-primary" itemprop="url">
                        {{ t_body_confirm_p_action }}
                      </a>
                    </p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <div class="footer">
          <table width="100%">
            <tr>
              <td class="aligncenter content-block">
                <a href="{{ unsubscribe_url }}">{{ t_body_unsubscribe_p_action }}</a>
                {{ t_body_unsubscribe_p }}
                <span class="powered-by">Powered by
                  <a href="https://www.statuspal.io?utm_medium=email&amp;utm_source=status-update&amp;company={{ status_page.name }}">StatusPal</a>
                </span>
              </td>
            </tr>
            <!-- Company Address Information -->
            <tr class="aligncenter content-block">
              <td>YourCompany Inc, 26985 Brighton Lane, Lake Forest, CA, United States</td>
            </tr>
            <!-- Company Address Information -->
          </table>
        </div>
      </div>
    </td>
    <td></td>
  </tr>
</table>

Status notification template example

<table class="body-wrap">
  <tr>
    <td></td>
    <td class="container" width="600">
      <div class="header">
        <table width="100%">
          <tr>
            <td class="aligncenter">
              {{ status_page.name }} {{ incident.type_name }} {{ t_update }}
            </td>
          </tr>
        </table>
        <br />
        <img src="https://www.statuspal.io/images/acme_inc_logo.svg" alt="Company logo" class="logo">
      </div>
      <div class="content">
        <table class="main" width="100%" cellpadding="0" cellspacing="0">
          <tr>
            <td class="alert alert-{{ incident.type_color_class }}">
              <b>[{{ t_update }}]</b> {{ incident.title }}
            </td>
          </tr>
          <tr>
            <td class="content-wrap">
              <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="content-block">
                    {{ maintenance_information }}

                    <p>
                      {{ activity.description }}
                    </p>
                    <br />

                    <p>
                      <b>{{ t_affected_services }}:</b>
                      {{ services }}
                    </p>
                    <br />

                    <a href="{{ incident.url }}" class="btn-primary" itemprop="url">
                      {{ t_open_report }}
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
        <div class="footer">
          <table width="100%">
            <tr>
              <td class="aligncenter content-block">
                <a href="{{ subscription.manage_url }}">{{ t_manage_subscription }}</a>
                <span class="powered-by">Powered by
                  <a href="https://www.statuspal.io?utm_medium=email&amp;utm_source=status-update&amp;company={{ status_page.name }}">StatusPal</a>
                </span>
              </td>
            </tr>
            <!-- Company Address Information -->
            <tr class="aligncenter content-block">
              <td>YourCompany Inc, 26985 Brighton Lane, Lake Forest, CA, United States</td>
            </tr>
            <!-- Company Address Information -->
          </table>
        </div>
      </div>
    </td>
    <td></td>
  </tr>
</table>