Skip to main content

Easy Email Pro Kit

The easy-email-pro-kit package provides powerful marketing components and common components that extend the core functionality of Easy Email Pro. These components are designed for creating engaging email templates with advanced features like countdown timers, product showcases, QR codes, videos, and more.

Overview​

The kit package includes two types of components:

  • Marketing Components: Shopwindow, Countdown, CountdownV2, QRCode
  • Common Components: Video, ImageWithText

All components are implemented as ElementPlugin instances that can be registered with the PluginManager to extend the editor's capabilities.

Installation​

pnpm install easy-email-pro-kit

Exports​

Components​

export { Shopwindow, Countdown, CountdownV2, QRCode, Video, ImageWithText };

Constants​

export const MarketingType = {
  MARKETING_SHOPWINDOW: "marketing-shopwindow",
  MARKETING_COUNTDOWN_V2: "marketing-countdown-v2",
  MARKETING_COUNTDOWN: "marketing-countdown",
  MARKETING_QR_CODE: "marketing-qr-code",
};

export const CommonType = {
  COMMON_VIDEO: "common-video",
  COMMON_IMAGE_WITH_TEXT: "common-image-with-text",
};

Usage​

Registering Components​

To use kit components, you need to register them with the PluginManager:

import { PluginManager } from "easy-email-pro-core";
import {
  Shopwindow,
  Countdown,
  CountdownV2,
  QRCode,
  Video,
  ImageWithText,
} from "easy-email-pro-kit";

PluginManager.registerPlugins([
  CountdownV2,
  Countdown,
  Shopwindow,
  QRCode,
  Video,
  ImageWithText,
]);

Adding to Block Categories​

After registration, you can add these components to your editor's block categories:

import { MarketingType, CommonType } from "easy-email-pro-kit";
import { ElementType } from "easy-email-pro-core";

const categories = [
  {
    label: "Marketing",
    active: true,
    displayType: "grid",
    blocks: [
      {
        type: MarketingType.MARKETING_SHOPWINDOW,
        icon: <IconFont iconName="icon-shopwindow" />,
      },
      {
        type: MarketingType.MARKETING_COUNTDOWN_V2,
        icon: <IconFont iconName="icon-countdown" />,
      },
      {
        type: MarketingType.MARKETING_QR_CODE,
        icon: <IconFont iconName="icon-qrcode" />,
      },
    ],
  },
  {
    label: "Media",
    active: true,
    displayType: "grid",
    blocks: [
      {
        type: CommonType.COMMON_VIDEO,
        icon: <IconFont iconName="icon-video" />,
      },
      {
        type: CommonType.COMMON_IMAGE_WITH_TEXT,
        icon: <IconFont iconName="icon-image-text" />,
      },
    ],
  },
];

Components​

Shopwindow​

The Shopwindow component allows you to create product showcase displays in your emails. It's perfect for showcasing multiple products with images, titles, prices, and links.

Type: MarketingType.MARKETING_SHOPWINDOW

Features:

  • Display multiple products in a grid layout
  • Product images, titles, prices, and links
  • Responsive design
  • Customizable styling

Example:

import { Shopwindow } from "easy-email-pro-kit";
import { PluginManager } from "easy-email-pro-core";

PluginManager.registerPlugins([Shopwindow]);

Countdown​

The Countdown component displays a countdown timer, useful for limited-time offers, sales, or event promotions.

Type: MarketingType.MARKETING_COUNTDOWN

Features:

  • Customizable target date and time
  • Display format options (days, hours, minutes, seconds)
  • Styling customization

Example:

import { Countdown } from "easy-email-pro-kit";
import { PluginManager } from "easy-email-pro-core";

PluginManager.registerPlugins([Countdown]);

CountdownV2​

CountdownV2 is an improved version of the Countdown component with enhanced features and better performance.

Type: MarketingType.MARKETING_COUNTDOWN_V2

Features:

  • All features from Countdown
  • Enhanced rendering with custom component
  • Better performance
  • More styling options

Example:

import { CountdownV2 } from "easy-email-pro-kit";
import { PluginManager } from "easy-email-pro-core";

PluginManager.registerPlugins([CountdownV2]);

QRCode​

The QRCode component generates QR codes that can be scanned by mobile devices. Useful for linking to websites, promotions, or contact information.

