Dynamic Templates

The Engagelab Email dynamic templates support the Handlebars template language to present the personalized content you send via the API.

Variable Replacement

Basic Replacement

Template Example

Hello {{firstname}}

          <p>Hello {{firstname}}</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

{ "firstName": "Engagelab" }

          { "firstName": "Engagelab" }

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

Hello Engagelab

          <p>Hello Engagelab</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Nested Object Replacement

Template Example

Hello {{user.profile.firstName}}

          <p>Hello {{user.profile.firstName}}</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

{ "user": { "profile": { "firstName": "Engagelab" } } }

          {
    "user": {
        "profile": {
            "firstName": "Engagelab" 
        }
    }
}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

Hello Engagelab

          <p>Hello Engagelab</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

formatDate

The formatDate function accepts Unix timestamps or time in ISO8601 format and converts it into the format you specify using the markers in the following table. Taking the UTC time 1987-09-20T20:55:00.000Z as an example, the conversion and display results are shown in the table below:

Placeholder	Result
YYYY	1987
YY	87
MMMM	September
MMM	Sep
MM	09
M	9
DD	20
D	20
dddd	Sunday
ddd	Sun
hh	08
h	8
HH	20
H	20
mm	55
m	55
ss	00
s	0
A	PM
ZZ	+0000
Z	+00:00

Template Example

{{formatDate timeStamp dateFormat}}  {{formatDate timeStamp dateFormat timezoneOffset}}

          <p>{{formatDate timeStamp dateFormat}}</p>
<!-- Example of time zone offset -->
<p>{{formatDate timeStamp dateFormat timezoneOffset}}</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

{ "timeStamp": "1987-09-20T12:55:00.000Z", "dateFormat": "YYYY-MM-DD HH:mm:ss A", "timezoneOffset": "+0800" }

          {
  "timeStamp": "1987-09-20T12:55:00.000Z",
  "dateFormat": "YYYY-MM-DD HH:mm:ss A",
  "timezoneOffset": "+0800"
}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

1987-09-20 12:55:00 PM  1987-09-20 20:55:00 PM

          <!-- Rendering Result（Template One） -->
<p>1987-09-20 12:55:00 PM</p>

<!-- Rendering Result（Template Two） -->
<p>1987-09-20 20:55:00 PM</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Insert

Template Example

Thank you for contacting us about {{insert businessName "your business"}}.

          <p>Thank you for contacting us about {{insert businessName "your business"}}.</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

// Test Data One {} // Test Data One { "businessName": "Engagelab" }

          // Test Data One
{}

// Test Data One
{
    "businessName": "Engagelab"
}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

Hello Ben! Thank you for contacting us about your business.  Hello Customer! Thank you for contacting us about Engagelab.

          <!-- Rendering Result One -->
<p>Hello Ben! Thank you for contacting us about your business.</p>

<!-- Rendering Result二 -->
<p>Hello Customer! Thank you for contacting us about Engagelab.</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Conditional Statements

If, Else, Else If

Template Example

