HTML Email Template¶
Example HTML email template, with support for an image and action link
<!doctype html>
<html lang="{{alert.server.language}}" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title> {{ alert.title }} </title>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
p {
display: block;
margin: 13px 0;
}
</style>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" rel="stylesheet" type="text/css">
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}
</style>
<style type="text/css">
@media only screen and (max-width:480px) {
table.mj-full-width-mobile {
width: 100% !important;
}
td.mj-full-width-mobile {
width: auto !important;
}
}
</style>
<style type="text/css">
a,
span,
td,
th {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.footer-link {
color: #5B9EFF !important;
}
}
</style>
</head>
<body style="background-color:#038fc7;">
<div
style="display:none;font-size:1px;color:#038fc7;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
{{ alert.preheader }}͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌
</div>
<div style="background-color:#038fc7;">
<!--[if mso | IE]>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
width="100%">
<tr>
<td style="font-size:0px;word-break:break-word;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="20" style="vertical-align:top;height:20px;">
<![endif]-->
<div style="height:20px;"> </div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- subheader -->
<!--[if mso | IE]>
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="background:#54595f;background-color:#038fc7;margin:0px auto;border-radius:4px 4px 0 0;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#038fc7;background-color:#038fc7;width:100%;border-radius:4px 4px 0 0;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" width="600px"
>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
</td>
</tr>
<tr>
<td style="font-size:0px;word-break:break-word;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="20" style="vertical-align:top;height:20px;">
<![endif]-->
<div style="height:20px;"> </div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<img alt="Home Assistant"
src="data:image/png;base64,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"/>
<div
style="font-family:Roboto, Helvetica, Arial, sans-serif;font-size:24px;font-weight:400;line-height:30px;text-align:center;color:#ffffff;">
<h1 style="margin: 0; font-size: 24px; line-height: normal; font-weight: 400;">
{{ alert.subheading }}</h1>
</div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="background:#54595f;background-color:#038fc7;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#038fc7;background-color:#038fc7;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0 20px;text-align:center;">
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td
class="" width="600px"
>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:560px;" width="560"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div
style="background:#FF5121;background-color:#FF5121;margin:0px auto;border-radius:4px;max-width:560px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#FF5121;background-color:#FF5121;width:100%;border-radius:4px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:5px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:550px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div
style="font-family:Roboto, Helvetica, Arial, sans-serif;font-size:24px;font-weight:400;line-height:30px;text-align:left;color:#ffffff;">
<p class="date" style="margin: 0; margin-bottom: 5px; font-size: 16px;">{{ alert.priority | capitalize
}}</p>
<h2 style="margin: 0; font-size: 20px; font-weight: 300; line-height: 24px;">{{
alert.title or "Home Asssistant Notification"}}</h2>
</div>
</td>
</tr>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div
style="font-family:Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:20px;text-align:left;color:#ffffff;">
<p style="margin: 0;" class="alert_message">{{ alert.message }}</p>
</div>
</td>
</tr>
{% if alert.action_url is not none %}
<tr>
<td align="right" vertical-align="middle"
style="font-size:0px;padding:10px 25px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="border-collapse:separate;line-height:100%;">
<tr>
<td align="center" bgcolor="#ffffff" role="presentation"
style="border:none;border-radius:3px;cursor:auto;mso-padding-alt:10px 25px;background:#ffffff;" role="button"
valign="middle">
<a href="{{ alert.action_url }}"
style="display: inline-block; background: #ffffff; color: #FF5121; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 120%; margin: 0; text-decoration: none; text-transform: none; padding: 10px 25px; mso-padding-alt: 0px; border-radius: 3px;"
class="alert_action"
target="_blank">{{ alert.action_url_title }}</a>
</td>
</tr>
</table>
</td>
</tr>
{% endif %}
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td
class="" width="600px"
>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:560px;" width="560"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:560px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:560px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td style="font-size:0px;word-break:break-word;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="20" style="vertical-align:top;height:20px;">
<![endif]-->
<div style="height:20px;"> </div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- subfooter -->
<!--[if mso | IE]>
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="background:#54595f;background-color:#038fc7;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#038fc7;background-color:#038fc7;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" width="600px"
>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
style="vertical-align:top;" width="100%">
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
{% if alert.img is not none %}
<a href="{{alert.img.url}}">
<img
width="550"
alt="{{ alert.img.desc }}"
src="{{ alert.img.url }}"/>
</a>
{% endif %}
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!-- Footer -->
<!--[if mso | IE]>
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="background:#ffffff;background-color:#038fc7;margin:0px auto;border-radius:0 0 4px 4px;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation"
style="background:#ffffff;background-color:#ffffff;width:100%;border-radius:0 0 4px 4px;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
width="100%">
<tr>
<td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div
style="font-family:Roboto, Helvetica, Arial, sans-serif;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#93999f;">
Web: <a class="footer-link" href="{{ alert.server.internal_url }}"
style="color: #2e58ff; text-decoration: none;">{{ alert.server.name }}</a></div>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<table
align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600"
>
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td
class="" style="vertical-align:top;width:600px;"
>
<![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix"
style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;"
width="100%">
<tr>
<td style="font-size:0px;word-break:break-word;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td height="1" style="vertical-align:top;height:1px;">
<![endif]-->
<div style="height:1px;"> </div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</div>
</body>
</html>