Email Dynamic Template

Les modèles dynamiques d'e-mail EngageLab prennent en charge le langage de template Handlebars pour présenter le contenu personnalisé que vous envoyez via l'API.

Remplacement de Variable

Remplacement Basique

Exemple de Modèle

Bonjour {{firstname}}

              
              <p>Bonjour {{firstname}}</p>

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

{ "firstName": "Engagelab" }

              
              { "firstName": "Engagelab" }

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

Bonjour Engagelab

              
              <p>Bonjour Engagelab</p>

Afficher ce bloc de code dans la fenêtre flottante

Remplacement d'Objet Imbriqué

Exemple de Modèle

Bonjour {{user.profile.firstName}}

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

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

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

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

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

Bonjour Engagelab

              
              <p>Bonjour Engagelab</p>

Afficher ce bloc de code dans la fenêtre flottante

formatDate

La fonction formatDate accepte des timestamps Unix ou des heures au format ISO8601 et les convertit dans le format que vous spécifiez en utilisant les marqueurs du tableau ci-dessous. En prenant l'heure UTC 1987-09-20T20:55:00.000Z comme exemple, les résultats de conversion et d'affichage sont présentés dans le tableau ci-dessous :

Marqueur	Résultat
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

Exemple de Modèle

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

              
              <p>{{formatDate timeStamp dateFormat}}</p>
<!-- Exemple de décalage horaire -->
<p>{{formatDate timeStamp dateFormat timezoneOffset}}</p>

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

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

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

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

              
              <!-- Résultat du Rendu (Modèle Un) -->
<p>1987-09-20 12:55:00 PM</p>

<!-- Résultat du Rendu (Modèle Deux) -->
<p>1987-09-20 20:55:00 PM</p>

Afficher ce bloc de code dans la fenêtre flottante

Insert

Exemple de Modèle

Merci de nous avoir contactés au sujet de {{insert businessName "votre entreprise"}}.

              
              <p>Merci de nous avoir contactés au sujet de {{insert businessName "votre entreprise"}}.</p>

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

// Données de Test Un {} // Données de Test Deux { "businessName": "Engagelab" }

              
              // Données de Test Un
{}

// Données de Test Deux
{
    "businessName": "Engagelab"
}

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

Merci de nous avoir contactés au sujet de votre entreprise.  Merci de nous avoir contactés au sujet de Engagelab.

              
              <!-- Résultat du Rendu Un -->
<p>Merci de nous avoir contactés au sujet de votre entreprise.</p>

<!-- Résultat du Rendu Deux -->
<p>Merci de nous avoir contactés au sujet de Engagelab.</p>

Afficher ce bloc de code dans la fenêtre flottante

Instructions Conditionnelles

If, Else, Else If

Exemple de Modèle