{{#if user.profile.isTeacher}} Hello, Teacher {{user.profile.firstName}} {{else if user.profile.isStudent}} Hello, Student {{user.profile.firstName}} {{else}} Hello, {{user.profile.firstName}}! Welcome. {{/if}}

          {{#if user.profile.isTeacher}}
   <p>Hello, Teacher {{user.profile.firstName}}</p>
{{else if user.profile.isStudent}}
   <p>Hello, Student {{user.profile.firstName}}</p>
{{else}}
   <p>Hello, {{user.profile.firstName}}! Welcome.</p>
{{/if}}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

// Test Data One { "user": { "profile": { "firstName": "Zhang San", "isTeacher": true } } } // Test Data二 { "user": { "profile": { "firstName": "Li Si", "isStudent": true } } } // Test Data三 { "user": { "profile": { "firstName": "Wang Wu", } } }

          // Test Data One
{
    "user": {
        "profile": {
            "firstName": "Zhang San",
            "isTeacher": true
        }
    }
}

// Test Data二
{
    "user": {
        "profile": {
            "firstName": "Li Si",
            "isStudent": true
        }
    }
}

// Test Data三
{
    "user": {
        "profile": {
            "firstName": "Wang Wu",
        }
    }
}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

Hello, Teacher Zhang San  Hello, Student Li Si  Hello, Wang Wu! Welcome.

          <!-- Rendering Result（Test Data One） -->
<p>Hello, Teacher Zhang San</p>

<!-- Rendering Result（Test Data二） -->
<p>Hello, Student Li Si</p>

<!-- Rendering Result（Test Data三） -->
<p>Hello, Wang Wu! Welcome.</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Unless

Template Example

{{#unless license}} WARNING: This entry does not have a license! {{/unless}}

          {{#unless license}}
    <p class="warning">WARNING: This entry does not have a license!</p>
{{/unless}}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

{}

{}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

WARNING: This entry does not have a license!

          <!-- Rendering Result -->
<p class="warning">WARNING: This entry does not have a license!</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Comparison Operators

Comparison operators support two usage modes: basic and with else.

The supported syntax is shown in the following table:

Expression	Explanation
greaterThan	>
lessThan	<
equals	=
greaterThanOrEquals	>=
lessThanOrEquals	<=
notEquals	!=

basic

Template Example

{{#greaterThan truckWeight limitWeight}} The truck is not allowed to pass. {{/greaterThan}}

          <p> 
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{/greaterThan}}
</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

{ "truckWeight": 6, "limitWeight": 5 }

          {
    "truckWeight": 6,
    "limitWeight": 5
}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

The truck is not allowed to pass.

          <p> 
The truck is not allowed to pass.
</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

with else

Template Example

{{#greaterThan truckWeight limitWeight}} The truck is not allowed to pass. {{else}} The truck is allowed to pass. {{/greaterThan}}

          <p> 
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{else}}
The truck is allowed to pass.
{{/greaterThan}}
</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

{ "truckWeight": 5, "limitWeight": 5 }

          {
    "truckWeight": 5,
    "limitWeight": 5
}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

The truck is allowed to pass.

          <p> 
The truck is allowed to pass.
</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

in, notIn

Like comparison operators, they also support two usage modes: basic and with else.

Template Example

{{#in fruit favoriteFruits}} Like to eat. {{else}} Do not like to eat. {{/in}}

          <p>
{{#in fruit favoriteFruits}}
Like to eat.
{{else}}
Do not like to eat.
{{/in}}
</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

// Test Data One { "fruit": "Apple", "favoriteFruits": [ "Apple", "Banana", "Orange" ] } // Test Data二 { "fruit": "Grape", "favoriteFruits": [ "Apple", "Banana", "Orange" ] }

          // Test Data One
{
    "fruit": "Apple",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

// Test Data二
{
    "fruit": "Grape",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

Like to eat.  Do not like to eat.

          <!-- Rendering Result One -->
<p>
Like to eat.
</p>

<!-- Rendering Result Two -->
<p>
Do not like to eat.
</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Iteration

Each

Template Example

<ul> {{#each fruits}} <li>{{this}}</li> {{/each}} </ul>

          <ul>
{{#each fruits}}
    <li>{{this}}</li>
{{/each}}
</ul>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

{ "fruits": [ "Apple", "Banana", "Orange" ] }

          {
    "fruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

<ul> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul>

          <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
</ul>

โค้ดนี้โชว์เป็นหน้าต่างลอย

Supplementary Explanation

When using each to iterate over an array, you can use {{@index}} to reference the current loop index.

{{#each array}} {{@index}}: {{this}} {{/each}}

          {{#each array}} {{@index}}: {{this}} {{/each}}

โค้ดนี้โชว์เป็นหน้าต่างลอย

In addition, for object iteration, {{@key}} is used to reference the current key name.

{{#each object}} {{@key}}: {{this}} {{/each}}

          {{#each object}} {{@key}}: {{this}} {{/each}}

โค้ดนี้โชว์เป็นหน้าต่างลอย

With

Template Example

{{#with user.profile}} Hello {{firstName}} {{/with}}

          {{#with user.profile}}
<p>Hello {{firstName}}</p>
{{/with}}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Test Data

{ "user": { "profile": { "firstName": "Engagelab" } } }

          {
    "user": {
        "profile": {
            "firstName": "Engagelab" 
        }
    }
}

โค้ดนี้โชว์เป็นหน้าต่างลอย

Rendering Result

Hello Engagelab

          <p>Hello Engagelab</p>

โค้ดนี้โชว์เป็นหน้าต่างลอย