Skip to main content
It’s possible to edit the HTML of a Courier Email notification directly using the Handlebars template override.

​
Where Handlebars Can Be Used

Handlebars templates can be used in several contexts within Courier:
  • Email Template Overrides: Direct HTML/Handlebars editing for email notifications (described below)
  • Template Blocks: Reusable Handlebars components within the Template Designer
  • Brand Templates: Custom header/footer templates for brand consistency
  • Brand Snippets: Reusable Handlebars code snippets across templates
Courier extends Handlebars with custom helpers for logic operations, string formatting, math functions, date handling, and internationalization.

​
Override the Template Designer With Handlebars

If you want to edit the HTML / Handlebars code of an Email Template directly, you can switch from the Template Designer to the Handlebars editor.
Create Your Notification
This is a useful way to import existing HTML templates into Courier.
Create Your Notification
Content created using the Handlebars override is not reusable across channels.
When you use the Handlebars override, your brand’s header, footer, and CSS styles are not applied. The override replaces the entire email body. If you need brand styling, include it directly in your Handlebars HTML or use template blocks within the Template Designer instead.
If you need to use Handlebars for a portion of your email, use template blocks and combine them with other block types to allow your non-handlebars code content to be re-used in other channels. Edits made in the Handlebars editor will not apply to other Email notifications. To define the look and feel of all your emails at once, customize your default brand template.

​
Use Cases

​
Conditionally Rendering Content

#if blocks can be used to control whether content is rendered. 
<!-- equal -->
{{#if (condition (var "some_variable") "==" "show")}}
  <div align="center">Hello!</div>
{{/if}}

<!-- strict equal -->
{{#if (condition (var "some_variable") "===" "show")}}
  <div align="center">Hello!</div>
{{/if}}

<!-- not equal -->
{{#if (condition (var "some_variable") "!=" "hide")}}
  <div align="center">Hello!</div>
{{/if}}

<!-- greater than -->
{{#if (condition (var "some_array.length") ">" 0)}}
  <div align="center">Hello!</div>
{{/if}}

<!-- greater than or equal -->
{{#if (condition (var "some_array.length") ">=" 0)}}
  <div align="center">Hello!</div>
{{/if}}

<!-- less than -->
{{#if (condition (var "some_array.length") "<" 0)}}
  <div align="center">Hello!</div>
{{/if}}

<!-- less than or equal -->
{{#if (condition (var "some_array.length") "<=" 0)}}
  <div align="center">Hello!</div>
{{/if}}

​
Pluralizing Text

The formatMessage helper can be used to pluralize text in rendered content. Pluralization respects the ICU format and entries follow Unicode CLDR rules. Example 
Your list contains
{{formatMessage
  "{itemCount, plural,
    =0 {no items}
    one {# item}
    other {# items}
}"
  itemCount=itemCount
}}.

​
Setting Variables in the Payload

Using a Handlebars block, you can transform and set a variable, which can then be used in a template: 
{{ set "number_rounded (round (var "data.number" )) }}
DesignerPreview
kewlkewl

​
Using the intl Block for Localization

You can wrap Handlebars functions with the intl block in order to access internationalization features including currency, number formatting and dates. See Handlebars-intl for more information. 
{{#intl formats=intl.formats locales="en-US"}}
  {{set
    "winPct_formatted"
    (formatMessage "{winPct, number, maximumFractionDigits=2}" winPct=(var "data.winPct"))
  }}
{{/intl}}