Letterbench › Templates › Welcome email template

Welcome email template

Greets a new user by name and sends them to their dashboard, with a reply-to-a-person line.

AccountFree (MIT)

Subject and preheader

Variables

{{company_address}} {{dashboard_url}} {{logo_url}} {{product_name}} {{support_email}} {{user_first_name}}

Handlebars names; the React Email edition uses the same names in camelCase as typed props.

Mobile, dark mode

Plain-text version (included)

Welcome to {{product_name}}

WELCOME
Welcome, {{user_first_name}}

Your {{product_name}} account is ready. The quickest way to get value is to
finish setting up your workspace. It takes about two minutes.

Open your dashboard: {{dashboard_url}}

If you get stuck, reply to this email and a person will help.

You received this email because you created an account with {{product_name}}.

--
{{product_name}} · {{company_address}}
Need help? {{support_email}}

React Email version (TSX)

// welcome: Account. Generated by react/generate.js from templates.js.
import * as React from 'react';
import { Layout, Eyebrow, H1, P, CTA, Note } from './components/ui';

export interface WelcomeEmailProps {
  companyAddress: string;
  dashboardUrl: string;
  logoUrl: string;
  productName: string;
  supportEmail: string;
  userFirstName: string;
}

export const subject = ({ productName }: Pick<WelcomeEmailProps, 'productName'>) =>
  `Welcome to ${productName}`;

export default function WelcomeEmail(props: WelcomeEmailProps) {
  const { companyAddress, dashboardUrl, logoUrl, productName, supportEmail, userFirstName } = props;
  return (
    <Layout title={`Welcome to ${productName}`} preview={`Your account is ready. Here is how to get started.`} productName={productName} logoUrl={logoUrl} companyAddress={companyAddress} supportEmail={supportEmail}>
      <Eyebrow>Welcome</Eyebrow>
      <H1>Welcome, {userFirstName}</H1>
      <P>Your {productName} account is ready. The quickest way to get value is to finish setting up your workspace. It takes about two minutes.</P>
      <CTA href={dashboardUrl}>Open your dashboard</CTA>
      <P>If you get stuck, reply to this email and a person will help.</P>
      <Note>You received this email because you created an account with {productName}.</Note>
    </Layout>
  );
}

/** Plain-text version: send it alongside the HTML (e.g. Resend/Postmark `text`). */
export function text(props: WelcomeEmailProps): string {
  const { companyAddress, dashboardUrl, logoUrl, productName, supportEmail, userFirstName } = props;
  return [
    `Welcome to ${productName}`,
    '',
    `WELCOME`,
    `Welcome, ${userFirstName}`,
    '',
    `Your ${productName} account is ready. The quickest way to get value is to finish setting up your workspace. It takes about two minutes.`,
    '',
    `Open your dashboard: ${dashboardUrl}`,
    '',
    `If you get stuck, reply to this email and a person will help.`,
    '',
    `You received this email because you created an account with ${productName}.`,
    '',
    '--',
    `${productName} · ${companyAddress}`,
    `Need help? ${supportEmail}`,
  ].join('\n').replace(/\n{3,}/g, '\n\n') + '\n';
}

WelcomeEmail.PreviewProps = {
  "companyAddress": "1 Example Street, London EC1A 1AA, UK",
  "dashboardUrl": "https://app.example.com/",
  "logoUrl": "https://placehold.co/240x60/2F5BEA/FFFFFF/png?text=Acme",
  "productName": "Acme Cloud",
  "supportEmail": "support@example.com",
  "userFirstName": "Sam"
} satisfies WelcomeEmailProps;

This template is in Letterbench Lite, free under the MIT licence, in both editions.

Tested

Size under Gmail's 102 KB clip limit, alt text, lang, preheader, links, every variable resolved, no 375px overflow, WCAG AA contrast in light and dark mode. Rendered in headless Chrome; not tested in Outlook desktop, the Gmail apps or Apple Mail.

← Win-back email template · All templates · Email verification template →