- Product launch
- and Promotional, Announcement
SaaS Feature Announcement email template
A SaaS feature launch email in violet and mint: a builder screen illustration, four new features with icons in two rows and a button to try them now.
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>SaaS Feature Announcement</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:#0d0b18!important;}
.ete-content{background-color:#16132a!important;}
.ete-text{color:#d7d3ea!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9893b4!important;}
.ete-link{color:#b6a6ff!important;}
.ete-border{border-color:#2c2748!important;}
.ete-panel{background-color:#1f1b38!important;border-color:#2c2748!important;}
.ete-btn{background-color:#8b6dff!important;border-color:#8b6dff!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#8b6dff!important;}
.ete-btn-outline-text{color:#8b6dff!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:#d7d3ea!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9893b4!important;}
[data-ogsc] .ete-link{color:#b6a6ff!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0d0b18!important;}
[data-ogsb] .ete-content{background-color:#16132a!important;}
[data-ogsb] .ete-panel{background-color:#1f1b38!important;border-color:#2c2748!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f2efff;">
<!-- 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;">Drag and drop sections, faster pages and two more updates are live. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f2efff;">
<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;border-radius:14px;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:'Trebuchet MS', Tahoma, sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#1d1640;">Pagewise</span></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:#6d4aff;text-align:left;">New release</p><h1 class="ete-heading ete-h1" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:32px;line-height:40px;font-weight:700;color:#1d1640;text-align:left;mso-line-height-rule:exactly;">Build pages by dragging sections</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:#3d3955;padding-top:14px;text-align:left;">Hi {{first_name}}, the editor got its biggest update this year. Drag a section, drop it in, done.</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/pagewise-hero.png" alt="Website editor window with a green block being dragged into a page by a cursor" width="536" height="286" class="ete-fluid" style="display:block;width:536px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;border-radius:14px;"></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#1d1640;text-align:left;mso-line-height-rule:exactly;">What is new</h2></td></tr>
<tr><td class="ete-px" style="padding:12px 22px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="556" cellpadding="0" cellspacing="0" border="0"><tr><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/pagewise-blocks.png" alt="Four square blocks icon" width="258" height="155" class="ete-fluid-cap" style="display:block;width:258px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"><div style="padding-top:14px;"><h3 class="ete-heading" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#1d1640;text-align:left;mso-line-height-rule:exactly;">Section library</h3></div><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:#3d3955;padding-top:6px;text-align:left;">Forty ready sections for pricing, teams and FAQs.</p></td></tr></table></div><!--[if mso]></td><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/pagewise-mobile.png" alt="Phone with a page layout icon" width="258" height="155" class="ete-fluid-cap" style="display:block;width:258px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"><div style="padding-top:14px;"><h3 class="ete-heading" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#1d1640;text-align:left;mso-line-height-rule:exactly;">Mobile preview</h3></div><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:#3d3955;padding-top:6px;text-align:left;">See and fix the phone view while you edit.</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td class="ete-px" style="padding:12px 22px 0;"><div style="font-size:0;text-align:left;"><!--[if mso]><table role="presentation" width="556" cellpadding="0" cellspacing="0" border="0"><tr><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/pagewise-speed.png" alt="Speed gauge icon" width="258" height="155" class="ete-fluid-cap" style="display:block;width:258px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"><div style="padding-top:14px;"><h3 class="ete-heading" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#1d1640;text-align:left;mso-line-height-rule:exactly;">Faster pages</h3></div><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:#3d3955;padding-top:6px;text-align:left;">Images now load as needed, so pages open up to 40% faster.</p></td></tr></table></div><!--[if mso]></td><td width="278" valign="top"><![endif]--><div class="ete-stack" style="display:inline-block;vertical-align:top;min-width:50%;max-width:100%;width:50%;width:calc((445px - 100%) * 445);font-size:16px;text-align:left;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 10px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/pagewise-forms.png" alt="Form with a check mark icon" width="258" height="155" class="ete-fluid-cap" style="display:block;width:258px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"><div style="padding-top:14px;"><h3 class="ete-heading" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#1d1640;text-align:left;mso-line-height-rule:exactly;">Smarter forms</h3></div><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:#3d3955;padding-top:6px;text-align:left;">Spam filter and file uploads built into every form.</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></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/editor" style="height:48px;v-text-anchor:middle;width:226px;" arcsize="21%" strokecolor="#6d4aff" fillcolor="#6d4aff"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Try the new editor</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/editor" style="display:inline-block;background-color:#6d4aff;border:1px solid #6d4aff;line-height:48px;border-radius:10px;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;">Try the new editor</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;font-size:14px;line-height:22px;color:#726d8c;text-align:left;">Want every detail? Read the <a class="ete-link" style="color:#5b37f0;text-decoration:underline;" href="https://example.com/changelog">full changelog</a>.</p></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:#726d8c;line-height:20px;text-align:left;"><strong>Pagewise Inc.</strong><br>500 Market Street, Floor 3, San Francisco, CA 94105</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:#726d8c;line-height:20px;text-align:left;padding-top:10px;">You get this email because you have a Pagewise account.</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:#726d8c;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#726d8c;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:#726d8c;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#726d8c;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
For software companies, website builders and app teams announcing a release with several improvements. It shows the product first and explains each change in a sentence or two.
A short headline panel with a New label starts the email, followed by a screen illustration of the editor with a block being dragged into place. Under a small heading, four features sit in two rows with a square icon, a name and a short benefit. A violet button invites users to try the update, and a muted line links to the full changelog for those who want every detail.
Lead each feature with what the user can now do, not with the technical name. Send it to active users first and to inactive ones a week later with a different subject. Tuesday or Wednesday mornings tend to get the most attention from busy teams.
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
- Headline with New label
- Builder screen illustration
- What is new heading
- Features row 1
- Features row 2
- Try it button
- Changelog link
- Footer
Subject line ideas
- New in Pagewise: drag and drop sections
- Four updates that save you hours
- Your site builder just got faster
Preview text idea
Drag and drop sections, faster pages and two more updates are live.