Channel

Overview

A channel element scopes a block of content to one delivery channel. Give each channel its own channel element at the top level to tailor a notification per channel, for example a detailed layout for email and a short message for push. Each channel element holds its content one of two ways: an elements array of Elemental blocks, or a raw object carrying a provider-specific payload (HTML or MJML for email, Slack blocks, a webhook body). A channel needs at least one of the two. Common uses

Different content for email, push, and SMS from one template
Provider-specific formats through raw (MJML, Slack blocks, webhook payloads)
A dedicated, editable structure for an email template (see Providing email content)

For per-element control without a wrapper, most elements also support a channels property that shows or hides that element per channel. See Control Flow.

Channel elements are only valid at the top level and cannot be nested. If any top-level element is a channel element, every sibling at that level must also be a channel element.

Providing Email Content

For email, put your content inside a single channel: email element. This is the standard structure for email templates: Design Studio stores them this way, and it keeps a template editable in the visual editor. Placing blocks at the top level also sends, but is not recommended. Within the channel element, provide content in one of two forms. Elemental blocks: populate elements with meta, text, image, action, and other blocks. Each block renders and stays individually editable in Design Studio.

{
  "type": "channel",
  "channel": "email",
  "elements": [
    { "type": "meta", "title": "Your order {{order_id}} shipped" },
    { "type": "text", "content": "Hi {{name}}, your order is on the way." },
    { "type": "action", "content": "Track order", "href": "{{tracking_url}}" }
  ]
}

A full HTML document: put a complete HTML document in raw.html (see Using raw data). Courier renders it as-is, as a single unit that is not editable block by block, so use it to port an existing HTML email whole. Keep a meta block for the subject, since raw.html has none.

{
  "type": "channel",
  "channel": "email",
  "elements": [
    { "type": "meta", "title": "Your order {{order_id}} shipped" }
  ],
  "raw": {
    "transformers": ["handlebars"],
    "html": "<!DOCTYPE html><html><body><h1>Hi {{name}}</h1><p>Your order is on the way.</p></body></html>"
  }
}

Blocks vs. Raw HTML

	Elemental blocks	Raw HTML
Editing	Editable block by block in Design Studio	A single HTML document, edited as code
Channels	Renders on email, push, SMS, inbox, and chat	Email only
Localization	Built-in `locales` per block	Handled yourself in the markup
Logic and personalization	`if`, `loop`, `ref`, plus Handlebars variables	Handlebars variables only
Design fidelity	Courier’s renderer, good for standard email layouts	Pixel-perfect, exactly your markup

Use raw HTML only when you need pixel-perfect control over an intricate design that won’t be edited, localized, or personalized inside Courier, such as a marketing email handed off from a design tool. For anything your team will tweak or reuse across channels, use Elemental blocks.

Fields

string

required

The type of element. For channel elements, this value must be "channel".

string

required

The channel the contents of this element should be applied to. Can be:

Standard channels: "email", "push", "direct_message", "sms"
Provider names: "slack", "discord", "teams", etc.
"default" - applies to all channels not explicitly specified

CourierElement[]

An array of Elemental elements to apply to the channel. If raw has not been specified, elements is required.

object

Provider-specific content for the channel, used instead of elements (a channel needs one or the other, and may include both, for example raw.html for the body plus a meta block in elements for the subject). Common keys:

html (string): full HTML document for email.
text (string): plain-text body or fallback.
subject (string): email subject line.
transformers (string[]): formatting passes to apply, such as ["handlebars"] or ["handlebars", "mjml"].
blocks / payload (object): provider-specific structures, such as Slack blocks or a webhook body.

string

The CSS font-family stack to apply to the rendered email. Only valid when channel is "email". Use the exact fontFamily value from the font catalog. Google Fonts are loaded automatically. Defaults to Helvetica, Arial, sans-serif if omitted.

{
  "type": "channel",
  "channel": "email",
  "font_family": "Roboto, Arial, sans-serif",
  "elements": [...]
}

string

The page background color shown behind the email content card. Only valid when channel is "email". Any valid CSS color value. Design Studio 2.0 sets this from the template’s background.

string

The background color of the email content card itself. Only valid when channel is "email". Any valid CSS color value. Design Studio 2.0 sets this from the template’s content background.

string

Body padding applied once around the whole email body, as a CSS px shorthand of one to four values (e.g., "48px" or "48px 64px"). Only valid when channel is "email". This is document-level spacing and is separate from the padding you can set on an individual text, action, or image block.

string

The base font size for the email’s body content, as a CSS px value (e.g., "16px"). Only valid when channel is "email". Applies to text, quote, and list blocks and to action button labels. Heading styles (h1, h2) and subtext keep their preset sizes. See Document-level typography and spacing.

string

The line height for the email’s body content, as a CSS px value or a unitless multiplier (e.g., "24px" or "1.5"). Only valid when channel is "email". Applies to all body content unless a block overrides it.

Document-Level Typography and Spacing

padding, font_size, and line_height on the email channel element set the defaults for the whole email, so you style a template once instead of repeating the same values on every block. All three are email-only; other channels ignore them.

