You are viewing the Portuguese (Brazil) site, but your language preference is set to English. Switch to English site →

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:

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:

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

<!-- Template -->
<p>Hello {{ firstName }}</p>
// Dados de teste
{ "firstName": "Ben" }
<!-- Resulting HTML !-->
<p>Hello Ben</p>

Substituição detalhada do objeto

<!-- Template -->
<p>Hello {{user.profile.firstName}}</p>
// Dados de teste
{
  "user": {
    "profile": {
      "firstName": "Ben"
    }
  }
}
<!-- HTML gerado -->
<p>Hello Ben</p>

Falha de objeto

<!-- Template -->
<p>Hello {{user.profile.firstName}}</p>
// 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.

<!-- Template -->
<!-- De acordo com a documentação do Handlebars: se você não quiser que o Handlebars insira um valor, use "triple-stash", {{{ -->
<p>Hello {{{firstName}}}</p>
// 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.

ss
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

<!-- Modelo sem compensação de fuso horário -->
<p>Junte-se a nós {{formatDate timeStamp dateFormat}}</p>

<!-- Modelo com compensação de fuso horário -->
<p>Junte-se a nós {{formatDate timeStamp dateFormat timezoneOffset}}</p>
// 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)

<!-- Insira com um valor padrão -->
<p>Olá {{insert name "default=Customer"}}!  Obrigado por entrar em contato sobre {{insert businessName "your business"}}.</p>
// 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)

<!-- Template -->
{{#if user.profile.male}}
   <p>Prezado Sr.</p>
{{else if user.profile.female}}
   <p>Prezada Sra.</p>
{{else}}
   <p>Prezado cliente</p>
{{/if}}
// 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)

<!-- Template -->
{{#if user.suspended}}
   <p>Aviso! Sua conta está suspensa, ligue para: {{@root.supportPhone}}</p>
{{/if}}
// 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)

<!-- Template -->
{{#unless user.active}}
   <p>Aviso! Sua conta está suspensa, ligue para: {{@root.supportPhone}}</p>
{{/unless}}
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#greaterThan scoreOne scoreTwo}}
    Parabéns, você tem a pontuação mais alta hoje!
{{/greaterThan}}
 Obrigado por jogar.
</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#greaterThan scoreOne scoreTwo}}
    Parabéns, você tem a pontuação mais alta hoje!
{{else}}
    Você estava perto, mas não obteve a pontuação alta hoje.
{{/greaterThan}}
 Obrigado por jogar.
</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#lessThan scoreOne scoreTwo}}
    Você estava perto, mas não obteve a pontuação alta hoje.
{{/lessThan}}
 Obrigado por jogar.
</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#lessThan scoreOne scoreTwo}}
    Você estava perto, mas não obteve a pontuação alta hoje.
{{else}}
    Parabéns, você tem a pontuação mais alta hoje!
{{/lessThan}}
 Obrigado por jogar.
</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#equals customerCode winningCode}}
    Você tem um código vencedor.
{{/equals}}
 Obrigado por jogar.
</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#equals customerCode winningCode}}
    Você tem um código vencedor.
{{else}}
    Você não tem um código vencedor.
{{/equals}}
 Obrigado por jogar.
</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#notEquals customerCode winningCode}}
    Você tem um código vencedor.
{{/notEquals}}
 Obrigado por jogar.
</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#notEquals customerCode winningCode}}
    Você tem um código vencedor.
{{else}}
    Você não tem um código vencedor.
{{/notEquals}}
 Obrigado por jogar.
</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#and favoriteFood favoriteDrink}}
   Obrigado por nos informar suas preferências de jantar.
{{/and}}.
 Estamos ansiosos para enviar mais receitas deliciosas para você.</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#and favoriteFood favoriteDrink}}
   Obrigado por nos informar suas preferências de jantar.
{{else}}
   Se você terminar de preencher sua pesquisa de preferências de jantar, podemos enviar receitas que achamos que você tem mais interesse.
{{/and}}.
 Estamos ansiosos para enviar mais receitas deliciosas para você.</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#or isRunner isCyclist}}
   Achamos que você pode gostar de um mapa de trilhas da sua região.
{{/or}}.
 Tenha um ótimo dia.
</p>
// 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)

<!-- Template -->
<p>
Olá, Ben!
{{#or isRunner isCyclist}}
   Achamos que você pode gostar de um mapa de trilhas da sua região. Você pode encontrar o mapa anexo a este e-mail.
{{else}}
   Adoraríamos saber mais sobre as atividades ao ar livre que você gosta. A pesquisa no link abaixo leva apenas um minuto para ser respondida.
{{/or}}.
 Tenha um ótimo dia.
</p>
// 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.

<!-- Templates -->
<p>
Olá, Ben!
{{#greaterThan 0 length cartItems}}
 Parece que você ainda tem alguns itens em seu carrinho de compras. Conecte-se novamente para finalizar a compra a qualquer momento.
{{else}}
 Obrigado por navegar em nosso site. Esperamos que você volte em breve.
{{/greaterThan}}
</p>
// 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)

<!-- Template -->
<ol>
  {{#each user.orderHistory}}
   <li>Seu pedido: {{this.item}} on: {{this.date}}</li>
  {{/each}}
</ol>
// 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.

Criação dinâmica de conteúdo

<!-- Template -->
{{#each user.story}}
   {{#if this.male}}
      <p>{{this.date}}</p>
   {{else if this.female}}
      <p>{{this.item}}</p>
   {{/if}}
{{/each}}
// 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

<!-- Template -->
{{#each user.story}}
   {{#if this.male}}
      {{#if this.date}}
         <p>{{this.date}}</p>
      {{/if}}
      {{#if this.item}}
         <p>{{this.item}}</p>
      {{/if}}
   {{else if this.female}}
      {{#if this.date}}
         <p>{{this.date}}</p>
      {{/if}}
      {{#if this.item}}
         <p>{{this.item}}</p>
      {{/if}}
   {{/if}}
{{/each}}
// 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

<!-- Template -->
{{#if people}}
   <p>Pessoas:</p>
   {{#each people}}
      <p>{{this.name}}</p>
   {{/each}}
{{/if}}
// Dados de teste
{
  "people": [{ "name": "Bob" }, { "name": "Sally" }]
}
<!-- HTML gerado -->
<p>Pessoas:</p>
<p>Bob</p>
<p>Sally/<p>

Recursos adicionais

Classifique esta página:

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.

Obrigado pelo seu feedback!

Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

Enviando seu feedback...
🎉 Obrigado pelo seu feedback!
Algo deu errado. Tente novamente.

Obrigado pelo seu feedback!

thanks-feedback-gif