---
url: "/pt/emailify/content/dynamic.md"
description: "Adicione conteúdo dinâmico aos seus e-mails combinando merge tags e blocos de código personalizado na sintaxe da sua plataforma de e-mail marketing."
---

# Adicionar conteúdo dinâmico e personalizado com o Emailify

> Adicione conteúdo dinâmico aos seus e-mails combinando merge tags e blocos de código personalizado na sintaxe da sua plataforma de e-mail marketing.

### Vídeo tutorial: adicionar conteúdo dinâmico a e-mails HTML no Figma

Este vídeo mostra como adicionar conteúdo dinâmico a e-mails HTML no Figma com o plugin Emailify.
[Embedded media](https://www.youtube-nocookie.com/embed/0512urzUNTk)

### Vídeo tutorial: adicionar um feed dinâmico de produtos aos seus e-mails do Klaviyo no Figma

Este vídeo mostra como adicionar feeds de produtos personalizados do Klaviyo a templates HTML personalizados com o plugin Emailify para Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/PaRSIxVLYlo)
### Vídeo tutorial: criar no Figma um template de e-mail de fluxo de carrinho abandonado do Klaviyo

Este vídeo mostra como adicionar fluxos personalizados de carrinho abandonado do Klaviyo a templates HTML personalizados com o plugin Emailify para Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/MHPCkb1n8XM)

## Adicionar conteúdo personalizado específico da plataforma {#adding-platform-specific-personalization-content}

[Video](/assets/videos/emailify/content/text-merge-tags.mp4)

Você pode adicionar texto personalizado, como o nome das pessoas, usando as merge tags do seu provedor de serviços de e-mail (por exemplo, MailChimp, Klaviyo etc.). Para isso, adicione a merge tag às suas camadas de conteúdo de texto do Emailify.

Por exemplo, ao adicionar `Hello, %FIRSTNAME%` ou `Hello, *|FNAME|*` (conforme a sintaxe e os valores da sua plataforma) ao conteúdo da camada de texto do Figma, a merge tag é substituída automaticamente pelos dados reais quando o e-mail é enviado.

> **Note:** Como essas tags variam de acordo com a plataforma que você usa para enviar os e-mails, consulte a documentação de templates do seu provedor de serviços de e-mail para saber quais tags estão disponíveis.

### Documentação de variáveis de template de algumas plataformas {#some-platform-specific-template-variable-documentation}

Veja abaixo links para algumas plataformas populares (mas não todas):

