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.

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.

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.

Adicionar conteúdo personalizado específico da plataforma ​

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.

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 ​

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

Adicionar lógica if/else entre camadas Row, Wrapper ou Hero ​

Você pode usar o tipo de camada 🧑‍💻 Custom 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 ​

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 <img /> quando o HTML é exportado.

Definir a altura (com largura “auto”) de uma imagem dinâmica, se quiser ​

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.

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 ​

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 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

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 ​

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.

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 ​

Variáveis dinâmicas de cor ​

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 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 ​

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 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 ​

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 <tr></tr> dessa linha no HTML exportado.

Depois de adicionar as tags de wrapper à camada Data Table Row, você pode preencher o conteúdo dinâmico nas camadas da linha como precisar.

Você pode aplicar configurações em massa 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.