- Product launch
- and Promotional, Announcement
Product Update Changelog email template
A SaaS release email for a new version: version eyebrow, app screenshot, changelog items tagged New, Improved and Fixed, plus a feature spotlight.
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>Product Update Changelog</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:#0b0e16!important;}
.ete-content{background-color:#131826!important;}
.ete-text{color:#d3d9e8!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#8f99b3!important;}
.ete-link{color:#8ea6ff!important;}
.ete-border{border-color:#252c3f!important;}
.ete-panel{background-color:#1a2031!important;border-color:#252c3f!important;}
.ete-btn{background-color:#5b7cff!important;border-color:#5b7cff!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#5b7cff!important;}
.ete-btn-outline-text{color:#5b7cff!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:#d3d9e8!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#8f99b3!important;}
[data-ogsc] .ete-link{color:#8ea6ff!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0b0e16!important;}
[data-ogsb] .ete-content{background-color:#131826!important;}
[data-ogsb] .ete-panel{background-color:#1a2031!important;border-color:#252c3f!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f1f3f6;">
<!-- 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;">Timeline view, search that is twice as fast and 14 bug fixes. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f1f3f6;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="640" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="640" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:640px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;border-radius:12px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="left" class="ete-px" style="padding:28px 32px 20px;"><span class="ete-heading" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#111a33;">Tasklane</span><div class="ete-muted" style="padding-top:6px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:11px;line-height:16px;letter-spacing:2px;text-transform:uppercase;color:#6e7790;">Release notes</div></td></tr>
<tr><td align="left" class="ete-px" style="padding:40px 32px;"><p style="margin:0 0 12px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#2f5bff;text-align:left;">Version 4.2 is live</p><h1 class="ete-heading ete-h1" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;line-height:40px;font-weight:700;color:#111a33;text-align:left;mso-line-height-rule:exactly;">Timelines, faster search and 14 fixes</h1><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:17px;line-height:27px;color:#3b4256;padding-top:14px;text-align:left;">Plan your weeks on a timeline, find any task in a blink, and enjoy a calmer app. Everything is already in your workspace.</p></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/tasklane-board.png" alt="The Tasklane app with a sidebar and three columns of colored task cards" width="576" height="307" class="ete-fluid" style="display:block;width:576px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;border-radius:12px;"></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><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:#111a33;text-align:left;mso-line-height-rule:exactly;">What changed</h2></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:24px;color:#3b4256;text-align:left;"><b>NEW</b>, Timeline view for every project.<br>
<b>NEW</b>, Recurring tasks can now skip weekends.<br>
<b>IMPROVED</b>, Search is twice as fast in big workspaces.<br>
<b>IMPROVED</b>, Dark mode has better contrast on cards.</p></td></tr>
<tr><td class="ete-px" style="padding:12px 20px 0;"><div dir="rtl" style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;"><!--[if mso]><table role="presentation" width="600" dir="rtl" cellpadding="0" cellspacing="0" border="0"><tr><td width="265" valign="middle"><![endif]--><div class="ete-stack" dir="ltr" style="display:inline-block;vertical-align:middle;min-width:44.16%;max-width:100%;width:44.16%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:flex-start;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 12px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/tasklane-timeline.png" alt="Colored bars on a timeline with a red line marking today" width="241" height="181" class="ete-fluid-cap" style="display:block;width:241px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"></td></tr></table></div><!--[if mso]></td><td width="335" valign="middle"><![endif]--><div class="ete-stack" dir="ltr" style="display:inline-block;vertical-align:middle;min-width:55.83%;max-width:100%;width:55.83%;width:calc((480px - 100%) * 480);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 12px 16px;"><h3 class="ete-heading" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#111a33;text-align:left;mso-line-height-rule:exactly;">Spotlight: Timeline view</h3><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:24px;color:#3b4256;padding-top:8px;">Drag tasks across days, see what overlaps, and spot gaps before they become late nights.</p><div style="padding-top:16px;"><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/app/timeline" style="height:48px;v-text-anchor:middle;width:199px;" arcsize="17%" strokecolor="#2f5bff" fillcolor="#2f5bff"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Open a timeline</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/app/timeline" style="display:inline-block;background-color:#2f5bff;border:1px solid #2f5bff;line-height:48px;border-radius:8px;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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-text" style="color:#ffffff;">Open a timeline</span></a><!--<![endif]--></td></tr></table></div></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:15px;line-height:24px;color:#3b4256;text-align:left;"><b>FIXED</b>, 14 bugs, including lost drafts on slow networks and wrong due dates across time zones.</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/changelog/4-2" style="height:48px;v-text-anchor:middle;width:271px;" arcsize="17%" strokecolor="#2f5bff" fillcolor="#2f5bff"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Read the full changelog</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/changelog/4-2" style="display:inline-block;background-color:#2f5bff;border:1px solid #2f5bff;line-height:48px;border-radius:8px;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 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-text" style="color:#ffffff;">Read the full changelog</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#6e7790;line-height:20px;text-align:left;"><strong>Tasklane Software</strong><br>300 Harbor Street, Suite 12, Seattle, WA 98101</p><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#6e7790;line-height:20px;text-align:left;padding-top:10px;">You get this email because you have a Tasklane account. Release notes come out once a month.</p><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:13px;line-height:21px;color:#6e7790;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#6e7790;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:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:12px;line-height:18px;color:#6e7790;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#6e7790;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Colorlib Email Templates by Colorlib, MIT license.
About this template
Software teams can send this email when a new version ships. It works for project tools, analytics apps and any product with regular releases. Light grey with electric blue keeps it clean and technical.
The email names the version at the top and sums up the release in one headline. A framed screenshot drawing shows the product, then the changes are listed in short lines tagged New, Improved and Fixed, so readers find what matters to them fast. A side-by-side spotlight explains the biggest feature with its own small picture and a try-it button. A final button links to the full changelog.
Lead with what users can do now, not what the team built. Real screenshots are best, cropped tight on the new part. Send it a day after release, once support has confirmed nothing is on fire.
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
- Logo
- Version headline
- App screenshot
- Tagged changelog
- Feature spotlight
- Fixes
- Full changelog button
- Footer
Subject line ideas
- Tasklane 4.2: timelines are here
- New in 4.2: timelines, faster search, 14 fixes
- What changed in Tasklane this month
Preview text idea
Timeline view, search that is twice as fast and 14 bug fixes.