Template Dinamis

Template dinamis Email EngageLab mendukung bahasa template Handlebars untuk menampilkan konten personalisasi yang dikirim melalui API.

Penggantian Variabel

Penggantian Dasar

Contoh Template

Halo {{firstname}}

              
              <p>Halo {{firstname}}</p>

Tampilkan blok kode ini di jendela mengambang

Data Uji

{ "firstName": "Engagelab" }

              
              { "firstName": "Engagelab" }

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

Halo Engagelab

              
              <p>Halo Engagelab</p>

Tampilkan blok kode ini di jendela mengambang

Penggantian Objek Bersarang

Contoh Template

Halo {{user.profile.firstName}}

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

Tampilkan blok kode ini di jendela mengambang

Data Uji

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

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

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

Halo Engagelab

              
              <p>Halo Engagelab</p>

Tampilkan blok kode ini di jendela mengambang

formatDate

Fungsi formatDate menerima timestamp Unix atau waktu dalam format ISO8601 dan mengubahnya ke format yang Anda tentukan menggunakan penanda pada tabel berikut. Mengambil waktu UTC 1987-09-20T20:55:00.000Z sebagai contoh, hasil konversi dan tampilannya ditunjukkan pada tabel di bawah:

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

Contoh Template

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

              
              <p>{{formatDate timeStamp dateFormat}}</p>
<!-- Contoh offset zona waktu -->
<p>{{formatDate timeStamp dateFormat timezoneOffset}}</p>

Tampilkan blok kode ini di jendela mengambang

Data Uji

{ "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"
}

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

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

              
              <!-- Hasil Rendering (Template Satu) -->
<p>1987-09-20 12:55:00 PM</p>

<!-- Hasil Rendering (Template Dua) -->
<p>1987-09-20 20:55:00 PM</p>

Tampilkan blok kode ini di jendela mengambang

Insert

Contoh Template

Terima kasih telah menghubungi kami mengenai {{insert businessName "bisnis Anda"}}.

              
              <p>Terima kasih telah menghubungi kami mengenai {{insert businessName "bisnis Anda"}}.</p>

Tampilkan blok kode ini di jendela mengambang

Data Uji

// Data Uji Satu {} // Data Uji Dua { "businessName": "Engagelab" }

              
              // Data Uji Satu
{}

// Data Uji Dua
{
    "businessName": "Engagelab"
}

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

Halo Ben! Terima kasih telah menghubungi kami mengenai bisnis Anda.  Halo Customer! Terima kasih telah menghubungi kami mengenai Engagelab.

              
              <!-- Hasil Rendering Satu -->
<p>Halo Ben! Terima kasih telah menghubungi kami mengenai bisnis Anda.</p>

<!-- Hasil Rendering Dua -->
<p>Halo Customer! Terima kasih telah menghubungi kami mengenai Engagelab.</p>

Tampilkan blok kode ini di jendela mengambang

Pernyataan Kondisional

If, Else, Else If

Contoh Template

