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.
📖 Use Handlebars to display data from a custom event payload. Listrak's Managed Integrations uses webhooks to send data from your marketing partners to Listrak to enhance your email and SMS campaigns.
❓ New to using Handlebars? Learn more about the basics of Handlebars Templating Language.
Implementing Handlebars in Custom Event Journeys
Setting up the Custom Event
Before you can design an email using handlebars, you need to define the source of your data. Listrak's Managed Integrations allow you to harness loyalty or other data via webhooks in Listrak's Custom Events.
Custom Events can be created under Automations > Journey Hub Custom Events.
You must create at least one property.
If passing a JSON object, pass the stringified version as a string type.
💡 Easily stringify data with the JSON Formatter.
Include all dynamic properties in the custom event either as part of the JSON or as an individual property.
⚠️ Properties included in a JSON object cannot be used in a Custom Event Decision Split. If you plan to create separate logic paths, ensure the variable that defines the logic is an individual property.
Create the custom event. Ensure the checkbox is enabled so the event can be used to trigger a Journey.
Passing Custom Event Data
You can use Listrak's Cross Channel API to pass data to Listrak and iterate the individual data for each participant.
The way that the data is passed via API will impact how you will reference the data in the expression used in the handlebar code block.
Simple Expressions
When a simple expression of a single property and data point is passed over, the name of the property is used in the expression.
For example, to reference the order amount, the expression would become {{OrderAmount}}.
"OrderAmount": "993.99",
"OrderAmountShipping": "0.00",
"OrderAmountTax": "0.00",
"OrderAmountCoupon": "0.00",
"OrderAmountGiftCard": "0.00",
"OrderAmountTotal": "993.99",
"GrandTotalExcludingShipping": 993.99,
Nested Expressions
When data is nested within an property (e.g. OrderCustomer, below) the expression includes the name of both the property and specific field.
For example, to reference customer first name, the expression would become {{OrderCustomer.CustomerFirstName}}.
"OrderCustomer": {
"CustomerFirstName": "Bogus",
"CustomerLastName": "Gateway",
"CustomerEmail": "[email protected]",
"CustomerCity": "Muldrow",
"CustomerStateProvince": "Oklahoma",
"CustomerPostalCode": "74948",
"CustomerCountry": "United States",
"CustomerPhone": "",
"CustomerAddress1": "98547 South 4750 Road",
"CustomerAddress2": ""
}
Array Data in Expressions
When sending an array of data, for example all Wishlist items, the expression will use the name of the data as the key. In the example below the key for the array is "Items," but will be based on the array you pass in the API call.
For example, to reference the items below, the expression would become {{ForAll "Items"}}. Don't forget to include the closing {{/ForAll}} when creating the code block.
"Items": [
{
"ItemID": "14966764601580",
"ItemShippingTracking": "",
"ItemShippingService": "",
"ItemTrackingUrl": "",
"ItemShippingStatusId": 99,
},
{
"ItemID": "14966764634348",
"ItemShippingTracking": "",
"ItemShippingService": "",
"ItemTrackingUrl": "",
"ItemShippingStatusId": 99,
},
{
"ItemID": "14966764667116",
"ItemShippingTracking": "",
"ItemShippingService": "",
"ItemTrackingUrl": "",
"ItemShippingStatusId": 99,
}
]
Using Handlebars Code in a Journey
Once you have created your custom event and determined the naming convention for your expressions, you are ready to build your journey.
Create a new custom event journey. Learn more about creating a custom event journey.
Add an email element to the canvas of your custom event journey.
Set your properties in the element panel.
Give your message a name.
Select the list associated with the message.
⚠️ A contact will only receive a message if subscribed to the list. If the program associated with your custom event does not subscribe a contact, you can use the data management step to subscribe contacts.
Click Edit Message to add the handlebar template code:
If using HTML, add the handlebars code to your existing HTML code.
If using Composer:
Drag a custom HTML element to the desired location on the canvas.
Paste the handlebars template into the custom HTML panel.
Create the handlebars code block based on the custom event.
The block type will be Custom and the source will vary based on the name of your event property.
[[HB BlockType="Custom" Source="Custom.NameofCustomEventProperty"]]
Insert content for block here
[[/HB]]Add the expression(s) for the dynamic data you would like to display for each user.
Add any styling elements such as font color, font size, and adding table structures.
Finalize additional message content. Other content can be built in the Composer interface or in the HTML tab of the message builder.
⚠️ The handlebars content will not display when previewing a message. Activate the journey in test mode and trigger the custom event to send the a message to your personal inbox to see the rendering of the message with the information included in the custom event.