Email Builder | Yaplet

Email Format Options

The email builder supports two email formats, each optimized for different use cases:

MJML Format

Recommended for responsive emails - MJML provides semantic tags that automatically handle responsive design and email client compatibility.

Uses <mj-section>, <mj-column>, <mj-text>, and other MJML-specific tags
Automatically generates responsive HTML output
Better for complex layouts with consistent cross-client rendering

HTML Format

Best for custom layouts - Traditional HTML with table-based structure for maximum control over email rendering.

Uses traditional HTML table layouts for email compatibility
Requires manual responsive design considerations
More flexible for custom styling and layouts

Editor Features

Visual Building Blocks

Both MJML and HTML modes provide drag-and-drop building blocks:

Structure components: Sections, columns, and containers
Content elements: Text, images, buttons, and links
Interactive elements: Forms and dynamic content areas
Styling options: Colors, fonts, spacing, and responsive behavior

Auto-Save Functionality

All changes are automatically saved as you work - no manual save button needed.

The editor continuously saves your work to prevent data loss during the editing process.

Test Email Functionality

Send test emails directly from the editor to verify your email design and content.

Click the "Send test mail" button to open a modal where you can:

Select recipient email addresses (add multiple test recipients)
Choose a verified sender email from your organization
Send the current email template with your custom subject, preheader, and sender name

This allows you to preview how your email will appear in real email clients and ensure all dynamic content and styling renders correctly before sending to your full audience.

Border Visibility Toggle

Use the "Show borders" command to visualize component boundaries and spacing during design.

Code Management

Import Code

Import existing HTML or MJML code directly into the editor:

Click "Import code" to load external templates
Supports both HTML and MJML formats
Automatically parses and converts code into editable components

Edit Code

Access the raw code view for advanced editing:

Click "Edit code" to open the CodeMirror editor
Syntax highlighting and auto-completion
Real-time preview updates
"Save" button applies code changes back to the visual editor

AI-Powered Generation

Generate professional email templates using AI assistance with flexible options:

Generation Modes

Generate Mode

Create from Scratch

Start with a blank canvas and let AI build your email based on your description. Perfect for new campaigns or when you have a clear vision of what you want.

Edit Mode

Improve Existing Content

Enhance your current email template while preserving its structure. Ideal for refining existing designs or making targeted improvements.

AI Configuration Options

Template References Attach existing templates for style and structure inspiration:

Browse and select from your saved email templates
AI analyzes structure, tone, and design patterns
Multiple templates can be attached for reference

Recent Email References Include previously sent emails as examples:

Select from your campaign history
AI learns from successful email patterns
Useful for maintaining brand consistency

Variable Support Control whether AI can use dynamic variables in generated content:

Enable to allow {{variable}} format placeholders
Disable for static content generation
Variables are automatically populated during sending

Dynamic Content & Variables

Basic Fields

Pre-defined variables for common contact information:

{{email}}
{{name}}
{{created_at}}
{{state}}

Custom Fields

Organization-specific variables from your contact database:

{{customFieldName}}

Reserved Variables

System-generated URLs for email management:

{{subscribeURL}}
{{unsubscribeURL}}

Reserved variables are automatically generated for each email. If not manually included in the content, they'll be added to the footer automatically.

Usage Instructions

Building Your Email

Choose between MJML or HTML format based on your needs
Drag and drop building blocks from the sidebar
Customize content, styling, and layout
Use the AI generator for initial content creation
Fine-tune with direct code editing if needed

Dynamic Data Integration

Insert variables using the {{variableName}} pattern:

Click on text elements to edit content
Type or paste variable placeholders
Variables will be replaced with actual data when emails are sent

Button Actions

Set button links to reserved variables for user management:

Use {{subscribeURL}} for subscription confirmation
Use {{unsubscribeURL}} for easy opt-out
Links automatically handle user preferences

Footer Fallback

If reserved variables aren't included in your email content, they're automatically added to the footer for compliance.