Skip to content
Groundmail

Free email template

Welcome email template

A short first email after sign-up: three next steps and one button. Free and MIT-licensed, in React Email, MJML, HTML and plain text, with light and dark mode built in.

Get the codeView on GitHub
  • MIT license
  • Works with any email provider
  • Light and dark mode

What every welcome email needs.

The template covers the content. Points 1 and 4 are about how you send it.

  1. Send it straight after sign-up

    The best moment is while they still have your product open. A welcome that arrives the next day is just another email.

  2. One main button

    Take them back to the product. The template has one button, to the dashboard, and keeps every other link secondary.

  3. Three next steps, not ten

    A short list of the first useful things to do. Anything more is a manual, and nobody reads a manual in an email.

  4. A reply address someone reads

    The template says "reply to this email and a real person will get back to you". If you keep that line, set the reply-to address to an inbox your team watches, not noreply.

  5. No sales pitch

    Discount codes and upgrade offers turn a welcome into marketing, and it gets treated that way. Keep it about the account they just made.

  6. Where to get help

    A link to your help center, for the questions that come up on day one. The template puts it at the bottom.

The code. Copy the format your stack uses.

Change the brand name, logo and colors once in theme.ts and every template follows.

import * as React from 'react'
import { A, Button, Divider, Layout, P, Small, Title } from '../../components'
import type { TemplateMeta } from '../../components/meta'
import { plainText } from '../../components/text'
import { theme } from '../../theme'

export type WelcomeProps = {
  name: string
  dashboardUrl: string
  helpUrl: string
}

export const meta: TemplateMeta = {
  name: 'Welcome',
  description: 'A short first email after sign-up: three next steps and one button.',
  group: 'Account',
  subject: `Welcome to ${theme.brand.name}`,
}

const steps: Array<[string, string]> = [
  ['Set up your workspace', 'Add your details so everything is ready when you need it.'],
  ['Invite your team', 'Work together from day one. Teammates join with one click.'],
  ['Get help any time', 'Reply to this email and a real person will get back to you.'],
]

export default function Welcome({ name, dashboardUrl, helpUrl }: WelcomeProps) {
  return (
    <Layout
      preview="Your account is ready. Here are three good places to start."
      footerNote="You're receiving this because you just created an account."
    >
      <Title>Welcome, {name}</Title>
      <P>Thanks for signing up. Your account is ready. Here are three good places to start:</P>
      {steps.map(([title, body], index) => (
        <P key={title} style={{ margin: '0 0 12px' }}>
          <strong>
            {index + 1}. {title}
          </strong>
          <br />
          <span className="em-muted" style={{ color: theme.colors.light.muted }}>
            {body}
          </span>
        </P>
      ))}
      <Button href={dashboardUrl}>Go to your dashboard</Button>
      <Divider />
      <Small style={{ margin: 0 }}>
        Questions? Reply to this email or visit the <A href={helpUrl}>help center</A>.
      </Small>
    </Layout>
  )
}

Welcome.PreviewProps = {
  name: 'Ada',
  dashboardUrl: 'https://example.com/dashboard',
  helpUrl: 'https://example.com/help',
} satisfies WelcomeProps

export function text({ name, dashboardUrl, helpUrl }: WelcomeProps) {
  return plainText(
    `Welcome, ${name}`,
    'Thanks for signing up. Your account is ready. Here are three good places to start:',
    steps.map(([title, body], index) => `${index + 1}. ${title}\n   ${body}`).join('\n\n'),
    `Go to your dashboard: ${dashboardUrl}`,
    `Questions? Reply to this email or visit the help center: ${helpUrl}`,
  )
}

welcome.tsx, 68 lines, shown in full (scroll inside the panel). Typed props. Copy it with theme.ts and components/ from the repo. View on GitHub

Send it with Groundmail

Create the template in your account once, then send it by alias from your app.

1Terminal
npx -y --package=groundmail-cli -- groundmail templates push templates/welcome/welcome.html \
  --alias welcome \
  --name "Welcome" \
  --subject "Welcome to Acme" \
  --text templates/welcome/welcome.txt \
  --publish
2Node.js
import { Groundmail } from 'groundmail'

const groundmail = new Groundmail(process.env.GROUNDMAIL_API_KEY!)

await groundmail.emails.send({
  from: 'Acme <noreply@yourdomain.com>',
  to: 'ada@example.com',
  template: {
    id: 'welcome',
    variables: {
      name: 'Ada',
      dashboard_url: 'https://example.com/dashboard',
      help_url: 'https://example.com/help',
    },
  },
})

The CLI command and the Node.js send from the template's README, which also has Python, PHP and cURL. View on GitHub

Subject lines

This is the one email people expect from you, so the subject can be warm. It still needs the product name.

  • Welcome to AcmeDefaultShort, expected and unmistakable.
  • Welcome to Acme, {{name}}GoodAdds their name, which you already have from sign-up.
  • Your Acme account is readyGoodSays what happened, for products where people sign up to do a job.
  • You won't believe what Acme can do for you!AvoidHype and an exclamation mark read as marketing, and it doesn't say the account is ready.

The first email is the one people decide to trust

If the welcome lands in spam, people may never look for the emails after it. It also sets the pattern: from name, domain and tone should match everything else you send.

Google, Yahoo and Microsoft sender rules →
  • Send from your own domain with SPF, DKIM and DMARC set up.
  • Send it from the same from name and domain as your other account emails.
  • If you add offers or newsletters to it, it's marketing: send it on that stream instead.
  • Groundmail sends this template by alias from your own domain, on our own mail servers. Send it with Groundmail

More account templates

All email templates →

Questions

Is it free to use?

Yes. The templates are MIT-licensed: use them in commercial products and change them however you like.

Do I need Groundmail to use it?

No. The HTML and text files use plain placeholders that work with most providers' template engines and with Handlebars or Mustache. Sending through Groundmail just saves a step.

Does it work in dark mode and Outlook?

Yes. The full HTML file carries dark-mode styles for Apple Mail and Outlook.com, and the extra markup desktop Outlook needs to draw the button.

How do I change the colors and logo?

Edit theme.ts once (name, logo, address and colors for light and dark) and rebuild. Every template in the set picks it up.