Frozen Header & Footer

Easy Email Pro allows you to create fixed header and footer elements that users cannot modify or delete. This is useful for scenarios like displaying branding elements or required content.

Configuration

Configure frozen blocks in your editor setup:

import { Element } from "easy-email-pro-core";

// Define header element
const headerElement: Element = {
  type: "standard-section",
  data: {},
  attributes: {
    "background-repeat": "no-repeat",
    "background-color": "#4a90e2",
  },
  children: [
    {
      type: "standard-column",
      attributes: {
        width: "100%",
      },
      data: {},
      children: [
        {
          name: "Text",
          type: "standard-paragraph",
          data: {},
          attributes: {},
          children: [
            {
              text: "FROZEN HEADER",
            },
          ],
        },
      ],
    },
  ],
};

// Define footer element
const footerElement: Element = {
  type: "standard-section",
  data: {},
  attributes: {
    "background-repeat": "no-repeat",
    "background-color": "#4a90e2",
  },
  children: [
    {
      type: "standard-column",
      attributes: {
        width: "100%",
      },
      data: {},
      children: [
        {
          name: "Text",
          type: "standard-paragraph",
          data: {},
          attributes: {},
          children: [
            {
              text: "FROZEN FOOTER",
            },
          ],
        },
      ],
    },
  ],
};

// Apply to editor
export default function MyEditor() {
  const config = Retro.useCreateConfig({
    // ... other config options
    headerElement: headerElement,
    footerElement: footerElement,
  });

  return (
    <EmailEditorProvider {...config}>
      <EditorHeader />
      <Layout.Content>
        <Retro.Layout />
      </Layout.Content>
    </EmailEditorProvider>
  );
}

Server-side Usage

When generating the final email HTML on the server, include the frozen elements:

const emailHtml = EditorCore.toMJML({
  element: pageElement as PageElement,
  mode: "production",
  mergetagsData: {},
  headerElement: headerElement,
  footerElement: footerElement,
});

Use Cases

1. Branding Requirements

   • Company logo in header
   • Legal disclaimers in footer
   • Copyright notices

2. Subscription Features

   • Display watermarks for free users
   • Show premium features for paid users

3. Compliance Requirements

   • Required legal text
   • Unsubscribe links
   • Contact information

Important Notes

1. Frozen elements cannot be modified or deleted by users
2. Elements will appear in both edit and preview modes
3. The same elements must be included when generating the final email HTML
4. Frozen elements support all standard block attributes and styling

For more examples and advanced usage, check our demo application.