The Email Designer

The Email Designer is ClientCove's visual editor for building reusable email templates. Drop blocks onto a canvas, configure colors and content, assign the template to notification types, and every email of those types instantly uses the new design.

Opening the Designer

1. Sign in as an administrator
2. Navigate to /email-designer/ (or click "Email Templates" from the Email Campaigns dashboard)
3. The full-screen designer opens

The designer requires manage_options capability — administrators only. Other roles get an access-denied message.

The Layout

The designer fills the screen with three regions:

Top toolbar

• Template Designer title with envelope icon
• Template selector dropdown — switch between existing templates or create new
• Undo / Redo buttons (Ctrl+Z / Ctrl+Shift+Z)
• Save Template button (Ctrl+S) — disabled until you have unsaved changes
• Send Test Email button — sends the current template to your email
• Preview button (Ctrl+P) — opens a preview modal
• Settings button — opens the global settings panel

Left sidebar — Block Library

• A scrollable list of draggable block types
• Each block has an icon and label
• Drag to add to the canvas

Center — Canvas

• A simulated email body (max-width set per template)
• Blocks stack vertically
• Click any block to select it (shows configuration in right panel)
• Drag blocks within the canvas to reorder
• Each block has hover controls (delete, duplicate)

Right sidebar — Configuration panel

• When a block is selected: that block's configuration (text, color, alignment, link, etc.)
• When no block is selected: global template settings
• Live updates as you change values

Creating a Template

Start a new template

1. In the template selector, choose + Create New Template
2. A modal asks for a template name
3. Name it descriptively ("Modern Welcome", "Compact Notification", "Marketing Newsletter")
4. Save

You land on a blank canvas with default global settings.

Duplicate an existing template

1. Open the existing template
2. Use the template menu's Duplicate option
3. Rename the duplicate
4. Edit as needed

Duplicating is the fastest way to create variations on an established design.

Block Library

Nine block types are available:

Block	Purpose
Header	Logo + optional title — typically the first block
Text	Free-form rich text (paragraphs, lists, formatting)
Button	Call-to-action button with label, link, color
Avatar	User avatar (auto-renders the recipient's portal avatar)
Message Preview	A pre-styled message bubble (used in message-notification templates)
Divider	Horizontal rule for section separation
Image	Standalone image (logo variations, hero images, banners)
Image + Text	Side-by-side image and text (typical for two-column layouts)
Footer	Standard footer with company info, unsubscribe link

Drag any block from the sidebar to the canvas. Drop position determines where it lands — between existing blocks or at the bottom.

Block Configuration

Click any block on the canvas to reveal its configuration in the right panel. Configuration depends on block type:

Header block

• Logo URL (defaults to global logo)
• Logo width (px)
• Logo alignment (left / center / right)
• Title text (optional)
• Title color, size, weight
• Background color
• Padding

Text block

• Rich text editor (bold, italic, lists, links)
• Text color
• Font size
• Line height
• Padding
• Alignment

Button block

• Button label
• Link URL (supports merge tags like {{view_url}})
• Button color (background + text)
• Border radius
• Width (auto / full)
• Alignment

Image block

• Image URL
• Width / height
• Alt text
• Link (optional — wraps the image)

Footer block

• Company name
• Address
• Social media links
• Unsubscribe text (auto-populated for campaigns; hidden for transactional)
• Background color

Merge tags

Most text fields support merge tags — placeholders that get replaced when the email is sent:

Tag	Replaced with
{{recipient_name}}	The recipient's display name
{{recipient_email}}	The recipient's email
{{view_url}}	URL to view the related content (invoice, ticket, project)
{{company_name}}	Your portal's company name
{{logo_url}}	The global email logo URL
{{unsubscribe_url}}	Unsubscribe link (campaigns only)

Notification-specific tags are also available — {{invoice_number}} for invoice emails, {{ticket_subject}} for tickets, etc.

Global Template Settings

When no block is selected, the right panel shows global template settings:

Setting	Purpose
Template Name	Internal name
Template Type	Transactional / Daily Digest / Marketing
Max Width	Total width of the email body (typically 600px for emails)
Background Color	Color outside the email content area
Body Background	Color of the email body
Primary Color	Used for buttons, links, accents
Font Family	Default font for text blocks
Default Padding	Spacing applied to blocks

These settings cascade to all blocks unless overridden at the block level.

Template Type

The template type tells ClientCove how to use the template:

Type	Use For
Transactional	System-triggered emails (notifications, confirmations, password resets)
Daily Digest	Aggregated daily summary emails
Marketing	Promotional campaigns, newsletters

The type affects:

• Which dropdowns the template appears in (a Marketing template only shows in the Campaigns picker; a Transactional template only shows in the notification type assignments)
• Whether the unsubscribe footer is auto-included (campaigns / marketing yes; transactional no)
• Default styling (marketing tends to be more visually rich; transactional tends to be cleaner)

Assigning Notification Types

A transactional template needs to be assigned to one or more notification types to take effect. In the template settings:

1. Find the Notification Types section
2. Tick the checkboxes for events this template should handle
3. Save

The full list of notification types you can assign:

• New Messages
• Task Assignments
• Task Due Soon
• Ticket Updates
• Project Deadlines
• Daily Summary
• Auth Code (2FA Login)
• Magic Link Login
• Registration Welcome (New Account)
• Registration Pending Approval
• User Invitation
• Forgot Password / Reset
• New User Welcome (Admin Created)
• New Invoice
• Invoice Payment Received
• Invoice Overdue Reminder
• Contract Sign Request
• Transfer Ready (Files Shared)
• Upload Request
• Upload Complete
• Transfer Expiring
• Transfer Verification Code

When ClientCove fires a notification, it looks up the template for that notification type. If multiple templates handle the same type, the most recently saved one wins (or the one with is_default = true).

Default Template Flag

The Default Template checkbox marks a template as the fallback for its assigned notification types. When two or more templates handle the same notification type, the one with the default flag set wins.

You can also set a portal-wide default in Settings → Email Designer → Default Template. This template is used as the wrapper for any notification that doesn't have a specific template assigned. Useful as a baseline so every email looks branded even if you haven't yet built a custom template for that event.

Send Test Email

The Send Test Email button delivers the current template to your email address (the email on your WordPress account):

1. Click Send Test Email
2. ClientCove renders the template with sample data:
   • {{recipient_name}} → your display name
   • {{view_url}} → a placeholder URL
   • All other tags → reasonable sample values
3. Sends to your account email
4. Check your inbox to verify the design

Test sends are logged but don't affect any analytics. Use them liberally during template development.

Email client testing

A test in your inbox shows you Gmail's rendering. For broader email-client testing (Outlook, Yahoo, mobile clients, dark mode):

• Forward the test email to other accounts
• Use a service like Litmus or Email on Acid (paid; comprehensive testing across clients)
• Test both light and dark mode preferences

Email clients are notoriously inconsistent — what looks perfect in Gmail can break in Outlook. Test before going live.

Preview

The Preview button (Ctrl+P) opens a modal showing the rendered email at the configured max-width:

• Desktop preview — default size (600px or as configured)
• Mobile preview — narrow viewport simulation
• Source HTML — the raw HTML that gets sent (for debugging)

Preview is non-destructive — close to return to editing.

Undo / Redo / Save

The toolbar's Undo (Ctrl+Z) and Redo (Ctrl+Shift+Z) cover every editor action: block additions, deletions, configuration changes, drag reorders.

The Save Template button (Ctrl+S):

• Disabled when there are no unsaved changes
• Highlighted blue when changes pending
• Click to commit changes to the database
• Confirmation toast on success

The designer has no auto-save — if you close the tab with unsaved changes, you lose them. Save often, especially during long editing sessions.

Managing Multiple Templates

Most portals end up with several templates:

• A "Compact" template for short notifications (auth codes, password resets)
• A "Standard" template for content-rich notifications (new invoice, project deadline)
• A "Marketing" template for campaigns
• Specialized templates (e.g. a custom welcome flow for new accounts)

The template selector in the toolbar lists all templates. Switch between them to edit, duplicate, or compare. The right-panel global settings tell you which template you're currently editing.

To delete a template:

1. Open the template
2. Use the template menu's Delete Template option
3. Confirm

Deletion is permanent. Notification types assigned to the deleted template fall back to the default transactional template.