{
  "type": "channel",
  "channel": "email",
  "font_family": "Roboto, Arial, sans-serif",
  "font_size": "16px",
  "line_height": "1.5",
  "padding": "48px 64px",
  "elements": [
    { "type": "meta", "title": "Your order shipped" },
    { "type": "text", "content": "Your order is on the way." },
    { "type": "text", "content": "Estimated arrival: {{eta}}", "font_size": "13px" }
  ]
}

What Each Field Covers

Field	Applies to	Not applied to
`padding`	The email body, once, as an outer margin around all content	Individual blocks, which keep their own `padding`
`font_size`	`text`, `quote`, and `list` blocks, and action button labels	Headings (`text_style` of `h1` or `h2`) and `subtext`, which keep their preset sizes
`line_height`	All body content	Blocks that set their own `line_height`

Precedence

A value set on a block always wins over the document-level value:

Block-level — font_size or line_height on an individual text or quote block.
Document-level — font_size or line_height on the email channel element.
Courier’s default — used when neither is set.

The two levels treat headings differently, which is intentional. Document-level font_size deliberately skips headings so your heading hierarchy survives a change to body size. Block-level font_size does override the text_style preset, so it’s the field to use when you want one specific heading at a custom size.

Set font_size and line_height together. Line height that stays fixed while font size grows produces cramped text, so a unitless multiplier such as "1.5" is usually the safer choice — it scales with whatever font size ends up applying to each block.

Examples & Variants

Using Elements

Provide different Elemental content per channel:

{
  "type": "channel",
  "channel": "email",
  "elements": [
    {
      "type": "meta",
      "title": "Order Confirmation"
    },
    {
      "type": "text",
      "content": "Your order #{{order_id}} has been confirmed. We'll send you tracking information once your order ships."
    },
    {
      "type": "action",
      "content": "View Order",
      "href": "https://app.example.com/orders/{{order_id}}"
    }
  ]
},
{
  "type": "channel",
  "channel": "push",
  "elements": [
    {
      "type": "meta",
      "title": "Order Confirmed"
    },
    {
      "type": "text",
      "content": "Order #{{order_id}} confirmed"
    }
  ]
}

Using Raw Data

Use raw channel data for provider-specific formats:

Email with MJML

{
  "type": "channel",
  "channel": "email",
  "raw": {
    "subject": "Order Confirmation",
    "html": "<mjml><mj-body><mj-section><mj-column><mj-text>Your order has been confirmed!</mj-text></mj-column></mj-section></mj-body></mjml>",
    "text": "Your order has been confirmed!",
    "transformers": ["handlebars", "mjml"]
  }
}

Slack

{
  "type": "channel",
  "channel": "slack",
  "raw": {
    "text": "Hello World!",
    "blocks": [
      {
        "type": "section",
        "text": {
          "type": "mrkdwn",
          "text": "Your order has been confirmed!"
        }
      }
    ]
  }
}

Webhook

{
  "type": "channel",
  "channel": "webhook",
  "raw": {
    "payload": {
      "body": {
        "event": "order.confirmed",
        "order_id": "{{order_id}}",
        "timestamp": "{{timestamp}}"
      }
    }
  }
}

Default Channel

Use "default" to provide content for all channels not explicitly specified:

{
  "type": "channel",
  "channel": "email",
  "elements": [
    {
      "type": "text",
      "content": "Detailed email content here"
    }
  ]
},
{
  "type": "channel",
  "channel": "default",
  "elements": [
    {
      "type": "text",
      "content": "Content for push, SMS, and other channels"
    }
  ]
}

Channel-Specific Considerations

Email

Supports full Elemental elements or raw HTML/MJML
Can use raw.subject for email subject line
Supports transformers array for templating engines

Push

Typically uses meta.title for notification title
Content should be concise due to character limits
Supports action buttons via action elements

SMS

Very limited character count
Best for short, essential messages
No rich formatting support

Direct Message (Slack, Discord, Teams, etc.)

Provider-specific formats via raw property
Can use provider-specific block structures
Supports rich interactive elements per provider

Meta Element - For channel-specific titles and subjects
Text Element - For channel-specific body content
Action Element - For channel-specific call-to-action buttons
Control Flow - For using channels property on individual elements

Platform

Developer Tools

Help

Overview

Providing Email Content

Blocks vs. Raw HTML

Fields

Document-Level Typography and Spacing

What Each Field Covers

Precedence

Examples & Variants

Using Elements

Using Raw Data

Email with MJML

Slack

Webhook

Default Channel

Channel-Specific Considerations

Email

Push

SMS

Direct Message (Slack, Discord, Teams, etc.)

​Overview

​Providing Email Content

​Blocks vs. Raw HTML

​Fields

​Document-Level Typography and Spacing

​What Each Field Covers

​Precedence

​Examples & Variants

​Using Elements

​Using Raw Data

​Email with MJML

​Slack

​Webhook

​Default Channel

​Channel-Specific Considerations

​Email

​Push

​SMS

​Direct Message (Slack, Discord, Teams, etc.)

​Related Elements

Overview

Providing Email Content

Blocks vs. Raw HTML

Fields

Document-Level Typography and Spacing

What Each Field Covers

Precedence

Examples & Variants

Using Elements

Using Raw Data

Email with MJML

Slack

Webhook

Default Channel

Channel-Specific Considerations

Email

Push

SMS

Direct Message (Slack, Discord, Teams, etc.)

Related Elements