Service Outage Status email template
A calm post-outage note: an amber band saying the problem is fixed, a numbered timeline of what happened, what comes next and a link to the full report.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Service Outage Status</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#11100c!important;}
.ete-content{background-color:#1a1913!important;}
.ete-text{color:#e3e1d8!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#a9a698!important;}
.ete-link{color:#f2c56d!important;}
.ete-border{border-color:#35332a!important;}
.ete-panel{background-color:#25241d!important;border-color:#35332a!important;}
.ete-btn{background-color:#f2b84b!important;border-color:#f2b84b!important;}
.ete-btn-text{color:#1a1913!important;}
.ete-btn-outline{border-color:#f2b84b!important;}
.ete-btn-outline-text{color:#f2b84b!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#e3e1d8!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#a9a698!important;}
[data-ogsc] .ete-link{color:#f2c56d!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#11100c!important;}
[data-ogsb] .ete-content{background-color:#1a1913!important;}
[data-ogsb] .ete-panel{background-color:#25241d!important;border-color:#35332a!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f4f2ec;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">The API errors from Tuesday morning are fixed. Here is what happened and what we are changing. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f4f2ec;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="left" class="ete-px" style="padding:40px 32px;background-color:#f2a93b;"><p style="margin:0 0 12px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#1c1505;text-align:left;">Resolved</p><h1 class="ete-h1" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;line-height:40px;font-weight:700;color:#1c1505;text-align:left;mso-line-height-rule:exactly;">Tuesday's API outage is over</h1><p class="" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:27px;color:#1c1505;padding-top:14px;text-align:left;">All services have been running normally since 10:42 am UTC. Requests during the outage may have failed, and you may need to retry them.</p></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><div style="padding-bottom:20px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#191812;text-align:left;mso-line-height-rule:exactly;">What happened</h2></div><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="48" valign="top" style="padding-right:16px;padding-bottom:20px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="32" height="32" style="width:32px;height:32px;background-color:#6d4a00;border-radius:50%;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:32px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#ffffff;">1</span></td></tr></table></td><td valign="top" style="padding-top:4px;padding-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#191812;">9:14 am: Errors begin</p><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3b3a34;padding-top:4px;">A routine database change locked a busy table, and API calls began to fail.</p></td></tr><tr><td width="48" valign="top" style="padding-right:16px;padding-bottom:20px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="32" height="32" style="width:32px;height:32px;background-color:#6d4a00;border-radius:50%;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:32px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#ffffff;">2</span></td></tr></table></td><td valign="top" style="padding-top:4px;padding-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#191812;">9:26 am: We find the cause</p><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3b3a34;padding-top:4px;">Our alerts fired and the on-call engineer traced the errors to that change.</p></td></tr><tr><td width="48" valign="top" style="padding-right:16px;padding-bottom:20px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="32" height="32" style="width:32px;height:32px;background-color:#6d4a00;border-radius:50%;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:32px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#ffffff;">3</span></td></tr></table></td><td valign="top" style="padding-top:4px;padding-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#191812;">10:05 am: We roll it back</p><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3b3a34;padding-top:4px;">Traffic moved to a standby database while we undid the change.</p></td></tr><tr><td width="48" valign="top" style="padding-right:16px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-btn" align="center" valign="middle" width="32" height="32" style="width:32px;height:32px;background-color:#6d4a00;border-radius:50%;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:32px;font-weight:700;color:#ffffff;text-align:center;mso-line-height-rule:exactly;"><span class="ete-btn-text" style="color:#ffffff;">4</span></td></tr></table></td><td valign="top" style="padding-top:4px;"><p class="ete-heading" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#191812;">10:42 am: Service is back</p><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3b3a34;padding-top:4px;">Error rates returned to normal and we kept watching for another hour.</p></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:26px;color:#3b3a34;text-align:left;"><b>What comes next.</b> Database changes like this one will now run in smaller steps and outside busy hours. We will also add an alert that fires sooner when a table locks.</p></td></tr>
<tr><td align="left" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/status/report" style="height:48px;v-text-anchor:middle;width:244px;" arcsize="6%" filled="f" strokeweight="2px" strokecolor="#6d4a00"><w:anchorlock/><center style="color:#6d4a00;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read the full report</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn-outline" href="https://example.com/status/report" style="display:inline-block;background-color:transparent;border:2px solid #6d4a00;line-height:44px;border-radius:3px;color:#6d4a00;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-outline-text" style="color:#6d4a00;">Read the full report</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 20px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="560" cellpadding="0" cellspacing="0" border="0"><tr><td width="280" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p class="ete-heading" style="margin:0 0 8px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#191812;">Status page</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6c6a60;line-height:20px;">Live state of every service.</p><p style="margin:0;padding-top:4px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a class="ete-link" href="https://example.com/status" style="color:#6c6a60;text-decoration:underline;">See current status</a></p></td></tr></table></div><!--[if mso]></td><td width="280" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((448px - 100%) * 448);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:12px 12px 8px;"><p class="ete-heading" style="margin:0 0 8px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:18px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#191812;">Need help?</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6c6a60;line-height:20px;">Our support team has the details.</p><p style="margin:0;padding-top:4px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:20px;"><a class="ete-link" href="https://example.com/support" style="color:#6c6a60;text-decoration:underline;">Open a ticket</a></p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6c6a60;line-height:20px;text-align:left;"><strong>Stackyard Cloud</strong><br>500 Harbor Way, Oakland, CA 94607</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6c6a60;line-height:20px;text-align:left;padding-top:10px;">You get this notice because your team uses Stackyard Cloud.</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#6c6a60;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#6c6a60;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#6c6a60;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#6c6a60;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
About this template
After an outage, customers want a straight account of what broke and when it stopped. This note gives them that without excuses. Stackyard Cloud is the sample provider.
An amber band opens the email with the current state in a short headline. Below it, a numbered timeline lists each step with its time, from the first failed request to the moment the service was back. One paragraph says what the team will change so this is less likely to happen again. An outline button opens the full report, and a two-column block links to the status page and to support.
Use the real times and your own plain words. Do not write that no data was lost unless you have checked. Send it soon after the fix, to the customers who were affected.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Amber status band
- Numbered timeline
- What comes next
- Report button
- Status and support links
- Footer
Subject line ideas
- Resolved: API errors on Tuesday morning
- What happened during Tuesday's outage
- Tuesday's outage: the timeline and our next steps
Preview text idea
The API errors from Tuesday morning are fixed. Here is what happened and what we are changing.