- [Merge tags do MailChimp](https://mailchimp.com/en-au/help/all-the-merge-tags-cheat-sheet/)
- [Tags de template do Klaviyo](https://help.klaviyo.com/hc/en-us/articles/4408802648731)
- [Sintaxe de templates do Campaign Monitor](https://help.campaignmonitor.com/personalize-emails-with-subscriber-custom-fields)
- [Sintaxe de templates do Postmark](https://postmarkapp.com/support/article/1077-template-syntax)
- [Tags de substituição do SendGrid](https://docs.sendgrid.com/for-developers/sending-email/substitution-tags)
- [Tokens de personalização do HubSpot](https://knowledge.hubspot.com/website-pages/personalize-your-content#add-personalization-to-a-coded-template)
- [Tags de personalização do ActiveCampaign](https://help.activecampaign.com/hc/en-us/articles/220709307-Personalization-Tags#list-of-standard-personalization-tags-0-5)
- [Personalização de e-mails no Mailjet](https://documentation.mailjet.com/hc/en-us/articles/360043225773-Can-we-personalize-emails-)
- [Personalização de e-mails no SendPulse](https://sendpulse.com/knowledge-base/email-service/additional/clever-personalization)
- [Tags de personalização do Braze](https://www.braze.com/docs/user_guide/personalization_and_dynamic_content/liquid/supported_personalization_tags/)
- [Personalização de templates no Iterable](https://support.iterable.com/hc/en-us/articles/205480365-Personalizing-Templates-with-Handlebars-)
- [Tags de personalização do Dotdigital](https://support.dotdigital.com/hc/en-gb/articles/212212798-Add-data-field-personalisation-to-your-email-campaign-or-landing-page)
- [Tags de personalização do Intercom](https://www.intercom.com/help/en/articles/247-create-custom-email-templates#2-when-adding-user-or-company-variables-to-your-template)

## Adicionar lógica if/else entre camadas Row, Wrapper ou Hero {#add-if-else-logic-between-your-row-wrapper-or-hero-layers}

[Video](/assets/videos/emailify/content/custom-code-elements.mp4)

Você pode usar o tipo de camada [🧑‍💻 Custom Code](/pt/emailify/content/code) para inserir lógica de template personalizada entre as rows dos seus designs. Confira se a sintaxe está correta para a plataforma de e-mail marketing que você usa; o resultado seria algo assim:

`{% if customer_type == 'premium' %}`

_Uma Row do Emailify aqui_

`{% else %}`

_Outra Row do Emailify aqui_

`{% endif %} `

## Adicionar imagens personalizadas ou dinâmicas {#add-personalized-dynamic-images}

[Video](/assets/videos/emailify/content/custom-image-url-override.mp4)

Para substituir a URL de uma camada de imagem específica nos seus designs de e-mail, preencha o campo **Override Image Src**. Você pode usar a URL de uma imagem que já está hospedada em algum lugar (por exemplo, `https://mycdn/img.jpg`) ou uma variável dinâmica da linguagem de templates da sua plataforma de e-mail (por exemplo, `{ variable.my_image }`). O valor é adicionado automaticamente ao atributo `src` da tag `` quando o HTML é exportado.

### Definir a altura (com largura “auto”) de uma imagem dinâmica, se quiser {#optionally-setting-the-height-with-an-auto-width-for-a-dynamic-image}

Para imagens dinâmicas em que você quer controlar a altura e deixar a largura se ajustar naturalmente (já que as dimensões do arquivo da URL da imagem dinâmica podem não ser conhecidas de antemão), faça o seguinte no Figma:

1. Ative **Lock aspect ratio** na camada de imagem, na interface do Figma.
2. Defina um valor de **Max height** para a camada de imagem, na interface do Figma.

Com essas configurações, a imagem é renderizada com altura fixa (igual à altura máxima definida no Figma) e largura ajustada automaticamente, em vez do comportamento padrão (largura fixa e altura automática). Assim, suas imagens dinâmicas ocupam o espaço vertical correto e mantêm a proporção natural.

> **Info:** Esse comportamento vale apenas para imagens com URLs dinâmicas; as imagens estáticas exportadas pelo Emailify e as imagens em plataformas MJML não são afetadas.

## Truncar textos personalizados longos {#truncate-long-custom-text-content}

[Video](/assets/videos/emailify/content/truncate-lines.mp4)

Adicionar tags longas de texto dinâmico aos seus designs de e-mail às vezes atrapalha o design, aumentando artificialmente a altura de certos elementos ou de imagens de fundo, por exemplo, enquanto o _conteúdo final_ (que acaba substituindo as tags de conteúdo dinâmico) no envio do e-mail pode ser mais curto que a própria tag.

Para reduzir esse efeito, você pode truncar a camada de texto do Figma em um número máximo de linhas definido por você, seguindo estes passos:

1. **Clique na camada de texto** no design do frame do Emailify no Figma
2. Defina a [configuração de dimensionamento do texto](https://help.figma.com/hc/en-us/articles/27378154668951-Adjust-text-dimensions-and-resizing) da camada de texto como **Auto width**
3. Abra o painel **Type settings** (clicando no ícone **...**)
4. Defina a opção **Truncate text** como **Truncate enabled**
5. Defina a propriedade **Max lines** (logo abaixo) com o número máximo de linhas que o texto pode ocupar
6. Defina a propriedade **Horizontal resizing** do **Auto layout** da camada de texto como **Fill container**

> **Note:** O truncamento só se aplica ao canvas do Figma, para que o valor completo do texto dinâmico não ocupe mais altura do que deveria. A exportação final em HTML não inclui nenhum tipo de truncamento, já que o texto dinâmico é substituído automaticamente pelo conteúdo real quando o e-mail final é enviado ao seu público pela plataforma de e-mail marketing para a qual você usa as tags de conteúdo dinâmico.

### Manter os botões estreitos com textos de placeholder longos {#keep-buttons-narrow-with-long-placeholder-text}

Se um botão tiver uma variável ou um placeholder longo que depois será substituído por uma data ou um rótulo mais curto, dimensione a camada de texto para o rótulo final. Caso contrário, o placeholder pode deixar o botão exportado largo demais, e o Outlook pode manter essa largura mesmo depois que sua plataforma de e-mail substituir o placeholder.

1. Selecione a **camada de texto dentro do botão** no Figma.
2. Defina o **Horizontal resizing** dessa camada de texto como **Fixed width** e escolha uma largura que caiba a data ou o rótulo final esperado.
3. Abra **Type settings**, ative **Truncate text** e defina **Max lines** como **1**.
4. Mantenha a variável ou o placeholder completo na camada de texto e exporte o e-mail de novo.
5. Envie um teste pela sua plataforma de e-mail para conferir o botão com o texto final substituído, inclusive no Outlook, se ele for afetado.

> **Note:** O truncamento só muda a forma como o placeholder aparece no canvas do Figma. O placeholder completo continua no HTML exportado para que sua plataforma de e-mail o substitua. Deixe largura suficiente para o maior rótulo final que você pretende enviar.

## Adicionar variáveis dinâmicas de cor e de família de fonte {#adding-dynamic-color-and-font-family-variables}

[Video](/assets/videos/emailify/content/dynamic-color-name-variables.mp4)

### Variáveis dinâmicas de cor {#dynamic-color-variables}

Se quiser que qualquer cor de fundo, de texto ou de contorno dos seus designs de e-mail seja renderizada como um trecho de código dinâmico (por exemplo, **{{ primary_color }}**) em vez do valor hexadecimal normal da cor do Figma (por exemplo, `#000000`), crie um [estilo de cor do Figma](https://www.youtube.com/watch?v=d01Ql9ZtVnk) cujo **Name** contenha chaves duplas (por exemplo, **{{ my_color_var_name }}**). Esse valor de **Name** do estilo de cor é usado automaticamente como valor CSS de `color`, `background-color` ou `border-color` quando o plugin Emailify gera o HTML.

### Variáveis dinâmicas de família de fonte {#dynamic-font-family-variables}

Da mesma forma, se quiser que qualquer valor CSS de `font-family` seja renderizado como um trecho de código dinâmico (por exemplo, **{{ customer.font_family }}**) em vez do valor normal da fonte no Figma (por exemplo, `Arial, sans-serif`), crie um [estilo de texto do Figma](https://www.youtube.com/watch?v=M0OuDhxaroU) cujo **Name** contenha chaves duplas (por exemplo, **{{ my_font_var_name }}**). Esse valor de **Name** do estilo é usado automaticamente como valor CSS de `font-family` quando o plugin Emailify gera o HTML.

## Repetir uma Data Table Row com dados dinâmicos {#looping-a-data-table-row-with-dynamic-data}

[Video](/assets/videos/emailify/content/looping-data-table-row.mp4)

Para percorrer dados da sua plataforma de e-mail, selecione uma **Data Table Row** e abra **Settings**. Adicione a sintaxe do loop em **Opening Code Wrapper** (por exemplo, `{% for product in collection.products %}`) e em **Closing Code Wrapper** (por exemplo, `{% endfor %}`). O Emailify insere essas tags ao redor do elemento `` dessa linha no HTML exportado.

Depois de adicionar as tags de wrapper à camada **Data Table Row**, você pode [preencher o conteúdo dinâmico](#adding-platform-specific-personalization-content) nas camadas da linha como precisar.

> **Tip:** Você pode [aplicar configurações em massa](/pt/emailify/design/settings#apply-settings-in-bulk) abrindo **Settings** e selecionando no Figma várias camadas do Emailify do mesmo tipo. Qualquer configuração que você alterar será aplicada a todas as camadas selecionadas.