Skip to content
Docs

Implement Email Marketing

React Bricks Email Marketing lets editors create email campaigns visually. In code, you model email campaigns as page types and provide the rendering functions needed to generate email HTML.

Use this page when you are implementing the developer side of Email Marketing.

Configure an email marketing page type

Section titled “Configure an email marketing page type”

Create a pageType with isEmailMarketing: true.

Email marketing page types can also define:

  • renderWrapper, to wrap the content differently for the Admin preview and the final Email output
  • renderEmailHtml, to generate the final HTML sent to the Email Sending Provider
react-bricks/pageTypes.ts
import {
  Body,
  Container,
  Font,
  Head,
  Html,
  pretty,
  render,
  Tailwind,
} from '@react-email/components'


const pageTypes: types.IPageType[] = [
  {
    name: 'newsletter',
    pluralName: 'newsletters',
    isEmailMarketing: true,
    renderWrapper: (args) => {
      if (args.renderEnvironment === 'Admin') {
        return <Container style={{ margin: 'auto' }}>{args.children}</Container>
      }


      if (args.renderEnvironment === 'Email') {
        return (
          <Html>
            <Tailwind>
              <Head>
                <Font
                  fontFamily="Nunito Sans"
                  fallbackFontFamily="sans-serif"
                  webFont={{
                    url: 'https://fonts.gstatic.com/s/nunitosans/v19/pe0AMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfUVwoNnq4CLz0_kJ3xzHGGVFM.woff2',
                    format: 'woff2',
                  }}
                  fontWeight={400}
                  fontStyle="normal"
                />
              </Head>
              <Body>
                <Container style={{ margin: 'auto' }}>
                  {args.children}
                </Container>
              </Body>
            </Tailwind>
          </Html>
        )
      }


      return args.children
    },
    renderEmailHtml: async (args) => {
      const html = await render(args.children)
      return pretty(html)
    },
  },
]

Use email-specific bricks

Section titled “Use email-specific bricks”

Email clients have stricter rendering rules than browsers. For email content, prefer bricks designed for email output.

The starter projects include optional email marketing bricks based on react-email, installable from the CLI.

Editor workflow

Section titled “Editor workflow”

After the page type is configured, editors can create email marketing pages and select campaign options such as:

  • Email Sending Provider
  • list
  • sender
  • campaign name
  • send test, send now, or schedule
Section titled “Related reference”