Skip to content
Products
/
/
/
Creating an Email
Last updated

Engage Content Creation

Engage Studio's Email Editor, powered by Beefree SDK, offers a robust and user-friendly interface for creating stunning, responsive email campaigns. This guide walks you through how to design emails using the intuitive drag-and-drop editor and how to personalize them using Liquid templates.

Getting Started

  • Navigate to Email Messages > Create New

  • Choose to start with a blank template or select a pre-designed template

Understanding the Interface

The Email Content Editor consists of three key sections:

  • Stage : The canvas where you drag and arrange content blocks and rows.

  • Sidebar : Where you configure layout, content, and style.

  • Toolbar : Includes device preview (desktop/mobile), undo/redo, and preview/send test.

Building Your Email

Step 1: Add Structure

  • Drag "Row" elements from the Sidebar to the Stage to define layout.

  • Choose from multiple column configurations.

Tips:

  • Rows define horizontal structure (sections).

  • Support up to six columns (emails)

  • Customizable options: background color, borders, mobile behavior.

  • Columns can be resized, added, or styled individually.

Step 2: Add Content

  • Drag content blocks like Text, Image, Button, etc., into row sections.

  • Click on elements to open their settings in the Sidebar.

Features:

  • Auto-fit to column width.

  • Supports Text, Media (Image/Video/GIF), Interactive (Button, Social), and Layout (Divider/Spacer/Menu).

  • Individual customization: padding, visibility, conditions.

Step 3: Customize Design

  • Use the Sidebar to set colors, fonts, spacing, and alignment.

Key Features

Personalization with Merge Tags

  • Click "Merge Tags" in the Content Sidebar.

  • Insert tags like {{ profile.name }} into text blocks.

  • Sample data and preview help visualize output.

Mobile Responsiveness

  • Switch between desktop and mobile preview.

  • Layouts adapt automatically.

Image Editor

  • Double-click images to crop, resize, or apply filters.

Dynamic Content & Conditional Display

  • Add display conditions to rows or blocks based on profile attributes.

  • Example: Show discount banner only to VIPs.

Custom Attributes (Merge Tags Enhancements)

  • Human-readable labels (e.g., "Customer Name" not {{ profile.name }})

  • One-click insertion and preview with sample content

Advanced Features

Dynamic Content Using Liquid

Engage Studio supports Liquid syntax in email templates for advanced personalization.

Basic Syntax:

  • Variables:__{{ profile.name }}

  • Logic: {% if profile.vip %}Thank you{% endif %}

  • Loops: {% for product in profile.products %}{{ product.name }}{% endfor %}

  • Filters: {{ profile.name | upcase }}

Use Cases:

  • Conditional Content : Display content only if profile conditions match.

  • Dynamic Image URLs : Loop through JSON list of items and show personalized products.

Example: Displaying a discount to VIPs

Testing and Preview

  • Click "Preview" to open a real-time rendering.

  • Use "Send Test" to deliver a sample email.

  • Dark Mode Preview included.

The Beefree-powered editor ensures:

Current Limitations

The following features are not yet available or under development:

  • Link validation

  • Spell check

  • Import HTML file (contact support to try)

  • Export HTML file

  • Email QA automation

  • Global Style Settings

  • Image Hosting : Images uploaded in the Image Manager are hosted in Beefree’s AWS S3 and CloudFront. These will not migrate to TD storage. Use external image URLs if permanence is needed.

Previous page
Next page