Como usar o Handlebars
Twilio SendGrid Dynamic Transactional Templates e Marketing Campaigns designs são compatíves com Handlebars a linguagem de modelagem Personalizations que você envia pela API e Substitution Tags armazenado em seus contatos do Marketing Campaigns.
A sintaxe do Handlebars permite que você personalize as mensagens em seus modelos, inserindo os nomes dos clientes e outros dados, isso torna um e-mail relevante para cada destinatário individual. Por exemplo, se você tiver um nome de cliente armazenado em uma propriedade JSON chamada "name"
, pode inserir o valor da propriedade em um modelo adicionando {{ name }}
sempre que quiser que o nome do cliente apareça.
A sintaxe do Handlebar permite que todo esse modelo dinâmico ocorra fora da base de código, o que significa que as alterações são feitas rapidamente no modelo sem a necessidade de atualizar para uma base de código.
Se preferir usar seu próprio sistema de modelagem, você ainda pode inserir dados dinâmicos usando as marcas de substituição.
Você pode gerenciar seus modelos de forma programática com nossa Envio de e-mail com modelos dinâmicos de transação API.
A linguagem do Handlebars fornece muitos recursos, além da substituição básica de variáveis, incluindo iterações (loops) e instruções condicionais. Os nossos modelos e designs são compatíveis com a maioria, mas não todas as funcionalidades deste Handlebars. Hoje, os modelos dinâmicos são compatíveis com os seguintes assistentes:
Para uma referência completa do assistente, consulte a Handlebars reference nesta página.
Casos de uso
Os exemplos de casos de uso a seguir são provenientes do dynamic-template section of our email templates GitHub repo. Cada exemplo é vinculado a arquivos que você pode explorar no GitHub. Você também pode trabalhar com esses modelos enviando-os ao usar Code Editor disponível em Dynamic Transactional Templates e o Marketing Campaigns Design Library.
Os seguintes casos de uso são listados com os ajudantes do Handlebars usados para construí-los.
Recibo
Este example receipt template usa os seguintes assistentes:
Redefinição de senha
Este example transactional template usa os seguintes assistentes:
Vários idiomas
Este é um example template that lets you have content in multiple languages e usa os seguintes assistentes:
- Conditional statements -
if/else
Novidades
Este example newsletter template usa os seguintes assistentes:
Anúncio
Este é um example template that is advertising items on sale e usa os seguintes assistentes:
- Substitution
- Conditional statements -
if/else
- Iterations
Referência do Handlebars
A referência a seguir fornece exemplos de blocos de código para cada assistente, incluindo fragmentos de e-mail em HTML e dados de teste JSON. Os exemplos de código são mostrados em três guias. A primeira guia, Handlebars, mostra a tag do Handlebars. A segunda guia, JSON, mostra dados de exemplo que seriam usados para preencher a tag do Handlebars. A terceira guia, HTML, mostra a saída final para a qual a tag do Handlebars será renderizada no e-mail. Você pode clicar em cada guia para alternar entre os exemplos de código.
Substituição
Os modelos Twilio SendGrid oferecem suporte às seguintes substituições:
Substituição básica
// Dados de teste
{ "firstName": "Ben" }
<!-- Resulting HTML !-->
<p>Hello Ben</p>
Substituição detalhada do objeto
// Dados de teste
{
"user": {
"profile": {
"firstName": "Ben"
}
}
}
<!-- HTML gerado -->
<p>Hello Ben</p>
Falha de objeto
// Dados de teste
{
"user": {
"orderHistory": [
{
"date": "1/2/2018",
"item": "shoes"
},
{
"date": "4/1/2017",
"item": "hat"
}
]
}
}
<!-- HTML gerado -->
<p>Hello</p>
Substituição com HTML
Se você incluir os caracteres "
, "
ou &
ao substituir uma linha de assunto, certifique-se de usar três colchetes, como abaixo.
// Dados de teste
{ "firstName": "<strong>Ben</strong>" }
<!-- HTML gerado -->
<p>Hello <strong>Ben</strong></p>
formatDate (formato da data)
O assistente formatDate pega um horário no formato epoch ou ISO8601 e o converte em um formato especificado usando os tokens na tabela a seguir. Se você enviar um campo de data sem convertê-lo, ele será exibido no formato ISO8601 com o carimbo de data/hora completo (por exemplo, 2020-01-01T23:00:00.000Z
). Os resultados de exibição do exemplo a seguir são para terça-feira, 1o. de janeiro de 2020, 15:00, horário padrão do Pacífico.
Token | Resultado exibido |
---|---|
YYYY | 2020 |
YY | 20 |
MMMM | Janeiro |
MMM | Jan |
MM | 01 |
M | 1 |
DD | 01 |
D | 1 |
dddd | Terça |
ddd | Ter |
hh | 03 |
h | 3 |
HH | 00 |
H | 00 |
mm | 00 |
m | 0 |
00 | |
s | 0 |
A | PM |
ZZ | -0800 |
Z | -08:00 |
// Dados de teste
{
"timeStamp": "2020-01-01T23:00:00.000Z",
"dateFormat": "MMMM:DD:HH:mm:ss",
"timezoneOffset": "-0800"
}
<!-- HTML gerado sem fuso horário-->
<p>Junte-se a nós em 1o. de janeiro de 2020 às 11:00</p>
<!-- HTML gerado com fuso horário-->
<p>Junte-se a nós em 1o. de janeiro de 2020 às 03:00</p>
Insert (Inserir)
// Teste de dados com todos os valores
{
"name": "Ben",
"businessName": "Twilio SendGrid"
}
// Teste de dados com falta de valor
{
"name": "Ben"
}
<!-- HTML gerado com todos os valores -->
<p>Olá, Ben! Obrigado por entrar em contato sobre o Twilio SendGrid.</p>
<!-- HTML gerado com falta de valor e um padrão-->
<p>Olá, Ben! Obrigado por entrar em contato sobre sua empresa.</p>
Instruções condicionais
Os modelos Twilio SendGrid oferecem suporte às seguintes condicionais:
Basic If, Else, Else If (Se, Senão, Senão se básicos)
// Dados de teste um
{
"user":{
"profile":{
"male":true
}
}
}
// Dados de teste dois
{
"user":{
"profile":{
"female":true
}
}
}
// Dados de teste três
{
"user":{
"profile":{
}
}
}
<!-- HTML gerado dos dados de teste um -->
<p>Prezado Sr.</p>
<!-- HTML gerado dos dados de teste dois -->
<p>Prezada Sra.</p>
<!-- HTML gerado dos dados de teste três -->
<p>Prezado cliente</p>
If with a root (Se com uma raiz)
// Dados de teste
{
"user": {
"suspended": true
},
"supportPhone": "1-800-555-5555"
}
<!-- HTML gerado -->
<p>Aviso! Sua conta está suspensa, ligue para: 1-800-555-5555</p>
Unless (Exceto)
// Dados de teste
{
"user": {
"active": false
},
"supportPhone": "1-800-555-5555"
}
<!-- HTML gerado -->
<p>Aviso! Sua conta está suspensa, ligue para: 1800-555-5555</p>
greaterThan (Maior que)
Basic greaterThan (Maior que básico)
// Dados de teste um
{
"scoreOne": 100,
"scoreTwo": 78
}
// Dados de teste dois
{
"scoreOne": 55,
"scoreTwo": 78
}
<!-- HTML gerado dos dados de teste um-->
<p>
Olá, Ben! Parabéns, você tem a pontuação mais alta hoje! Obrigado por jogar.
</p>
<!-- HTML gerado dos dados de teste dois-->
<p>Olá, Ben! Obrigado por jogar.</p>
greaterThan with else (Maior que com senão)
// Dados de teste um
{
"scoreOne": 100,
"scoreTwo": 78
}
// Dados de teste dois
{
"scoreOne": 55,
"scoreTwo": 78
}
<!-- HTML gerado dos dados de teste um-->
<p>
Olá, Ben! Parabéns, você tem a pontuação mais alta hoje! Obrigado por jogar.
</p>
<!-- HTML gerado dos dados de teste dois-->
<p>
Olá, Ben! Você estava perto, mas não obteve a pontuação alta hoje. Obrigado por
jogar.
</p>
lessThan (Menor que)
Basic lessThan (Menor que básico)
// Dados de teste um
{
"scoreOne": 55,
"scoreTwo": 78
}
// Dados de teste dois
{
"scoreOne": 100,
"scoreTwo": 78
}
<!-- HTML gerado dos dados de teste um-->
<p>
Olá, Ben! Você estava perto, mas não obteve a pontuação alta hoje. Obrigado por
jogar.
</p>
<!-- HTML gerado dos dados de teste dois-->
<p>Olá, Ben! Obrigado por jogar.</p>
lessThan with else (Menor que com senão)
// Dados de teste um
{
"scoreOne": 55,
"scoreTwo": 78
}
// Dados de teste dois
{
"scoreOne": 100,
"scoreTwo": 78
}
<!-- HTML gerado dos dados de teste um-->
<p>
Olá, Ben! Você estava perto, mas não obteve a pontuação alta hoje. Obrigado por
jogar.
</p>
<!-- HTML gerado dos dados de teste dois-->
<p>
Olá, Ben! Parabéns, você tem a pontuação mais alta hoje! Obrigado por jogar.
</p>
Equals (Igual)
O operador de comparação equals
pode verificar a igualdade entre dois valores do mesmo tipo de dados. O assistente equals
também tentará abordar os tipos de dados para fazer uma comparação de valores independentemente do tipo de dados. Por exemplo, {{#equals 3 "3"}}
é definido como true
.
Esteja ciente de que a página de visualização do editor não renderiza corretamente os resultados de uma comparação entre valores coagidos. Você vê comparações adequadas entre valores coagidos somente em uma mensagem entregue.
Ao verificar a veracidade, esteja ciente de que cadeias de caracteres vazias, números inteiros zero e números de ponto flutuante zero são avaliados como false
. Strings não vazias, números inteiros diferentes de zero e números de ponto flutuante diferentes de zero, incluindo números negativos, são avaliados como true
.
Basic equals (Igual básico)
// Dados de teste um
{
"customerCode": 289199,
"winningCode": 289199
}
// Dados de teste dois
{
"customerCode": 167320,
"winningCode": 289199
}
<!-- HTML gerado dos dados de teste um-->
<p>Olá, Ben! Você tem um código vencedor. Obrigado por jogar.</p>
<!-- HTML gerado dos dados de teste dois-->
<p>Olá, Ben! Obrigado por jogar.</p>
Equals with else (Igual com senão)
// Dados de teste um
{
"customerCode": 289199,
"winningCode": 289199
}
// Dados de teste dois
{
"customerCode": 167320,
"winningCode": 289199
}
<!-- HTML gerado dos dados de teste um-->
<p>Olá, Ben! Você tem um código vencedor. Obrigado por jogar.</p>
<!-- HTML gerado dos dados de teste dois-->
<p>Olá, Ben! Você não tem um código vencedor. Obrigado por jogar.</p>
notEquals (Não igual)
O operador de comparação notEquals
pode verificar a igualdade entre dois valores do mesmo tipo de dados. O assistente notEquals
também tentará abordar os tipos de dados para fazer uma comparação de valores independentemente do tipo de dados. Por exemplo, {{#equals 3 "3"}} retorna false
.
Ao verificar a veracidade, esteja ciente de que cadeias de caracteres vazias, números inteiros zero e números de ponto flutuante zero são avaliados como false
. Strings não vazias, números inteiros diferentes de zero e números de ponto flutuante diferentes de zero, incluindo números negativos, são avaliados como true
.
Basic notEquals (Não igual básico)
// Dados de teste um
{
"customerCode": 289199,
"winningCode": 289199
}
// Dados de teste dois
{
"customerCode": 167320,
"winningCode": 289199
}
<!-- HTML gerado dos dados de teste um-->
<p>Olá, Ben! Você tem um código vencedor. Obrigado por jogar.</p>
<!-- HTML gerado dos dados de teste dois-->
<p>Olá, Ben! Obrigado por jogar.</p>
notEquals with else (Não igual com senão)
// Dados de teste um
{
"customerCode": 289199,
"winningCode": 289199
}
// Dados de teste dois
{
"customerCode": 167320,
"winningCode": 289199
}
<!-- HTML gerado dos dados de teste um-->
<p>Olá, Ben! Você tem um código vencedor. Obrigado por jogar.</p>
<!-- HTML gerado dos dados de teste dois-->
<p>Olá, Ben! Você não tem um código vencedor. Obrigado por jogar.</p>
And (E)
Ao verificar a veracidade, esteja ciente de que cadeias de caracteres vazias, números inteiros zero e números de ponto flutuante zero são avaliados como false
. Strings não vazias, números inteiros diferentes de zero e números de ponto flutuante diferentes de zero, incluindo números negativos, são avaliados como true
.
And without else (E sem senão)
// Dados de teste um
{
"favoriteFood": "Pasta",
"favoriteDrink": ""
}
// Dados de teste dois
{
"favoriteFood": "Pasta",
"favoriteDrink": "Coffee"
}
<!-- HTML gerado dos dados de teste um -->
<p>Olá, Ben! Estamos ansiosos para enviar mais receitas deliciosas para você.</p>
<!-- HTML gerado dos dados de teste dois -->
<p>
Olá, Ben! Obrigado por nos informar suas preferências de jantar. Estamos ansiosos
para enviar mais receitas deliciosas para você.
</p>
And with else (E com senão)
// Dados de teste um
{
"favoriteFood": "Pasta",
"favoriteDrink": ""
}
// Dados de teste dois
{
"favoriteFood": "Pasta",
"favoriteDrink": "Coffee"
}
<!-- HTML gerado dos dados de teste um -->
<p>
Olá, Ben! Se você terminar de preencher sua pesquisa de preferências de jantar, nós podemos
enviar receitas que achamos que você tem mais interesse. Estamos ansiosos
para enviar mais receitas deliciosas para você.
</p>
<!-- HTML gerado dos dados de teste dois -->
<p>
Olá, Ben! Obrigado por nos informar suas preferências de jantar. Estamos ansiosos
para enviar mais receitas deliciosas para você.
</p>
Or (Ou)
Ao verificar a veracidade, esteja ciente de que cadeias de caracteres vazias, números inteiros zero e números de ponto flutuante zero são avaliados como false
. Strings não vazias, números inteiros diferentes de zero e números de ponto flutuante diferentes de zero, incluindo números negativos, são avaliados como true
.
Basic or (Ou básico)
// Dados de teste um
{
"isRunner": true,
"isCyclist": false
}
// Dados de teste dois
{
"isRunner": false,
"isCyclist": false
}
// Dados de teste três
{
"isRunner": false,
"isCyclist": true
}
<!-- HTML gerado dos dados de teste um -->
<p>
Olá, Ben! Achamos que você pode gostar de um mapa de trilhas da sua região. Você pode encontrar
o mapa anexo a este e-mail. Tenha um ótimo dia.
</p>
<!-- HTML gerado dos dados de teste dois -->
<p>Olá, Ben! Tenha um ótimo dia.</p>
<!-- HTML gerado dos dados de teste três -->
<p>
Olá, Ben! Achamos que você pode gostar de um mapa de trilhas da sua região. Você pode encontrar
o mapa anexo a este e-mail. Tenha um ótimo dia.
</p>
Or with else (Ou com senão)
// Dados de teste um
{
"isRunner": true,
"isCyclist": false
}
// Dados de teste dois
{
"isRunner": false,
"isCyclist": false
}
// Dados de teste três
{
"isRunner": false,
"isCyclist": true
}
<!-- HTML gerado dos dados de teste um -->
<p>
Olá, Ben! Achamos que você pode gostar de um mapa de trilhas da sua região. Você pode encontrar
o mapa anexo a este e-mail. Tenha um ótimo dia.
</p>
<!-- HTML gerado dos dados de teste dois -->
<p>
Olá, Ben! Adoraríamos saber mais sobre as atividades ao ar livre que você gosta. A
a pesquisa no link abaixo leva apenas um minuto para ser respondida. Tenha um ótimo dia.
</p>
<!-- HTML gerado dos dados de teste três -->
<p>
Olá, Ben! Achamos que você pode gostar de um mapa de trilhas da sua região. Você pode encontrar
o mapa anexo a este e-mail. Tenha um ótimo dia.
</p>
Length (Comprimento)
O assistente de comprimento retorna o número de caracteres em uma determinada string ou matriz. Para valores que não são de string e não são de matriz, o comprimento retorna 0. O comprimento pode ser útil junto com outros assistentes, como mostrado com o maior que no exemplo a seguir.
// Dados de teste um
{
"cartItems": ["raft", "water bottle", "sleeping bag"]
}
// Dados de teste dois
{
"cartItems": []
}
<!-- HTML gerado dos dados de teste um-->
<p>
Olá, Ben! Parece que você ainda tem alguns itens em seu carrinho de compras. Conecte-se
novamente para continuar finalizar a compra a qualquer momento.
</p>
<!-- HTML gerado dos dados de teste dois-->
<p>Olá, Ben! Obrigado por navegar em nosso site. Esperamos que você volte em breve.</p>
Iterations (Iterações)
Você pode fazer loop ou iterar dados usando a função assistente {{#each }}
para criar listas e executar outras ações úteis de criação de modelos.
Basic Iterator with each (Iterador básico com cada)
// Dados de teste
{
"user": {
"orderHistory": [
{
"date": "1/2/2018",
"item": "shoes"
},
{
"date": "4/1/2017",
"item": "hat"
}
]
}
}
<!-- HTML gerado -->
<ol>
<li>Você comprou: sapatos em: 1/2/2018</li>
<li>Você comprou: chapéu em: 1/42017</li>
</ol>
Exemplos combinados
Os exemplos a seguir mostram como combinar várias funções do Handbars para criar um modelo realmente dinâmico.
- Dynamic content creation
- Dynamic content creation with dynamic parts 1
- Dynamic content creation with dynamic parts 2
Criação dinâmica de conteúdo
// Dados de teste
{
"user": {
"story": [
{
"male": true,
"date": "1/2/2018",
"item": "shoes"
},
{
"male": true,
"date": "4/1/2017",
"item": "hat"
},
{
"female": true,
"date": "1/1/2016",
"item": "shirt"
}
]
}
}
<!-- HTML gerado -->
<p>1/2/2018</p>
<p>4/1/2017</p>
<>camiseta /<p>
Criação dinâmica de conteúdo com partes dinâmicas 1
// Dados de teste
{
"user": {
"story": [
{
"male": true,
"date": "1/2/2018",
"item": "shoes"
},
{
"male": true,
"date": "4/1/2017"
},
{
"female": true,
"item": "shirt"
}
]
}
}
<!-- HTML gerado -->
<p>1/2/2018</p>
<>sapatos</p>
<p>4/1/2017</p>
<>camiseta /<p>
Criação dinâmica de conteúdo com partes dinâmicas 2
// Dados de teste
{
"people": [{ "name": "Bob" }, { "name": "Sally" }]
}
<!-- HTML gerado -->
<p>Pessoas:</p>
<p>Bob</p>
<p>Sally/<p>
Recursos adicionais
Precisa de ajuda?
Às vezes, todos nós precisamos. Receba ajuda agora da equipe de suporte do Twilio SendGrid.
Enfrentando dificuldades de codificação? Confie na sabedoria da multidão navegando pela tag SendGrid em Stack Overflow ou visite o Stack Overflow Collective da Twilio.