OtesseOtesseDocs

Email Template Builder

The Otesse Email Template Builder is a visual drag-and-drop editor for creating professional emails. It supports both transactional emails (booking confirmations, invoices) and marketing emails (promotions, newsletters).

Builder Interface

The email builder has a three-panel layout:

Left Panel — Block Library

Drag blocks from the library onto the canvas:

  • Header — Company logo and name
  • Text — Rich text content with formatting
  • Image — Single image with optional caption
  • Button — Call-to-action button with customizable text and link
  • Divider — Horizontal line separator
  • Spacer — Vertical spacing between blocks
  • Columns — 2 or 3 column layout
  • Hero — Large image with overlay text and CTA button
  • Product — Product card with image, name, price, and button
  • Social — Social media icon links
  • Footer — Company info, address, unsubscribe link

Center Panel — Canvas

The visual editor where you arrange and edit blocks:

  • Drag blocks to reorder
  • Click a block to select it for editing
  • Double-click text blocks for inline editing
  • Hover to see block type labels and action buttons
  • Delete or duplicate blocks from the hover toolbar

Right Panel — Style Panel

Configure the selected block's appearance:

  • Padding — Top, right, bottom, left spacing
  • Colors — Background, text, link colors
  • Typography — Font size, weight, line height, letter spacing
  • Alignment — Left, center, right
  • Block-specific — Button radius, image width, column ratios, etc.

Variables (Merge Tags)

Insert dynamic content using double-curly-brace syntax:

{{customer_first_name}}
{{booking_date}}
{{invoice_total}}
{{company_name}}

Variables are organized into 10 categories with 90+ available tags. Type {{ in any text field to trigger the autocomplete popup.

Variable Modifiers

Transform variable output with pipe syntax:

  • {{customerfirstname|uppercase}} → "JOHN"
  • {{customerfirstname|capitalize}} → "John"
  • {{company_name|lowercase}} → "otesse"

Subject Line & Preheader

Above the canvas, configure:

  • Subject line — Supports variables (e.g., "Your booking on {{booking_date}} is confirmed")
  • Preheader — The preview text shown in email clients after the subject line

Preview Mode

Toggle the preview (eye icon in the toolbar) to see how the email renders:

  • Desktop preview (600px wide)
  • Variables are replaced with sample data
  • Inbox-style preview showing subject, preheader, and from name

Template Categories

Templates are organized by purpose:

  • Auth — OTP verification, password reset, welcome
  • Booking — Confirmation, reminders, en-route, completed, cancelled
  • Payment — Invoice, receipt, failed payment, refund
  • Subscription — Renewal, pause, cancellation
  • Marketing — Promotions, newsletters, seasonal offers
  • Support — Ticket confirmation, resolution
  • Onboarding — Welcome series, getting started guides
  • Worker — Shift assignments, schedule changes
  • General — Announcements, updates

HTML Export

Click Export HTML to generate production-ready HTML:

  • Inline CSS for email client compatibility
  • Responsive tables for consistent rendering
  • Alt text on all images
  • Unsubscribe link compliance (CAN-SPAM)
Invoice GenerationContact Management