Dynamische E-Mail-Vorlagen mit Handlebars Template-Sprache
Die dynamischen E-Mail-Vorlagen von Engagelab unterstützen die Handlebars Template-Sprache. Damit kannst du personalisierte Inhalte effizient über die API versenden und individuell darstellen.
Variablenersetzung
Grundlegende Ersetzung
Vorlagenbeispiel
<p>Hallo {{firstname}}</p>
Testdaten
{ "firstName": "Engagelab" }
Ergebnis der Darstellung
<p>Hallo Engagelab</p>
Verschachtelte Objektersetzung
Vorlagenbeispiel
<p>Hallo {{user.profile.firstName}}</p>
Testdaten
{
"user": {
"profile": {
"firstName": "Engagelab"
}
}
}
Ergebnis der Darstellung
<p>Hallo Engagelab</p>
formatDate
Die Funktion formatDate akzeptiert Unix-Timestamps oder Zeiten im ISO8601-Format und wandelt diese mithilfe der unten aufgeführten Platzhalter in das gewünschte Format um. Am Beispiel der UTC-Zeit 1987-09-20T20:55:00.000Z zeigt die folgende Tabelle die Umwandlung und die jeweiligen Anzeigeergebnisse:
| Platzhalter | Ergebnis |
|---|---|
| YYYY | 1987 |
| YY | 87 |
| MMMM | September |
| MMM | Sep |
| MM | 09 |
| M | 9 |
| DD | 20 |
| D | 20 |
| dddd | Sonntag |
| ddd | So |
| hh | 08 |
| h | 8 |
| HH | 20 |
| H | 20 |
| mm | 55 |
| m | 55 |
| ss | 00 |
| s | 0 |
| A | PM |
| ZZ | +0000 |
| Z | +00:00 |
Vorlagenbeispiel
<p>{{formatDate timeStamp dateFormat}}</p>
<!-- Beispiel für Zeitzonen-Offset -->
<p>{{formatDate timeStamp dateFormat timezoneOffset}}</p>
Testdaten
{
"timeStamp": "1987-09-20T12:55:00.000Z",
"dateFormat": "YYYY-MM-DD HH:mm:ss A",
"timezoneOffset": "+0800"
}
Ergebnis der Darstellung
<!-- Ergebnis der Darstellung (Vorlage Eins) -->
<p>1987-09-20 12:55:00 PM</p>
<!-- Ergebnis der Darstellung (Vorlage Zwei) -->
<p>1987-09-20 20:55:00 PM</p>
Insert
Mit der Funktion insert kannst du Standardwerte für Platzhalter definieren, falls keine Daten übergeben werden.
Vorlagenbeispiel
<p>Vielen Dank, dass Sie uns bezüglich {{insert businessName "Ihres Unternehmens"}} kontaktiert haben.</p>
Testdaten
// Testdaten Eins
{}
// Testdaten Zwei
{
"businessName": "Engagelab"
}
Ergebnis der Darstellung
<!-- Ergebnis Eins -->
<p>Vielen Dank, dass Sie uns bezüglich Ihres Unternehmens kontaktiert haben.</p>
<!-- Ergebnis Zwei -->
<p>Vielen Dank, dass Sie uns bezüglich Engagelab kontaktiert haben.</p>
Hinweis: Wird kein Wert für „businessName“ übergeben, erscheint der Standardtext „Ihres Unternehmens“.
Bedingte Anweisungen
If, Else, Else If
Mit if, else if und else kannst du Bedingungen innerhalb deiner Vorlage abbilden.
Vorlagenbeispiel
{{#if user.profile.isTeacher}}
<p>Hallo, Lehrer:in {{user.profile.firstName}}</p>
{{else if user.profile.isStudent}}
<p>Hallo, Schüler:in {{user.profile.firstName}}</p>
{{else}}
<p>Hallo, {{user.profile.firstName}}! Willkommen.</p>
{{/if}}
Testdaten
// Testdaten Eins
{
"user": {
"profile": {
"firstName": "Zhang San",
"isTeacher": true
}
}
}
// Testdaten Zwei
{
"user": {
"profile": {
"firstName": "Li Si",
"isStudent": true
}
}
}
// Testdaten Drei
{
"user": {
"profile": {
"firstName": "Wang Wu"
}
}
}
Ergebnis der Darstellung
<!-- Ergebnis (Testdaten Eins) -->
<p>Hallo, Lehrer:in Zhang San</p>
<!-- Ergebnis (Testdaten Zwei) -->
<p>Hallo, Schüler:in Li Si</p>
<!-- Ergebnis (Testdaten Drei) -->
<p>Hallo, Wang Wu! Willkommen.</p>
Unless
Mit unless kannst du eine Anweisung ausführen, wenn eine Bedingung nicht erfüllt ist.
Vorlagenbeispiel
{{#unless license}}
<p class="warning">WARNUNG: Für diesen Eintrag liegt keine Lizenz vor!</p>
{{/unless}}
Testdaten
{}
Ergebnis der Darstellung
<!-- Ergebnis der Darstellung -->
<p class="warning">WARNUNG: Für diesen Eintrag liegt keine Lizenz vor!</p>
Vergleichsoperatoren
Vergleichsoperatoren unterstützen zwei Anwendungsmodi: basic und mit else. Die folgende Tabelle zeigt die unterstützte Syntax und die jeweilige Bedeutung:
| Ausdruck | Erklärung |
|---|---|
| greaterThan | größer als (>) |
| lessThan | kleiner als (<) |
| equals | gleich (=) |
| greaterThanOrEquals | größer oder gleich (≥) |
| lessThanOrEquals | kleiner oder gleich (≤) |
| notEquals | ungleich (!=) |
basic
Vorlagenbeispiel
<p>
{{#greaterThan truckWeight limitWeight}}
Der Lkw darf nicht passieren.
{{/greaterThan}}
</p>
Testdaten
{
"truckWeight": 6,
"limitWeight": 5
}
Ergebnis der Darstellung
<p>
Der Lkw darf nicht passieren.
</p>
mit else
Vorlagenbeispiel
<p>
{{#greaterThan truckWeight limitWeight}}
Der Lkw darf nicht passieren.
{{else}}
Der Lkw darf passieren.
{{/greaterThan}}
</p>
Testdaten
{
"truckWeight": 5,
"limitWeight": 5
}
Ergebnis der Darstellung
<p>
Der Lkw darf passieren.
</p>
in, notIn
Wie Vergleichsoperatoren unterstützen auch diese Operatoren zwei Anwendungsmodi: basic und mit else.
Vorlagenbeispiel
<p>
{{#in fruit favoriteFruits}}
Mag ich essen.
{{else}}
Mag ich nicht essen.
{{/in}}
</p>
Testdaten
// Testdaten Eins
{
"fruit": "Apple",
"favoriteFruits": [
"Apple",
"Banana",
"Orange"
]
}
// Testdaten Zwei
{
"fruit": "Grape",
"favoriteFruits": [
"Apple",
"Banana",
"Orange"
]
}
Ergebnis der Darstellung
<!-- Ergebnis Eins -->
<p>
Mag ich essen.
</p>
<!-- Ergebnis Zwei -->
<p>
Mag ich nicht essen.
</p>
Iteration
Each
Mit each kannst du über Arrays oder Objekte iterieren.
Vorlagenbeispiel
<ul>
{{#each fruits}}
<li>{{this}}</li>
{{/each}}
</ul>
Testdaten
{
"fruits": [
"Apple",
"Banana",
"Orange"
]
}
Ergebnis der Darstellung
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Ergänzende Erklärung
Bei der Verwendung von each zur Iteration über ein Array kannst du mit {{@index}} den aktuellen Schleifenindex referenzieren.
{{#each array}} {{@index}}: {{this}} {{/each}}
Bei der Iteration über Objekte wird {{@key}} für den aktuellen Schlüssel verwendet.
{{#each object}} {{@key}}: {{this}} {{/each}}
With
Mit with kannst du auf verschachtelte Objekte zugreifen und den Zugriff auf deren Eigenschaften vereinfachen.
Vorlagenbeispiel
{{#with user.profile}}
<p>Hallo {{firstName}}</p>
{{/with}}
Testdaten
{
"user": {
"profile": {
"firstName": "Engagelab"
}
}
}
Ergebnis der Darstellung
<p>Hallo Engagelab</p>
SEO-Hinweis: Die dynamischen E-Mail-Vorlagen von Engagelab ermöglichen die einfache Integration personalisierter Inhalte mit der Handlebars Template-Sprache. So kannst du jede E-Mail individuell gestalten und effizient automatisieren.
Jetzt mehr erfahren:
Demo buchen | Weitere Informationen zu dynamischen Vorlagen
