Handlebars templating language provides a way to create a custom layout for emails in Journey Hub. Handlebars can be used in both HTML and Listrak Composer.

Handlebars can be implemented in:

Product-based journey emails to display carted or purchased items
Custom event journeys to display data from Listrak's real-time integrations
Content Collections in broadcast emails to speed up message creation

What are Handlebars?

Handlebars is a form of templating language that is used to generate dynamic HTML. Handlebars can be used to generate email HTML or website HTML where variables are replaced with dynamic data.

Components of Handlebar Language

Learn more below about the elements of the templating language that can be used in your Listrak emails.

Basic Expressions

Expressions are the building blocks of the Handlebars language.

The most basic expression is the dynamic variable enclosed in two pairs of curly brackets. A contact's value will replace the expression when the email is sent.

{{Sku}}

Non-escaped Expressions

Expressions are HTML-escaped by default. This will convert a value such as & into &amp. If a value should not be escaped, the expression should be enclosed in three pairs of curly brackets (e.g. full website URL or product title that contains special characters).

{{{ProductLinkURL}}}

Helpers

Helpers allow Handlebars to execute simple logic procedures or help format data. The Helpers below can be used in HTML and Composer.

Helper Tag	Description	Code Example
IfCond	Compare two different values	{{IfCond SalePrice 0}} ... {{/IfCond}}
ForAll	Evaluate all items included in an array (e.g. items as the array name) Parameters: Property: Property to loop through, must be an array. Sort: Sort all items by the property. Take: Only take (show) n number of items Skip: Skip (don't show) n number of items	{{ForAll "ArrayName"}} ... {{/ForAll}} Sort by product title {{ForAll "Items" "Sort:Title"}} ... {{/ForAll}} Sort by item price: most expensive first {{ForAll "Items" "SortDesc:Price"}} ... {{/ForAll}}
FormatCurrency	Format a string, integer, or decimal as currency. Parameters: Value: Raw value to be formatted. Format: Currency format ('USD', 'FRCA', 'GBP', 'EURO') Decimals: Number of decimals to show Default value: Value show if data is invalid or null	Formatting using price as source {{FormatCurrency Price}} Formatting using price as source, displayed in US dollars with 2 decimal points {{FormatCurrency Price 'USD' 2}} Formatting using price as source, displayed in US dollars with 2 decimal points. No price is displayed if the value is null. {{FormatCurrency Price 'USD' 2 'No Price'}}
Using Multiple Helpers	You can combine helpers to create customized displays.	{{ForAll "Items" "SortDesc:Price" "Take:1" Journey:Product.Item.Title }} ... {{/ForAll}}

Looping

Looping allows the template to display multiple values from an array of items. Looping is commonly used when a list of items needs to be displayed. For example, items in a wishlist, a customer's cart, or a customer's order. Looping is created using the ForAll helper discussed above.

💡 The appearance of data displayed by the handlebars can be customized using standard email HTML styling. For example, you can add tables, specify font colors, font weights, and alignment.

 {{ForAll Items}}
                  <tr>
                    <td style="padding-top:12px;">
                      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                          <td style="width:72px;" class="stack">
                            <img class="item-img" src="{{ItemImageUri}}" alt="{{ItemTitle}}" width="64" height="64" style="display:block;">
                          </td>
                          <td class="stack" style="padding-left:10px;">
                            <div class="text" style="font-weight:bold; color:#111827;">{{ItemTitle}}</div>
                            <div class="small" style="margin-top:2px;">SKU: {{ProductCode}} &middot; Part #: {{ProductPartNo}} &middot; {{ProductID}}</div>
                            <div class="small" style="margin-top:6px;">
                              Status: {{ItemStatus}} (ID: {{ItemStatusId}})<br>
                              Ship status: {{ItemShippingStatus}} &middot; <a href="{{ItemTrackingUrl}}" target="_blank" style="color:#111827;text-decoration:underline;">Track</a>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td class="right">{{ItemQuantity}}</td>
                    <td class="right">{{ItemPrice}}</td>
                    <td class="right">{{ItemSubtotal}}</td>
                  </tr>
                  {{/ForAll}}

Block Type

Every Handlebars code block in Listrak must start with the block type. The block type specifies the source of the data that is displayed in the expression or array.

The block type consists of an opening tag that is placed at the beginning of the code and a closing tag that is placed at the end. The chart below outlines the block type identifiers that can be used in Listrak.

Journey Type	Tags
Cart Abandonment	[[HB BlockType="Cart" Source="CartPayload"]] Insert handlebars code here [[/HB]]
Purchase	[[HB BlockType="Purchase" Source="Purchase"]] Insert handlebars code here [[/HB]]
Review Request	[[HB BlockType="Purchase" Source="Purchase"]] Insert handlebars code here [[/HB]]
Winback	[[HB BlockType="Purchase" Source="Purchase"]] Insert handlebars code here [[/HB]]
Replenishment	[[HB BlockType="Purchase" Source="Purchase"]] Insert handlebars code here [[/HB]]
Custom Events	[[HB BlockType="Custom" Source="Custom.NameofCustomEventProperty"]] Insert handlebars code here [[/HB]]
Shopify Order Confirmation	[[HB BlockType="OrderConfirmation" Source="OrderConfirmation"]] Insert handlebars code here [[/HB]]
Shopify Order Refund	BlockType="OrderRefund" Source="OrderRefund"]] Insert handlebars code here [[/HB]]
Shopify Order Cancelled	BlockType="OrderCancelled" Source="OrderCancelled"]] Insert handlebars code here [[/HB]]
Shopify Shipping Confirmation	[[HB BlockType="ShippingConfirmation" Source="ShippingConfirmation"]] Insert handlebars code here [[/HB]]
Shopify Shipment Delivered	BlockType="ShipmentDelivered" Source="ShipmentDelivered"]] Insert handlebars code here [[/HB]]
Shopify Shipment Out for Delivery	BlockType="ShipmentOutForDelivery" Source="ShipmentOutForDelivery"]] Insert handlebars code here [[/HB]]
Shopify Shipping Update	BlockType="ShippingUpdate" Source="ShippingUpdate"]] Insert handlebars code here [[/HB]]

