Skip to main content
HTML blocks let you add raw HTML or other markup to your notification content. Use them when you need full control over markup (e.g. tracking pixels, custom layouts, or channel-specific HTML).

​
Adding an HTML block

  1. In Design Studio, select a channel.
  2. Add an HTML block from the block sidebar or toolbar.
  3. Enter your HTML in the block editor.
HTML block in Design Studio

​
HTML editor

The HTML block offers an inline code editor in the right panel. Enter standard HTML (like <div>, <table>, or <img>) and inline CSS for custom layouts or tracking (e.g., analytics pixels).
HTML editor in Design Studio
Changes in the editor appear instantly in the canvas preview. You can see your updates reflected in real time as you type.
HTML example in Design Studio
Click the expand icon in the top-right corner of the code editor to open a larger editing window.

​
Variables and Handlebars

HTML blocks support variables using the {{variable}} syntax and the full range of Handlebars helpers, including {{#if}} for conditional logic and {{#each}} for looping over arrays. For example, you can iterate over a data.items array to build a custom list: 
<ul>
{{#each data.items}}
  <li>{{this.name}} — {{this.price}}</li>
{{/each}}
</ul>
This is useful when you need loop structures beyond what the List block’s Loop on feature supports, such as nested loops, conditional items within iterations, or fully custom HTML markup.
Handlebars and variables in HTML block
Variables and Handlebars expressions in HTML blocks only resolve on actual send; during preview mode, you see the raw syntax, not sample values.

​
Best practices

  • Keep markup minimal and test across channels.
  • Use variables for dynamic content rather than hardcoding.
  • Validate your HTML and CSS to avoid rendering issues in different email clients.

Variables

Dynamic content in code

Email-Safe Formatting

Tips for reliable HTML and CSS