Como criar um HTML para E-mail Inteligente – Wake Experience

O E-mail Inteligente da Wake Experience permite a criação de campanhas dinâmicas com conteúdos atualizados automaticamente por XML ou API, mesmo após o envio. Este guia foca especificamente na criação do HTML necessário para que essa funcionalidade funcione corretamente.

O que é um HTML Inteligente?

É um código HTML personalizado que utiliza variáveis dinâmicas para preencher automaticamente as informações dos produtos cadastrados em seu XML ou API, como nome, imagem, preço, descrição, etc. O HTML é renderizado no momento da abertura do e-mail, garantindo que os dados estejam sempre atualizados.

Etapas para criação do HTML

1. Estruture seu HTML fora da plataforma

Utilize um editor HTML à sua escolha (ex: VS Code, Sublime Text ou um construtor visual). O HTML deve conter:

Um layout responsivo (compatível com e-mail).
Espaços para inserção de variáveis dinâmicas (ex: {{productName}}, {{price}}, {{imageUrl}}, {{url}}).
Imagens hospedadas em servidores com HTTPS.

Exemplo de HTML básico:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <a href="{{url}}" target="_blank">
        <img src="{{imageUrl}}" alt="{{productName}}" width="300" style="display:block; border:0;"/>
      </a>
      <h2 style="font-size: 18px; color: #333;">{{productName}}</h2>
      <p style="font-size: 16px; color: #e60000;"><strong>{{price}}</strong></p>
    </td>
  </tr>
</table>

2. Utilize variáveis dinâmicas do XML

As variáveis disponíveis dependem do seu XML ou API, mas geralmente incluem:

Variável	Descrição
`{{productName}}`	Nome do produto
`{{price}}`	Preço do produto
`{{imageUrl}}`	URL da imagem
`{{url}}`	Link para a página do produto
`{{installments}}`	Condições de parcelamento

Dica: Valide com seu time técnico ou consultor Wake quais variáveis estão disponíveis no seu XML/API.

Boas práticas

Evite CSS externo: use estilos inline para garantir compatibilidade com provedores de e-mail.
Use tabelas para montar o layout (melhor suporte entre clientes de e-mail).
Valide o HTML em ferramentas como Litmus ou Email on Acid.
Teste a renderização com produtos reais antes de ativar campanhas.

Integração com a Plataforma Wake

Após finalizar o HTML:

Acesse a aba Campanhas > E-mail Inteligente na na plataforma.
Clique em Criar E-mail Inteligente.
Preencha os campos obrigatórios (nome, altura/largura, URLs de callback).
Cole seu código HTML no campo correspondente.
Visualize o HTML com o XML de exemplo para garantir que está tudo certo.
Defina se vai usar remarketing e o módulo que deseja usar.
Selecione o XML e produto desejado.
Clique em Cadastrar.

Atenção

O HTML não deve conter scripts ou códigos não suportados por e-mail.
Garanta que todos os links e imagens utilizem HTTPS.
O conteúdo será atualizado até o momento de abertura do e-mail — após isso, o cache do provedor pode prevalecer.