Displaying Handlebars Code in Email

Once you have your code created, you can implement it in your email program. There are three main ways to display handlebars code:

Build an HTML email
Display as an HTML block
Display using HTML and text elements in Composer

💡 Build these sections in Saved Content if you are displaying data in multiple email messages to make updating the data or creative elements quickly.

HTML Emails

You can fully code an email in HTML in Listrak's HTML editor on the message authoring page. You have full control over customizing the appearance of the handlebars data, header styles, and more.

💡 If you do not see an HTML tab on the message authoring page, contact your Account team to enable it.

Using HTML Blocks in Composer

The HTML block allows you to design the rest of the email using the Listrak Composer interface and then add the full handlebars styled element as HTML.

⚠️ There are some HTML coding functions that are restricted in the HTML block to prevent code interference.

Drag a custom HTML element to the desired location on the canvas.
Paste the handlebars template into the custom HTML panel.
1. Create the handlebars code block based on the available event data.
2. Ensure a block type is include and matches the event data.
Add any styling elements such as font color, font size, and adding table structures.

HTML and Composer Text Elements

This options limits the amount of HTML you have to code when implementing handlebars templating language. HTML code is required for any image-based element while built-in Composer elements can be used for text and buttons.

Create the block type area. The first step is to add the code for the block type you are designing.
1. Drag two (2) one-column structures onto the canvas.
2. Add an HTML element to each structure.
3. In the first HTML element, paste the opening block tag from the table above. For example:
```
[[HB BlockType="Cart" Source="CartPayload"]]
```
4. If displaying multiple items using looping, add the For All opening tag directly after the opening tag.
```
{{ForAll "Items"}}
```
5. In the second HTML element, paste the closing block tag from the able above.
```
[[/HB]]
```
6. If displaying multiple items using looping, add the closing For All tag.
```
{{/ForAll}}
```

Add image elements.

Drag the structure you would like to use for your image between the two HTML elements.
Add an HTML element to the structure or column that matches your design.

Paste the code below into the HTML element.

<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
    <tr class="image">
        <td align="center" style="padding: 10px 10px 10px 10px;"> <a href="{{LinkUrl}}" title="" target="_blank" style="white-space: nowrap;"><img src="{{ProductImageUrl}}" alt="Product" style="display:block; width: 100%; max-width: [[insert pixel dimensions]] !important;border:0px;" width="[[insert width do not include px]]"></a> </td>
    </tr>
</table>

Adjust the pixel and width dimensions based on the details below.
1. Full width one-column: 600px
2. Full width two-column: 300px
3. Full width three-column: 200px
4. Full width four-column: 150px
Adjust any other styling to match your branding.

Add text elements.
1. Drag the structure you would like to use for your text, if needed. Place the structure between the two HTML elements.
2. Add a text or headline element to the structure.
3. Paste the handlebar expression you would like to display into the text element.
4. Customize the appearance of the text, for example font family or font size.
5. Repeat for any additional text elements.
Add button elements.
1. Drag the structure you would like to use for your text, if needed. Place the structure between the two HTML elements.
2. Add a button to the structure.
3. Paste the handlebar expression for the product link into the button link.