Type: MarketingType.MARKETING_QR_CODE

Features:

  • Customizable QR code content (URL, text, etc.)
  • Size and styling options
  • Error correction levels

Example:

import { QRCode } from "easy-email-pro-kit";
import { PluginManager } from "easy-email-pro-core";

PluginManager.registerPlugins([QRCode]);

Video​

The Video component allows you to embed videos in your email templates. Note that email clients have limited video support, so this component typically uses a thumbnail image with a play button overlay.

Type: CommonType.COMMON_VIDEO

Features:

  • Video thumbnail support
  • Custom play button
  • Link to video URL
  • Responsive design

Example:

import { Video } from "easy-email-pro-kit";
import { PluginManager } from "easy-email-pro-core";

PluginManager.registerPlugins([Video]);

ImageWithText​

The ImageWithText component creates a layout with an image and accompanying text, perfect for product descriptions, feature highlights, or content sections.

Type: CommonType.COMMON_IMAGE_WITH_TEXT

Features:

  • Image and text side-by-side layout
  • Configurable image position (left/right)
  • Responsive stacking on mobile
  • Customizable spacing and styling

Example:

import { ImageWithText } from "easy-email-pro-kit";
import { PluginManager } from "easy-email-pro-core";

PluginManager.registerPlugins([ImageWithText]);

Server-Side Rendering​

The kit package can be used for server-side rendering. Simply import and register the plugins as you would in client-side code. This is useful when you need to render email templates on the server.

Server-side usage:

import { EditorCore, PluginManager } from "easy-email-pro-core";
import { Countdown, Shopwindow } from "easy-email-pro-kit";
import mjml from "mjml";
import { EmailTemplate } from "easy-email-pro-editor";

// Register plugins (same as client-side)
PluginManager.registerPlugins([Countdown, Shopwindow]);

// Authenticate (required for server-side rendering)
await EditorCore.auth(process.env.CLIENT_ID!);

// Convert template to MJML
const mjmlStr = EditorCore.toMJML({
  element: pageData,
  mode: "production",
});

// Convert MJML to HTML
const htmlSkeleton = mjml(mjmlStr).html;

// Render with dynamic data (if needed)
const finalHtml = PluginManager.renderWithData(htmlSkeleton, {});

Complete Example​

Here's a complete example of integrating kit components into your editor:

import React from "react";
import { EmailEditorProvider, EmailTemplate } from "easy-email-pro-editor";
import { Retro, ThemeConfigProps } from "easy-email-pro-theme";
import { PluginManager } from "easy-email-pro-core";
import {
  Shopwindow,
  Countdown,
  CountdownV2,
  QRCode,
  Video,
  ImageWithText,
  MarketingType,
  CommonType,
} from "easy-email-pro-kit";

// Register all kit plugins
PluginManager.registerPlugins([
  CountdownV2,
  Countdown,
  Shopwindow,
  QRCode,
  Video,
  ImageWithText,
]);

const categories: ThemeConfigProps["categories"] = [
  {
    label: "Marketing",
    active: true,
    displayType: "grid",
    blocks: [
      {
        type: MarketingType.MARKETING_SHOPWINDOW,
        icon: <IconFont iconName="icon-shopwindow" />,
      },
      {
        type: MarketingType.MARKETING_COUNTDOWN_V2,
        icon: <IconFont iconName="icon-countdown" />,
      },
      {
        type: MarketingType.MARKETING_QR_CODE,
        icon: <IconFont iconName="icon-qrcode" />,
      },
    ],
  },
  {
    label: "Media",
    active: true,
    displayType: "grid",
    blocks: [
      {
        type: CommonType.COMMON_VIDEO,
        icon: <IconFont iconName="icon-video" />,
      },
      {
        type: CommonType.COMMON_IMAGE_WITH_TEXT,
        icon: <IconFont iconName="icon-image-text" />,
      },
    ],
  },
];

export default function MyEditor() {
  const config = Retro.useCreateConfig({
    categories,
    // ... other config options
  });

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

Notes​

  • All kit components are registered as plugins and extend the core editor functionality
  • Components automatically register their configuration panels with the theme system
  • The same imports work for both client-side and server-side rendering
  • Each component can be customized through the editor's attribute panel after being added to a template