{{#if user.profile.isTeacher}} Bonjour, Enseignant {{user.profile.firstName}} {{else if user.profile.isStudent}} Bonjour, Étudiant {{user.profile.firstName}} {{else}} Bonjour, {{user.profile.firstName}} ! Bienvenue. {{/if}}

              
              {{#if user.profile.isTeacher}}
   <p>Bonjour, Enseignant {{user.profile.firstName}}</p>
{{else if user.profile.isStudent}}
   <p>Bonjour, Étudiant {{user.profile.firstName}}</p>
{{else}}
   <p>Bonjour, {{user.profile.firstName}} ! Bienvenue.</p>
{{/if}}

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

// Données de Test Un { "user": { "profile": { "firstName": "Zhang San", "isTeacher": true } } } // Données de Test Deux { "user": { "profile": { "firstName": "Li Si", "isStudent": true } } } // Données de Test Trois { "user": { "profile": { "firstName": "Wang Wu" } } }

              
              // Données de Test Un
{
    "user": {
        "profile": {
            "firstName": "Zhang San",
            "isTeacher": true
        }
    }
}

// Données de Test Deux
{
    "user": {
        "profile": {
            "firstName": "Li Si",
            "isStudent": true
        }
    }
}

// Données de Test Trois
{
    "user": {
        "profile": {
            "firstName": "Wang Wu"
        }
    }
}

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

Bonjour, Enseignant Zhang San  Bonjour, Étudiant Li Si  Bonjour, Wang Wu ! Bienvenue.

              
              <!-- Résultat du Rendu (Données de Test Un) -->
<p>Bonjour, Enseignant Zhang San</p>

<!-- Résultat du Rendu (Données de Test Deux) -->
<p>Bonjour, Étudiant Li Si</p>

<!-- Résultat du Rendu (Données de Test Trois) -->
<p>Bonjour, Wang Wu ! Bienvenue.</p>

Afficher ce bloc de code dans la fenêtre flottante

Unless

Exemple de Modèle

{{#unless license}} ATTENTION : Cette entrée ne possède pas de licence ! {{/unless}}

              
              {{#unless license}}
    <p class="warning">ATTENTION : Cette entrée ne possède pas de licence !</p>
{{/unless}}

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

{}

{}

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

ATTENTION : Cette entrée ne possède pas de licence !

              
              <!-- Résultat du Rendu -->
<p class="warning">ATTENTION : Cette entrée ne possède pas de licence !</p>

Afficher ce bloc de code dans la fenêtre flottante

Opérateurs de Comparaison

Les opérateurs de comparaison prennent en charge deux modes d'utilisation : basique et avec else.

La syntaxe prise en charge est indiquée dans le tableau suivant :

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

basique

Exemple de Modèle

{{#greaterThan truckWeight limitWeight}} Le camion n'est pas autorisé à passer. {{/greaterThan}}

              
              <p> 
{{#greaterThan truckWeight limitWeight}}
Le camion n'est pas autorisé à passer.
{{/greaterThan}}
</p>

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

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

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

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

Le camion n'est pas autorisé à passer.

              
              <p> 
Le camion n'est pas autorisé à passer.
</p>

Afficher ce bloc de code dans la fenêtre flottante

avec else

Exemple de Modèle

{{#greaterThan truckWeight limitWeight}} Le camion n'est pas autorisé à passer. {{else}} Le camion est autorisé à passer. {{/greaterThan}}

              
              <p> 
{{#greaterThan truckWeight limitWeight}}
Le camion n'est pas autorisé à passer.
{{else}}
Le camion est autorisé à passer.
{{/greaterThan}}
</p>

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

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

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

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

Le camion est autorisé à passer.

              
              <p> 
Le camion est autorisé à passer.
</p>

Afficher ce bloc de code dans la fenêtre flottante

in, notIn

Comme les opérateurs de comparaison, ils prennent également en charge deux modes d'utilisation : basique et avec else.

Exemple de Modèle

{{#in fruit favoriteFruits}} Aime en manger. {{else}} N'aime pas en manger. {{/in}}

              
              <p>
{{#in fruit favoriteFruits}}
Aime en manger.
{{else}}
N'aime pas en manger.
{{/in}}
</p>

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

// Données de Test Un { "fruit": "Apple", "favoriteFruits": [ "Apple", "Banana", "Orange" ] } // Données de Test Deux { "fruit": "Grape", "favoriteFruits": [ "Apple", "Banana", "Orange" ] }

              
              // Données de Test Un
{
    "fruit": "Apple",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

// Données de Test Deux
{
    "fruit": "Grape",
    "favoriteFruits": [
        "Apple",
        "Banana",
        "Orange"
    ]
}

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

Aime en manger.  N'aime pas en manger.

              
              <!-- Résultat du Rendu Un -->
<p>
Aime en manger.
</p>

<!-- Résultat du Rendu Deux -->
<p>
N'aime pas en manger.
</p>

Afficher ce bloc de code dans la fenêtre flottante

Itération

Each

Exemple de Modèle

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

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

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

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

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

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

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

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

Afficher ce bloc de code dans la fenêtre flottante

Explications Supplémentaires

Lorsque vous utilisez each pour parcourir un tableau, vous pouvez utiliser {{@index}} pour référencer l'index courant de la boucle.

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

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

Afficher ce bloc de code dans la fenêtre flottante

De plus, pour l'itération d'objet, {{@key}} est utilisé pour référencer le nom de la clé courante.

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

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

Afficher ce bloc de code dans la fenêtre flottante

With

Exemple de Modèle

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

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

Afficher ce bloc de code dans la fenêtre flottante

Données de Test

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

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

Afficher ce bloc de code dans la fenêtre flottante

Résultat du Rendu

Bonjour Engagelab

              
              <p>Bonjour Engagelab</p>

Afficher ce bloc de code dans la fenêtre flottante

Modèles Dynamiques

Remplacement de Variable

Remplacement Basique

Remplacement d'Objet Imbriqué

formatDate

Insert

Instructions Conditionnelles

If, Else, Else If

Unless

Opérateurs de Comparaison

basique

avec else

in, notIn

Itération

Each

Explications Supplémentaires

With