AppPush
WebPush
WhatsApp
Email
SMS
OTP
Marketing Automation
Dynamic Templates
最新更新：2024-12-02
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
<p>Hello {{firstname}}</p>
<p>Hello {{firstname}}</p>
このコードブロックはフローティングウィンドウ内に表示されます
Test Data
{ "firstName": "Engagelab" }
{ "firstName": "Engagelab" }
このコードブロックはフローティングウィンドウ内に表示されます
Rendering Result
<p>Hello Engagelab</p>
<p>Hello Engagelab</p>
このコードブロックはフローティングウィンドウ内に表示されます
Nested Object Replacement
Template Example
<p>Hello {{user.profile.firstName}}</p>
<p>Hello {{user.profile.firstName}}</p>
このコードブロックはフローティングウィンドウ内に表示されます
Test Data
{
"user": {
"profile": {
"firstName": "Engagelab"
}
}
}
{
"user": {
"profile": {
"firstName": "Engagelab"
}
}
}
このコードブロックはフローティングウィンドウ内に表示されます
Rendering Result
<p>Hello Engagelab</p>
<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
<p>{{formatDate timeStamp dateFormat}}</p>
<!-- Example of time zone offset -->
<p>{{formatDate timeStamp dateFormat timezoneOffset}}</p>
<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
<!-- 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>
<!-- 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
<p>Thank you for contacting us about {{insert businessName "your business"}}.</p>
<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
<!-- 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>
<!-- 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}}
<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}}
{{#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
<!-- 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>
<!-- 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}}
<p class="warning">WARNING: This entry does not have a license!</p>
{{/unless}}
{{#unless license}}
<p class="warning">WARNING: This entry does not have a license!</p>
{{/unless}}
このコードブロックはフローティングウィンドウ内に表示されます
Test Data
{}
{}
このコードブロックはフローティングウィンドウ内に表示されます
Rendering Result
<!-- Rendering Result -->
<p class="warning">WARNING: This entry does not have a license!</p>
<!-- 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
<p>
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{/greaterThan}}
</p>
<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
<p>
The truck is not allowed to pass.
</p>
<p>
The truck is not allowed to pass.
</p>
このコードブロックはフローティングウィンドウ内に表示されます
with else
Template Example
<p>
{{#greaterThan truckWeight limitWeight}}
The truck is not allowed to pass.
{{else}}
The truck is allowed to pass.
{{/greaterThan}}
</p>
<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
<p>
The truck is allowed to pass.
</p>
<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
<p>
{{#in fruit favoriteFruits}}
Like to eat.
{{else}}
Do not like to eat.
{{/in}}
</p>
<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
<!-- Rendering Result One -->
<p>
Like to eat.
</p>
<!-- Rendering Result Two -->
<p>
Do not like to eat.
</p>
<!-- 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}}
<p>Hello {{firstName}}</p>
{{/with}}
{{#with user.profile}}
<p>Hello {{firstName}}</p>
{{/with}}
このコードブロックはフローティングウィンドウ内に表示されます
Test Data
{
"user": {
"profile": {
"firstName": "Engagelab"
}
}
}
{
"user": {
"profile": {
"firstName": "Engagelab"
}
}
}
このコードブロックはフローティングウィンドウ内に表示されます
Rendering Result
<p>Hello Engagelab</p>
<p>Hello Engagelab</p>
このコードブロックはフローティングウィンドウ内に表示されます
