Utilisation de Handlebars
Les modèles transactionnels dynamiques Twilio SendGrid et les conceptions Campagnes Marketing prennent en charge le langage de modélisation Handlebars pour afficher les personnalisations que vous envoyez via l'API et les balises de substitution stockées sur vos contacts Campagnes Marketing.
La syntaxe Handlebars vous permet de personnaliser les messages de vos modèles en insérant les noms des clients et d'autres données pour rendre un e-mail pertinent pour chaque destinataire. Par exemple, si vous avez un nom de client stocké dans une propriété JSON appelée "name", vous pouvez insérer la valeur de la propriété dans un modèle en ajoutant {{ name }} où vous voulez que le nom du client apparaisse.
La syntaxe Handlebars permet à tous ces modèles dynamiques de se produire en dehors de votre base de code, ce qui signifie que les modifications sont effectuées rapidement dans le modèle sans qu'aucune mise à jour d'une base de code ne soit nécessaire.
Si vous préférez utiliser votre propre système de modélisation, vous pouvez toujours insérer des données dynamiques à l'aide de balises de substitution.
Vous pouvez gérer vos modèles par programmation avec notre API d'envoi d'e-mails avec modèles transactionnels dynamiques.
Le langage Handlebars offre de nombreuses fonctionnalités en plus du remplacement de variables de base, y compris les itérations (boucles) et les instructions conditionnelles. Nos modèles et nos conceptions prennent en charge la plupart des fonctionnalités Handlebars, mais pas toutes. Actuellement, les modèles dynamiques prennent en charge les assistants suivants :
Pour une référence complète, reportez-vous à la référence Handlebars sur cette page.
Cas d'usage
Les exemples d'utilisation suivants proviennent de la section Dynamic-template de notre référentiel de modèles d'e-mail GitHub. Chaque exemple est lié à des fichiers que vous pouvez explorer sur GitHub. Vous pouvez également utiliser ces modèles en les téléchargeant à l'aide de l'éditeur de code disponible dans les modèles transactionnels dynamiques et de la librairie de conception des Campagnes Marketing.
Les cas d'utilisation suivants sont répertoriés avec les assistants Handlebars utilisés pour les fabriquer.
Reçu
Ce modèle d'exemple de reçu utilise les assistants suivants :
Mot de passe réinitialisé
Ce modèle transactionnel d'exemple utilise les assistants suivants :
Plusieurs langues
Il s'agit d'un exemple de modèle qui vous permet d'avoir du contenu dans plusieurs langues et qui utilise les assistants suivants :
- Déclarations conditionnelles -
if/else
Newsletter
Ce modèle d'exemple de newsletter utilise les assistants suivants :
Publicité
Il s'agit d'un exemple de modèle qui met en valeur les articles en vente et qui utilise les assistants suivants :
Référence Handlebars
La référence suivante fournit des exemples de blocs de code pour chaque assistant, y compris des extraits d'e-mail HTML et des données de test JSON. Les exemples de code sont présentés dans trois onglets. Le premier onglet, Handlebars, montre l'étiquette du même nom. Le deuxième onglet, JSON, montre des exemples de données qui seraient utilisées pour remplir le repère Handlebars. Le troisième onglet, HTML, montre le résultat final sur lequel la balise Handlebars sera affichée dans votre e-mail. Vous pouvez cliquer sur chaque onglet pour basculer entre les exemples de code.
Substitution
Les modèles Twilio SendGrid prennent en charge les substitutions suivantes :
- Remplacement de base
- Remplacement d'objets approfondi
- Échec de l'objet
- Remplacement par HTML
- formatDate
- Insérer
Remplacement de base
// Données de test
{ "firstName": "Ben" }
<!-- Resulting HTML !-->
<p>Bonjour Ben</p>
Remplacement d'objet approfondi
// Données de test
{
"user": {
"profile": {
"firstName": "Ben"
}
}
}
<!-- Resulting HTML -->
<p>Bonjour Ben</p>
Échec de l'objet
// Données de test
{
"user": {
"orderHistory": [
{
"date": "2/1/2018",
"item": "shoes"
},
{
"date": "1/4/2017",
"item": "hat"
}
]
}
}
<!-- Resulting HTML -->
<p>Bonjour</p>
Remplacement par HTML
Si vous incluez les caractères '
, "
ou &
dans un objet de remplacement, assurez-vous d'utiliser trois crochets comme ci-dessous.
// Données de test
{ "firstName": "<strong>Ben</strong>" }
<!-- Resulting HTML -->
<p>Bonjour <strong>Ben</strong></p>
formatDate
L'assistant formatDate convertit un temps au format epoch ou ISO8601 dans un format que vous spécifiez à l'aide des jetons du tableau suivant. Si vous envoyez un champ de date sans le convertir, il sera affiché au format ISO8601 avec l'horodatage complet (par exemple, 2020-01-01T23:00:00.000Z
). Les exemples de résultats d'affichage suivants concernent le mardi 1er janvier, 2020 à 15h00, heure du Pacifique.
Jeton | Résultat affiché |
---|---|
AAAA | 2020 |
AA | 20 |
MMMM | Janvier |
MMM | Janv |
MM | 01 |
M | 1 |
JJ | 01 |
J | 1 |
jjjj | Mardi |
jjj | Mar |
hh | 03 |
h | 3 |
HH | 00 |
H | 00 |
mm | 00 |
m | 0 |
ss | 00 |
s | 0 |
A | PM |
ZZ | -0800 |
Z | -08 : 00 |
// Données de test
{
"timeStamp": "2020-01-01T23:00:00.000Z",
"dateFormat": "MMMM:DD:HH:mm:ss",
"timezoneOffset": "-0800"
}
<!-- Resulting HTML without timezone-->
<p>Rejoignez-nous le 1er janvier, 2020 à 11h</p>
<!-- Resulting HTML with timezone-->
<p>Rejoignez-nous le 1er janvier, 2020 à 15h</p>
Insérer
// Données de test avec toutes les valeurs
{
"name": "Ben",
"businessName": "Twilio SendGrid"
}
// Données de test avec valeur manquante
{
"name": "Ben"
}
<!-- Resulting HTML with all values -->
<p>Bonjour Ben ! Merci de nous avoir contactés au sujet de Twilio SendGrid.</p>
<!-- Resulting HTML with missing value and a default-->
<p>Bonjour Ben ! Merci de nous avoir contactés au sujet de votre entreprise.</p>
Déclarations conditionnelles
Les modèles Twilio SendGrid prennent en charge les conditions suivantes :
Basic If, Else, Else If
// Données de test numéro un
{
"user":{
"profile":{
"male":true
}
}
}
// Données de test numéro deux
{
"user":{
"profile":{
"female":true
}
}
}
// Données de test numéro trois
{
"user":{
"profile":{
}
}
}
<!-- Resulting HTML from test data one -->
<p>Monsieur</p>
<!-- Resulting HTML from test data two -->
<p>Madame</p>
<!-- Resulting HTML from test data three -->
<p>Cher client</p>
If with a root
// Données de test
{
"user": {
"suspended": true
},
"supportPhone": "1-800-555-5555"
}
<!-- Resulting HTML -->
<p>Avertissement ! Votre compte est suspendu, veuillez appeler le : 1-800-555-5555</p>
Unless
// Données de test
{
"user": {
"active": false
},
"supportPhone": "1-800-555-5555"
}
<!-- Resulting HTML -->
<p>Avertissement ! Votre compte est suspendu, veuillez appeler le : 1800-555-5555</p>
greaterThan
Basic greaterThan
// Données de test numéro un
{
"scoreOne": 100,
"scoreTwo": 78
}
// Données de test numéro deux
{
"scoreOne": 55,
"scoreTwo": 78
}
<!-- Resulting HTML from test data one-->
<p>
Bonjour Ben ! Félicitations, vous avez obtenu le meilleur score aujourd'hui ! Merci d'avoir joué.
</p>
<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</p>
greaterThan with else
// Données de test numéro un
{
"scoreOne": 100,
"scoreTwo": 78
}
// Données de test numéro deux
{
"scoreOne": 55,
"scoreTwo": 78
}
<!-- Resulting HTML from test data one-->
<p>
Bonjour Ben ! Félicitations, vous avez obtenu le meilleur score aujourd'hui ! Merci d'avoir joué.
</p>
<!-- Resulting HTML from test data two-->
<p>
Bonjour Ben ! Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui. Merci d'avoir
joué.
</p>
lessThan
Basic lessThan
// Données de test numéro un
{
"scoreOne": 55,
"scoreTwo": 78
}
// Données de test numéro deux
{
"scoreOne": 100,
"scoreTwo": 78
}
<!-- Resulting HTML from test data one-->
<p>
Bonjour Ben ! Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui. Merci d'avoir
joué.
</p>
<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</p>
lessThan with else
// Données de test numéro un
{
"scoreOne": 55,
"scoreTwo": 78
}
// Données de test numéro deux
{
"scoreOne": 100,
"scoreTwo": 78
}
<!-- Resulting HTML from test data one-->
<p>
Bonjour Ben ! Vous y étiez presque, mais vous n'avez pas obtenu le meilleur score aujourd'hui. Merci d'avoir
joué.
</p>
<!-- Resulting HTML from test data two-->
<p>
Bonjour Ben ! Félicitations, vous avez obtenu le meilleur score aujourd'hui ! Merci d'avoir joué.
</p>
Equals
La comparaison equals
peut vérifier l'égalité entre deux valeurs du même type de données. L'assistant equals
tentera également de contraindre les types de données pour faire une comparaison des valeurs indépendamment de leur type de données. Par exemple, {{#equals 3 "3"}} sera évalué à true
.
Veuillez noter que la page Preview (Aperçu) de l'éditeur n'affichera pas correctement les résultats d'une comparaison entre les valeurs contraintes. Vous verrez les comparaisons appropriées entre les valeurs contraintes uniquement dans un message transmis.
Lors de la vérification de la véracité, sachez que les chaînes vides, les entiers zéro et les nombres à virgule flottante zéro sont évalués à false
. Les chaînes non vides, les entiers non nuls et les nombres à virgule flottante non nuls, y compris les nombres négatifs, sont évalués à true
.
Basic equals
// Données de test numéro un
{
"customerCode": 289199,
"winningCode": 289199
}
// Données de test numéro deux
{
"customerCode": 167320,
"winningCode": 289199
}
<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>
<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</p>
Equals with else
// Données de test numéro un
{
"customerCode": 289199,
"winningCode": 289199
}
// Données de test numéro deux
{
"customerCode": 167320,
"winningCode": 289199
}
<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>
<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Vous n'avez pas de code gagnant. Merci d'avoir joué.</p>
notEquals
La comparaison notEquals
peut vérifier l'égalité entre deux valeurs du même type de données. L'assistant notEquals
tentera également de contraindre les types de données pour faire une comparaison des valeurs indépendamment de leur type de données. Par exemple, {{#equals 3 "3"}} renvoie false
.
Lors de la vérification de la véracité, sachez que les chaînes vides, les entiers zéro et les nombres à virgule flottante zéro sont évalués à false
. Les chaînes non vides, les entiers non nuls et les nombres à virgule flottante non nuls, y compris les nombres négatifs, sont évalués à true
.
Basic notEquals
// Données de test numéro un
{
"customerCode": 289199,
"winningCode": 289199
}
// Données de test numéro deux
{
"customerCode": 167320,
"winningCode": 289199
}
<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>
<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Merci d'avoir joué.</p>
notEquals with else
// Données de test numéro un
{
"customerCode": 289199,
"winningCode": 289199
}
// Données de test numéro deux
{
"customerCode": 167320,
"winningCode": 289199
}
<!-- Resulting HTML from test data one-->
<p>Bonjour Ben ! Vous avez un code gagnant. Merci d'avoir joué.</p>
<!-- Resulting HTML from test data two-->
<p>Bonjour Ben ! Vous n'avez pas de code gagnant. Merci d'avoir joué.</p>
And
Lors de la vérification de la véracité, sachez que les chaînes vides, les entiers zéro et les nombres à virgule flottante zéro sont évalués à false
. Les chaînes non vides, les entiers non nuls et les nombres à virgule flottante non nuls, y compris les nombres négatifs, sont évalués à true
.
And without else
// Données de test numéro un
{
"favoriteFood": "Pasta",
"favoriteDrink": ""
}
// Données de test numéro deux
{
"favoriteFood": "Pasta",
"favoriteDrink": "Coffee"
}
<!-- Resulting HTML from test data one -->
<p>Bonjour Ben ! Nous avons hâte de vous envoyer d'autres recettes délicieuses.</p>
<!-- Resulting HTML from test data two -->
<p>
Bonjour Ben ! Merci de nous avoir fait part de vos préférences en matière de repas. Nous avons hâte
de vous envoyer d'autres recettes délicieuses.
</p>
And with else
// Données de test numéro un
{
"favoriteFood": "Pasta",
"favoriteDrink": ""
}
// Données de test numéro deux
{
"favoriteFood": "Pasta",
"favoriteDrink": "Coffee"
}
<!-- Resulting HTML from test data one -->
<p>
Bonjour Ben ! Si vous avez terminé de répondre au questionnaire sur vos préférences en matière de restaurants, nous pouvons
vous fournir des recettes qui devraient vous intéresser. Nous avons hâte
de vous envoyer d'autres recettes délicieuses.
</p>
<!-- Resulting HTML from test data two -->
<p>
Bonjour Ben ! Merci de nous avoir fait part de vos préférences en matière de repas. Nous avons hâte
de vous envoyer d'autres recettes délicieuses.
</p>
Or
Lors de la vérification de la véracité, sachez que les chaînes vides, les entiers zéro et les nombres à virgule flottante zéro sont évalués à false
. Les chaînes non vides, les entiers non nuls et les nombres à virgule flottante non nuls, y compris les nombres négatifs, sont évalués à true
.
Basic or
// Données de test numéro un
{
"isRunner": true,
"isCyclist": false
}
// Données de test numéro deux
{
"isRunner": false,
"isCyclist": false
}
// Données de test numéro trois
{
"isRunner": false,
"isCyclist": true
}
<!-- Resulting HTML from test data one -->
<p>
Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
la carte jointe à cet e-mail. Bonne journée.
</p>
<!-- Resulting HTML from test data two -->
<p>Bonjour Ben ! Bonne journée.</p>
<!-- Resulting HTML from test data three -->
<p>
Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
la carte jointe à cet e-mail. Bonne journée.
</p>
Or with else
// Données de test numéro un
{
"isRunner": true,
"isCyclist": false
}
// Données de test numéro deux
{
"isRunner": false,
"isCyclist": false
}
// Données de test numéro trois
{
"isRunner": false,
"isCyclist": true
}
<!-- Resulting HTML from test data one -->
<p>
Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
la carte jointe à cet e-mail. Bonne journée.
</p>
<!-- Resulting HTML from test data two -->
<p>
Bonjour Ben ! Nous aimerions en savoir plus sur les activités de plein air que vous aimez. Le
questionnaire ci-dessous ne vous prendra qu'une minute. Bonne journée.
</p>
<!-- Resulting HTML from test data three -->
<p>
Bonjour Ben ! Nous pensons qu'une carte des sentiers de votre région pourrait vous plaire. Vous trouverez
la carte jointe à cet e-mail. Bonne journée.
</p>
Length
L'assistant de longueur renvoie le nombre de caractères d'une chaîne ou d'un tableau donné. Pour les valeurs non-chaîne et non-tableau, la longueur renvoie 0. Length peut être utile en combinaison avec d'autres assistants, comme illustré ci-après dans l'exemple avec greaterThan.
// Données de test numéro un
{
"cartItems": ["raft", "water bottle", "sleeping bag"]
}
// Données de test numéro deux
{
"cartItems": []
}
<!-- Resulting HTML with test data one-->
<p>
Bonjour Ben ! Il semble que vous ayez encore des articles dans votre panier. Revenez
à tout moment pour poursuivre vos achats.
</p>
<!-- Resulting HTML with test data two-->
<p>Bonjour Ben ! Merci d'avoir utilisé notre site. Nous espérons vous revoir très bientôt.</p>
Itérations
Vous pouvez effectuer une boucle ou une itération sur des données à l'aide de la fonction d'assistant {{#each }} pour construire des listes et exécuter d’autres actions de modélisation utiles.
Basic Iterator with each
// Données de test
{
"user": {
"orderHistory": [
{
"date": "2/1/2018",
"item": "shoes"
},
{
"date": "1/4/2017",
"item": "hat"
}
]
}
}
<!-- Resulting HTML -->
<ol>
<li>Vous avez commandé : des chaussures le : 2/1/2018</li>
<li>Vous avez commandé : un chapeau le : 1/4/2017</li>
</ol>
Exemples combinés
Les exemples suivants vous montrent comment combiner plusieurs fonctions Handlebars pour créer un modèle vraiment dynamique.
- Création dynamique de contenu
- Création dynamique de contenu avec parties dynamiques 1
- Création dynamique de contenu avec parties dynamiques 2
Création dynamique de contenu
// Données de test
{
"user": {
"story": [
{
"male": true,
"date": "2/1/2018",
"item": "shoes"
},
{
"male": true,
"date": "1/4/2017",
"item": "hat"
},
{
"female": true,
"date": "1/1/2016",
"item": "shirt"
}
]
}
}
<!-- Resulting HTML -->
<p>2/1/2018</p>
<p>1/4/2017</p>
<p>chemise</p>
Création de contenu dynamique avec des parties dynamiques 1
// Données de test
{
"user": {
"story": [
{
"male": true,
"date": "2/1/2018",
"item": "shoes"
},
{
"male": true,
"date": "1/4/2017"
},
{
"female": true,
"item": "shirt"
}
]
}
}
<!-- Resulting HTML -->
<p>2/1/2018</p>
<p>chaussures</p>
<p>1/4/2017</p>
<p>chemise</p>
Création de contenu dynamique avec des parties dynamiques 2
// Données de test
{
"people": [{ "name": "Bob" }, { "name": "Sally" }]
}
<!-- Resulting HTML -->
<p>Individus :</p>
<p>Bob</p>
<p>Sally</p>
Ressources supplémentaires
Besoin d'aide ?
Ça arrive à tout le monde. Obtenez de l'aide dès maintenant auprès de l'Équipe d'assistance Twilio SendGrid.
Vous faites face à un problème de code ? Appuyez-vous sur la sagesse collective en parcourant le tag SendGrid sur Stack Overflow ou en visitant le collectif Stack Overflow de Twilio.