Email Styling
Email styling determines how your automated responses appear in your customers' inboxes. Airmailer gives you full control over the visual presentation while ensuring deliverability and compatibility across email clients.
Email Template Structure
Every email sent by your AI agent follows this structure:
┌─────────────────────────────────────────────┐
│ HEADER │
│ [Logo] Brand Name │
├─────────────────────────────────────────────┤
│ │
│ BODY │
│ │
│ AI Agent's response content goes here. │
│ │
│ Any links or buttons appear in your │
│ brand's primary color. │
│ │
├─────────────────────────────────────────────┤
│ FOOTER │
│ │
│ Your mailing address │
│ (Required for compliance) │
│ │
│ Powered by Airmailer │
└─────────────────────────────────────────────┘
Previewing Your Email Style
Navigate to Email in the sidebar to see a live preview of your email template:
Preview Features
- Live Updates: See changes as you make them in Brand Settings
- Light/Dark Toggle: Preview both display modes
- Realistic Content: Sample email content shows real-world appearance
What to Check
- Logo visibility and positioning
- Color contrast and readability
- Footer information accuracy
- Overall brand consistency
Light Mode Configuration
Light mode is the default display for most email clients.
Recommended Settings:
| Element | Suggested Value |
|---------|-----------------|
| Background | #FFFFFF (white) or #F9FAFB (light gray) |
| Text | #1A202C (near black) for readability |
| Primary | Your main brand color |
| Accent | A complementary highlight color |
Dark Mode Configuration
Many email clients now support dark mode. Configure dark mode colors to ensure your emails look great everywhere.
Recommended Settings:
| Element | Suggested Value |
|---------|-----------------|
| Background | #1A202C (dark gray) or #000000 (black) |
| Text | #F7FAFC (light gray) for contrast |
| Primary | A lighter variant of your brand color |
| Accent | Adjusted for dark backgrounds |
Dark Mode Tips
- Test your logo against dark backgrounds
- Consider uploading a separate dark mode logo
- Ensure sufficient contrast for all text
Email Footer Requirements
Your email footer must include a physical mailing address for compliance with:
- CAN-SPAM (United States)
- GDPR (European Union)
- CASL (Canada)
Footer Format
Your Company Name
123 Main Street, Suite 100
San Francisco, CA 94105
United States
Or use a PO Box:
Your Company Name
PO Box 12345
New York, NY 10001
United States
Email Client Compatibility
Airmailer's email templates are tested across:
| Email Client | Support Level | |--------------|---------------| | Gmail (Web & Mobile) | Full | | Apple Mail | Full | | Outlook (Desktop) | Full | | Outlook (Web) | Full | | Yahoo Mail | Full | | Samsung Email | Full | | Other clients | Generally compatible |
Known Considerations
- Outlook Desktop: Some advanced CSS may render differently
- Gmail App: Images may require "display images" approval
- Dark Mode: Behavior varies by client; we optimize for best compatibility
Responsive Design
All Airmailer emails are responsive:
- Desktop: Full-width layout with comfortable reading width
- Tablet: Adjusted margins for medium screens
- Mobile: Single-column layout for easy mobile reading
You don't need to configure anything—responsive design is automatic.
Best Practices
Keep It Simple
- Minimal distractions from your message
- Clear call-to-action buttons
- Consistent spacing and typography
Brand Consistency
- Match your website colors
- Use the same logo across all materials
- Maintain consistent tone in the content
Accessibility
- High contrast text (4.5:1 ratio minimum)
- Readable font sizes (14px minimum)
- Alt text for images (handled automatically)
Troubleshooting
Emails look different from preview
- Email clients may override some styles
- Test in actual email clients, not just the preview
- Some clients strip certain CSS properties
Footer not appearing
- Ensure you've entered a mailing address in Brand Settings
- The footer is required and cannot be removed
Images not loading
- Some email clients block images by default
- Recipients may need to click "Display images"
- Your logo includes fallback text for this scenario