Dynamics 365 for Marketing – Customize email content with handlebar.js

I have recently been working with Microsoft’s Dynamics 365 for Marketing … I needed to dynamically personalize my email content, in this post I will describe now handlebar.js can be used to help with this task.

By way of a test I wanted to create an email that contained a personalised greeting relevant for a person’s gender and also to include a list of open cases directly in the email. To achieve this example I needed to show fields from my contact (and case) plus make use of conditions and loops in the email content.

Using handlebars to show fields

Within the email html we can add fields, such as a contacts name. This is done by using “handlebar brackets” around the field name. You can type these directly into your html or when using the graphical email Designer you can use the “Assist Edit” button.

To add fields from your contact you’d include things like;

{{contact.firstname}}
{{contact.lastname}}
{{contact.lastname}}
{{contact.address1_city}}

Using handlebar.js for conditions

But what if you’d like to do something a little more dynamic. In my simple example I wanted to conditionally add content based on the gender of the contact. To achieve this we use #if statements.

The syntax is as follows;

{{#if (eq contact.gendercode 1 )}} 
   Hi Mr {{contact.lastname}} 
{{else if (eq contact.gendercode 2 )}}
   Hi Ms {{contact.lastname}}
{{else}} 
   Hi {{contact.firstname}} 
{{/if}

I have used an “eq” operator. The full list of operators is;

eq – Equal to
ne – Not equal to
lt – Less than
gt – Greater than
lte – Less than or equal to
gte – Greater than or equal to

Using handlebar.js for loops

Additionally it is possible to have loops! Say your contact has multiple cases and you want to list all of them in an email, we can then use an each statement. The syntax for that is shown below;

{{#each contact.incident_contact_customerid}}
  {{this.ticketnumber}} - {{this.title}}
{{/each}}

Tip: You could combine the use of if statements and #each loops! Say you only wanted list just open cases then an if condition could be added into the #each loop.

The #each statement includes the relationship name between contact and my related entity. In my example that meant finding the relationship that joins contact and incident. I was initially unsure of the correct relationship name to use. You might be in the same boat! One “trick” I found was to create a segment that uses the relationship and get its name from query.

I could only use cases because I have added the case entity into the entities that sync into Dynamics Customer Insights (DCI). I used the “Customer insights sync” option in settings to add the case entity into my DCI. But a word of warning, don’t add entities unless you really need them. Once you have added them you can’t remove them!

My Example

The html in my example email ended up looking like this;

Tip:
I found that swapping between the html and design views had a tendency to move my manually entered html around. I found surrounding my #each loop by a div statement helped keep that block of code together as I intended.

Testing

When I view an email using the preview option or do a test send the #each loop does not show any results. Unfortunately this means the only approach I found to test my loop was to include the email in an actual customer journey.