Skip to main content

​
Overview

The HTML element allows you to include raw HTML content in your notifications. This gives you complete control over the HTML structure and styling when standard Elemental elements don’t meet your needs. When to use:
  • Custom HTML structures (tables, complex layouts)
  • HTML that requires specific formatting not available in Elemental elements
  • Legacy HTML content that needs to be preserved
  • Custom styling that requires direct HTML/CSS
HTML elements are only supported in email channels. They will not render in push, SMS, or other channels. For cross-channel compatibility, use standard Elemental elements instead.

​
Basic Example

{
  "type": "html",
  "content": "<h1>Hello, <strong>World!</strong></h1>"
}

​
Fields

​
type
string
required
The type of element. For HTML elements, this value must be "html".
​
content
string
required
The raw HTML content to be included in the notification. This can include any valid HTML markup, including CSS styles.
​
locales
object
Region-specific content for localization. See the Locales documentation for more details.
​
channels
string[]
An array of channel names. The HTML element will only be rendered for the specified channels. See Control Flow documentation for details.

​
Examples & Variants

​
Simple HTML

Basic HTML content: 
{
  "type": "html",
  "content": "<h1>Hello, <strong>World!</strong></h1>"
}

​
HTML Table

Create custom HTML tables: 
{
  "type": "html",
  "content": "<table style='width: 100%; border-collapse: collapse;'><tr><th style='border: 1px solid #ddd; padding: 8px;'>Item</th><th style='border: 1px solid #ddd; padding: 8px;'>Price</th></tr><tr><td style='border: 1px solid #ddd; padding: 8px;'>Product A</td><td style='border: 1px solid #ddd; padding: 8px;'>$99.99</td></tr></table>"
}

​
HTML with Handlebars

Use Handlebars variables in HTML: 
{
  "type": "html",
  "content": "<div><h2>Order #{{order_id}}</h2><p>Total: ${{order_total}}</p></div>"
}

​
HTML with Localization

Localize HTML content: 
{
  "type": "html",
  "content": "<h1>Welcome!</h1>",
  "locales": {
    "es": {
      "content": "<h1>¡Bienvenido!</h1>"
    },
    "fr": {
      "content": "<h1>Bienvenue!</h1>"
    }
  }
}

​
Channel-Specific HTML

Only render HTML for email: 
{
  "type": "html",
  "channels": ["email"],
  "content": "<div style='background: #f5f5f5; padding: 20px;'>Email-only HTML content</div>"
}

​
Best Practices

  • Use sparingly: Prefer standard Elemental elements when possible for better cross-channel compatibility
  • Email only: Remember that HTML elements only work in email channels
  • Test thoroughly: HTML rendering can vary across email clients; test in multiple clients
  • Use inline styles: Email clients often strip <style> tags, so use inline CSS
  • Keep it simple: Complex HTML may not render correctly in all email clients

​
Channel Support

  • Email: ✅ Full support
  • Push: ❌ Not supported
  • SMS: ❌ Not supported
  • Inbox: ❌ Not supported