Template examples
Email template examples that you can use to customize your email templates.
Use this HTML files to customize your Statuspal status page 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://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" 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 -->Find more information at Custom email templates.
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;
}
.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: 10px 20px;
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;
}
/* -------------------------------------
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.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 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="content">
<div class="header">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" alt="Company logo" class="logo">
</div>
<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 }}
</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">
<img src="https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo1.png" 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 }}">
{{ status_page.name }} {{ incident.type_name }}
{{ t_update }}: {{ incident.title }}
</td>
</tr>
<tr>
<td class="content-wrap">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="content-block">
{{ maintenance_information }}
<p>
{{ t_affected_services }}:
{{ services }}
</p>
<br>
<p>
<b>
[{{ activity.activity_type_name }}]
</b>
{{ activity.description }}
</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>
</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>Last updated
