Como criar um HTML para E-mail Inteligente

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:

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

1. Acesse a aba E-mail Inteligente na Nova Interface.
   
2. Clique em Criar E-mail Inteligente.
   
3. Preencha os campos obrigatórios (nome, altura/largura, URLs de callback).
   
4. Cole seu código HTML no campo correspondente.
   
5. Visualize o HTML com o XML de exemplo para garantir que está tudo certo.
   
6. Defina se vai usar remarketing e o módulo que deseja usar.
   
7. Selecione o XML e produto desejado.
   
8. 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.

🤝 Suporte

Se precisar de ajuda na estruturação do HTML ou na integração com o XML/API, entre em contato com nosso time de suporte:

📧 atendimento-xp@wake.tech
📱 WhatsApp: +55 11 97184-2450