CMS Features

Implement Email Marketing

Configure email marketing page types, render email HTML, and let editors create and send campaigns visually.

Estimated time: 12 minRaw Markdown

React Bricks Email Marketing lets editors create email campaigns with the same visual editing model used for website pages.

In code, developers configure email marketing page types and email-specific bricks. In the editor, content and marketing teams create campaigns, select an Email Sending Provider, choose a list and sender, send tests, send campaigns, or schedule them.

Docs reference: Email Marketing

Connect an Email Sending Provider

Configure an Email Sending Provider from the React Bricks Dashboard.

Supported providers include:

MailChimp
Brevo
Mailerlite
GetResponse
SendGrid
Resend
ConvertKit

Once a provider is connected, email marketing pages can use it for campaign delivery.

Configure an email marketing page type

Email campaigns are created from page types marked 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)
    },
  },
]

Docs reference: Implement Email Marketing

Understand the rendering functions

renderWrapper lets you adapt the same React Bricks content for different render environments.

For example:

in the Admin preview, you can wrap the content with a centered Container
in the Email output, you can wrap the content with Html, Head, Body, Tailwind, fonts, and the structure required by email clients
in other render environments, you can return args.children

renderEmailHtml receives the rendered React children and returns the final HTML string that React Bricks sends to the Email Sending Provider.

When using react-email, call render(args.children) and optionally format the result with pretty.

Use email-specific bricks

Email clients are stricter than browsers. Many CSS features that work on the web do not work reliably in email clients.

For email content, prefer bricks designed for email output.

The React Bricks starter projects include optional email marketing bricks based on react-email. They can be installed from the CLI and used as a starting point for your own email design system.

Create and send campaigns

After the page type is configured, editors can create email marketing pages in React Bricks.

Pages with isEmailMarketing: true include campaign-specific options in the editor.

Editors can select:

an Email Sending Provider
a list
a sender
a campaign name

They can also send a test, send the campaign immediately, or schedule it.

Check the result

After wiring Email Marketing:

connect an Email Sending Provider in the dashboard
create a page type with isEmailMarketing: true
add renderWrapper and renderEmailHtml
use email-specific bricks for campaign content
create an email marketing page in the editor
select provider, list, sender, and campaign name
send a test email and verify the rendered output
send or schedule the campaign