SaaS Onboarding Checklist email template
A crisp software welcome with a big greeting, one blue button, three numbered first steps with links and a grey help panel before the footer.
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 Onboarding Checklist</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-ds-32{font-size:28px!important;line-height:31px!important;}
.ete-ds-20{font-size:28px!important;line-height:31px!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0c0c0e!important;}
.ete-content{background-color:#0c0c0e!important;}
.ete-text{color:#c8c8cf!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9d9da6!important;}
.ete-link{color:#7fa6ff!important;}
.ete-border{border-color:#27272a!important;}
.ete-panel{background-color:#18181b!important;border-color:#27272a!important;}
.ete-btn{background-color:#5b8dff!important;border-color:#5b8dff!important;}
.ete-btn-text{color:#06122e!important;}
.ete-btn-outline{border-color:#5b8dff!important;}
.ete-btn-outline-text{color:#5b8dff!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:#c8c8cf!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9d9da6!important;}
[data-ogsc] .ete-link{color:#7fa6ff!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0c0c0e!important;}
[data-ogsb] .ete-content{background-color:#0c0c0e!important;}
[data-ogsb] .ete-panel{background-color:#18181b!important;border-color:#27272a!important;}
body,table,td,th,p,a,span,div,li{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
h1,h2,h3,.ete-hf{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
.ete-f-inter{mso-ascii-font-family:Arial;mso-hansi-font-family:Arial;mso-bidi-font-family:Arial;}
</style>
<!--[if !mso]><!--><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap"><!--<![endif]-->
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#ffffff;">
<!-- 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;">Three quick things to get the most out of Gridline. The setup takes about five minutes. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#ffffff;">
<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:28px 32px 20px;"><a href="https://example.com/" style="text-decoration:none;color:#0a0a0a;"><span class="ete-heading" style="font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:18px;line-height:23px;font-weight:700;letter-spacing:-0.3px;color:#0a0a0a;">Gridline</span></a></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h1 class="ete-heading ete-ds-32" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;line-height:38px;font-weight:700;color:#0a0a0a;text-align:left;mso-line-height-rule:exactly;">Welcome to Gridline, {{first_name}}.</h1></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3f3f46;text-align:left;">You're in. Here are three quick things to get the most out of your account. The whole setup takes about five minutes.</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/dashboard" style="height:48px;v-text-anchor:middle;width:235px;" arcsize="8%" strokecolor="#0b5cff" fillcolor="#0b5cff"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Open your dashboard</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/dashboard" style="display:inline-block;background-color:#0b5cff;border:1px solid #0b5cff;line-height:48px;border-radius:4px;color:#ffffff;font-family:Inter, '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-text" style="color:#ffffff;">Open your dashboard</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:24px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-border" style="border-top:1px solid #e4e4e7;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td width="40" 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="24" height="24" style="width:24px;height:24px;background-color:#0b5cff;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;line-height:24px;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-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#0a0a0a;">Connect your first source</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3f3f46;padding-top:4px;">Pull in data from your database, your billing tool or a spreadsheet. <a class="ete-link" style="color:#0b5cff;text-decoration:underline;" href="https://example.com/sources">Browse sources</a></p></td></tr><tr><td width="40" 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="24" height="24" style="width:24px;height:24px;background-color:#0b5cff;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;line-height:24px;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-bottom:20px;"><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#0a0a0a;">Invite your teammates</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3f3f46;padding-top:4px;">Five seats are free on the starter plan. Everyone can view, comment and build dashboards. <a class="ete-link" style="color:#0b5cff;text-decoration:underline;" href="https://example.com/invite">Send invites</a></p></td></tr><tr><td width="40" 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="24" height="24" style="width:24px;height:24px;background-color:#0b5cff;border-radius:50%;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;line-height:24px;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=""><p class="ete-heading" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#0a0a0a;">Build your first report</p><p class="ete-text" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:15px;line-height:24px;color:#3f3f46;padding-top:4px;">Start from a template or a blank canvas. Drag, drop, share. <a class="ete-link" style="color:#0b5cff;text-decoration:underline;" href="https://example.com/templates">See examples</a></p></td></tr></table></td></tr>
<tr><td height="24" style="height:24px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td class="ete-px" bgcolor="#f4f4f5" style="background-color:#f4f4f5;padding:24px 32px 8px;"><h3 class="ete-ds-20" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:20px;line-height:24px;font-weight:700;color:#18181b;text-align:left;mso-line-height-rule:exactly;">Need help getting started?</h3></td></tr>
<tr><td class="ete-px" bgcolor="#f4f4f5" style="background-color:#f4f4f5;padding:8px 32px;"><p style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#3f3f46;text-align:left;">Our docs cover everything from your first query to dashboards the whole company uses. Or just reply to this email. A real person reads every message.</p></td></tr>
<tr><td class="ete-px" bgcolor="#f4f4f5" style="background-color:#f4f4f5;padding:8px 32px;"><p style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#0b4fd9;text-align:left;"><a style="color:#0b4fd9;text-decoration:underline;" href="https://example.com/docs">Read the docs</a> · <a style="color:#0b4fd9;text-decoration:underline;" href="https://example.com/walkthrough">Book a 20 minute walkthrough</a></p></td></tr>
<tr><td height="16" bgcolor="#f4f4f5" style="background-color:#f4f4f5;height:16px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#71717a;line-height:20px;text-align:left;"><strong>Gridline Inc</strong><br>548 Harbor Street, Suite 300, San Francisco, CA 94104</p><p class="ete-muted" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#71717a;line-height:20px;text-align:left;padding-top:10px;">You get this email because you signed up for Gridline.</p><p class="ete-muted" style="margin:0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#71717a;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#71717a;text-decoration:underline;">Unsubscribe</a> · <a class="ete-link" href="{{preferences_url}}" style="color:#71717a;text-decoration:underline;">Email preferences</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#71717a;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#71717a;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 (template 21, SaaS welcome) by Colorlib, MIT license.
About this template
A first email for a software product, sent right after sign up. It is built for analytics tools, dashboards and other apps where new users need a few concrete steps before they see value.
A small wordmark sits top left. The greeting is large and personal, followed by one sentence that sets expectations and a solid blue button that opens the app. A thin line then leads into three numbered steps. Each step has a bold title, one or two lines of plain explanation and a text link to the right place in the product.
Near the end a grey panel offers help: a short heading, a sentence about the docs and the team, and two links for reading or booking a short call. The footer holds the address and the usual links.
The structure follows a modern designer onboarding template. Keep the steps to three, make each link go straight to the screen it names, and write the help panel in the voice of the real people who answer replies.
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
- Wordmark
- Greeting and intro
- Open dashboard button
- Three numbered steps with links
- Help panel
- Footer
Subject line ideas
- Welcome to Gridline, {{first_name}}
- Three things to do in your first five minutes
- Your Gridline account is ready
Preview text idea
Three quick things to get the most out of Gridline. The setup takes about five minutes.