{{#if user.profile.isTeacher}} Halo, Guru {{user.profile.firstName}} {{else if user.profile.isStudent}} Halo, Siswa {{user.profile.firstName}} {{else}} Halo, {{user.profile.firstName}}! Selamat datang. {{/if}}

              
              {{#if user.profile.isTeacher}}
   <p>Halo, Guru {{user.profile.firstName}}</p>
{{else if user.profile.isStudent}}
   <p>Halo, Siswa {{user.profile.firstName}}</p>
{{else}}
   <p>Halo, {{user.profile.firstName}}! Selamat datang.</p>
{{/if}}

Tampilkan blok kode ini di jendela mengambang

Data Uji

// Data Uji Satu { "user": { "profile": { "firstName": "Zhang San", "isTeacher": true } } } // Data Uji Dua { "user": { "profile": { "firstName": "Li Si", "isStudent": true } } } // Data Uji Tiga { "user": { "profile": { "firstName": "Wang Wu" } } }

              
              // Data Uji Satu
{
    "user": {
        "profile": {
            "firstName": "Zhang San",
            "isTeacher": true
        }
    }
}

// Data Uji Dua
{
    "user": {
        "profile": {
            "firstName": "Li Si",
            "isStudent": true
        }
    }
}

// Data Uji Tiga
{
    "user": {
        "profile": {
            "firstName": "Wang Wu"
        }
    }
}

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

Halo, Guru Zhang San  Halo, Siswa Li Si  Halo, Wang Wu! Selamat datang.

              
              <!-- Hasil Rendering (Data Uji Satu) -->
<p>Halo, Guru Zhang San</p>

<!-- Hasil Rendering (Data Uji Dua) -->
<p>Halo, Siswa Li Si</p>

<!-- Hasil Rendering (Data Uji Tiga) -->
<p>Halo, Wang Wu! Selamat datang.</p>

Tampilkan blok kode ini di jendela mengambang

Unless

Contoh Template

{{#unless license}} PERINGATAN: Entri ini tidak memiliki lisensi! {{/unless}}

              
              {{#unless license}}
    <p class="warning">PERINGATAN: Entri ini tidak memiliki lisensi!</p>
{{/unless}}

Tampilkan blok kode ini di jendela mengambang

Data Uji

{}

{}

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

PERINGATAN: Entri ini tidak memiliki lisensi!

              
              <!-- Hasil Rendering -->
<p class="warning">PERINGATAN: Entri ini tidak memiliki lisensi!</p>

Tampilkan blok kode ini di jendela mengambang

Operator Perbandingan

Operator perbandingan mendukung dua mode penggunaan: dasar dan dengan else.

Sintaks yang didukung ditunjukkan pada tabel berikut:

Ekspresi	Penjelasan
greaterThan	>
lessThan	<
equals	=
greaterThanOrEquals	>=
lessThanOrEquals	<=
notEquals	!=

Dasar

Contoh Template

{{#greaterThan truckWeight limitWeight}} Truk tidak diizinkan lewat. {{/greaterThan}}

              
              <p> 
{{#greaterThan truckWeight limitWeight}}
Truk tidak diizinkan lewat.
{{/greaterThan}}
</p>

Tampilkan blok kode ini di jendela mengambang

Data Uji

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

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

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

Truk tidak diizinkan lewat.

              
              <p> 
Truk tidak diizinkan lewat.
</p>

Tampilkan blok kode ini di jendela mengambang

Dengan else

Contoh Template

{{#greaterThan truckWeight limitWeight}} Truk tidak diizinkan lewat. {{else}} Truk diizinkan lewat. {{/greaterThan}}

              
              <p> 
{{#greaterThan truckWeight limitWeight}}
Truk tidak diizinkan lewat.
{{else}}
Truk diizinkan lewat.
{{/greaterThan}}
</p>

Tampilkan blok kode ini di jendela mengambang

Data Uji

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

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

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

Truk diizinkan lewat.

              
              <p> 
Truk diizinkan lewat.
</p>

Tampilkan blok kode ini di jendela mengambang

in, notIn

Seperti operator perbandingan, keduanya juga mendukung dua mode penggunaan: dasar dan dengan else.

Contoh Template

{{#in fruit favoriteFruits}} Suka makan. {{else}} Tidak suka makan. {{/in}}

              
              <p>
{{#in fruit favoriteFruits}}
Suka makan.
{{else}}
Tidak suka makan.
{{/in}}
</p>

Tampilkan blok kode ini di jendela mengambang

Data Uji

// Data Uji Satu { "fruit": "Apel", "favoriteFruits": [ "Apel", "Pisang", "Jeruk" ] } // Data Uji Dua { "fruit": "Anggur", "favoriteFruits": [ "Apel", "Pisang", "Jeruk" ] }

              
              // Data Uji Satu
{
    "fruit": "Apel",
    "favoriteFruits": [
        "Apel",
        "Pisang",
        "Jeruk"
    ]
}

// Data Uji Dua
{
    "fruit": "Anggur",
    "favoriteFruits": [
        "Apel",
        "Pisang",
        "Jeruk"
    ]
}

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

Suka makan.  Tidak suka makan.

              
              <!-- Hasil Rendering Satu -->
<p>
Suka makan.
</p>

<!-- Hasil Rendering Dua -->
<p>
Tidak suka makan.
</p>

Tampilkan blok kode ini di jendela mengambang

Iterasi

Each

Contoh Template

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

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

Tampilkan blok kode ini di jendela mengambang

Data Uji

{ "fruits": [ "Apel", "Pisang", "Jeruk" ] }

              
              {
    "fruits": [
        "Apel",
        "Pisang",
        "Jeruk"
    ]
}

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

<ul> <li>Apel</li> <li>Pisang</li> <li>Jeruk</li> </ul>

              
              <ul>
    <li>Apel</li>
    <li>Pisang</li>
    <li>Jeruk</li>
</ul>

Tampilkan blok kode ini di jendela mengambang

Penjelasan Tambahan

Saat menggunakan each untuk iterasi array, Anda dapat menggunakan {{@index}} untuk mereferensikan indeks loop saat ini.

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

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

Tampilkan blok kode ini di jendela mengambang

Untuk iterasi objek, gunakan {{@key}} untuk mereferensikan nama key saat ini.

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

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

Tampilkan blok kode ini di jendela mengambang

With

Contoh Template

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

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

Tampilkan blok kode ini di jendela mengambang

Data Uji

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

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

Tampilkan blok kode ini di jendela mengambang

Hasil Rendering

Halo Engagelab

              
              <p>Halo Engagelab</p>

Tampilkan blok kode ini di jendela mengambang