Email: preview HTML antes de enviar

Antes de disparar email para sua base, sempre faça preview. ShopIA oferece dois caminhos: preview interno no painel e envio de teste para sua caixa real. Esta página explica cada um.

Por que pré-visualizar

Email não é como página web — providers diferentes (Gmail, Outlook, Apple Mail) renderizam HTML de formas distintas. Erro comum: design lindo no dev, quebrado no Outlook.

Casos de bug típicos:

• Imagem sem alt text não carrega em cliente com bloqueio
• Largura mal definida vaza no mobile
• CSS inline sobrescrito por cliente de email
• Cores diferentes em modo escuro do destinatário

Preview interno no painel

Para newsletter

1. Otto > Newsletter > [Newsletter] > Pré-visualizar.
2. Modo desktop e mobile.
3. Conteúdo renderizado dentro do painel com tags substituídas.

ShopIA substitui placeholders (nome do cliente, primeiro nome) com dados de exemplo ou de um cliente real escolhido.

Para campanha multicanal

Mesmo caminho em Campanhas > [Campanha] > Pré-visualizar.

Aba Email mostra HTML renderizado.

Para automação Otto

Otto > [Automação] > Pré-visualizar mensagem mostra como sairia para um cliente fictício.

Limitações do preview interno

Preview no painel é aproximação:

• Renderiza com engine do navegador atual (Chrome, Safari, Firefox)
• Não simula renders de Gmail Web, Outlook Desktop, Apple Mail
• Não testa filtros de spam

Para testes mais reais, use envio de teste.

Envio de teste

Manda email real para um endereço de teste seu, sem afetar a base.

Para newsletter

1. Otto > Newsletter > [Newsletter] > Enviar teste.
2. Digite até 3 emails de destino (separados por vírgula).
3. Confirme.
4. Email chega em segundos.

Detalhes em Newsletter: enviar teste.

Para campanha

Campanhas > [Campanha] > Enviar teste para mim.

O que valida

• Render real em Gmail/Outlook/Apple Mail (você abre no seu app)
• Cabeçalhos corretos
• Tags substituídas
• Anexos funcionando
• Links funcionando
• Imagens carregando

Atenção: envio de teste não conta na cota. Limite: 50 testes por dia por loja.

Checklist de preview

Antes de aprovar para envio real, confirme:

Conteúdo

• [ ] Subject line clara e não-spam
• [ ] Pré-header preenchido (texto que aparece no inbox antes de abrir)
• [ ] Saudação personalizada ({{customer_first_name}})
• [ ] CTA visível e clicável
• [ ] Sem erros de português, sem palavras tipo "GRÁTIS!!!" excessivas

Visual

• [ ] Logo legível
• [ ] Imagens com alt text descritivo
• [ ] Cores legíveis (contraste suficiente)
• [ ] Tipografia consistente
• [ ] Mobile: tudo cabe na largura, sem rolagem horizontal

Técnico

• [ ] Links apontam para URLs corretas
• [ ] Imagens hospedadas (não em servidor pessoal que pode cair)
• [ ] Tamanho da mensagem <500 KB sem anexos (ideal)
• [ ] List-Unsubscribe presente (ShopIA garante)
• [ ] DKIM/SPF/DMARC validados (Configurações > Email)

Conformidade

• [ ] Endereço físico da empresa no rodapé (LGPD/CAN-SPAM)
• [ ] Link de descadastro visível
• [ ] Nome do remetente reconhecível

Modo escuro

Modo escuro do destinatário pode quebrar paleta:

• Texto preto fica preto sobre preto → invisível
• Logo branco fica branco sobre branco → invisível
• Imagem com fundo branco fica destacada de forma estranha

Mitigação

• Use cores com contraste explícito (não dependa de "fundo branco padrão")
• Logo em SVG com fill para ambos os modos
• Teste enviando para Gmail Dark Mode (configurável no Gmail)

ShopIA marca campanhas com risco de modo escuro como alerta amarelo no preview.

<!-- TODO: confirmar com Gabriel se detector de risco de modo escuro está implementado ou roadmap -->

Preview com personalização real

Para testar com dados reais de um cliente específico:

1. Otto > Newsletter > [Newsletter] > Pré-visualizar.
2. Botão Trocar cliente de exemplo.
3. Selecione cliente real da base.
4. Preview renderiza com o nome, histórico, preferências dele.

Útil para confirmar:

• Tags pessoais funcionam
• Conteúdo dinâmico (recomendação de produto) gera sentido para esse cliente

Ferramentas externas

Para testes avançados (render em 30+ clientes de email), considere:

• Litmus
• Email on Acid
• Mailtrap

Ferramentas de fora do ShopIA. Para a maioria das lojas, preview interno + envio de teste cobre.

Sandbox e preview

Sandbox Email bloqueia envios reais. Preview e envio de teste continuam funcionando — testes saem normalmente.

Útil para validar configuração em ambiente de dev sem disparar para clientes reais.

Erros comuns no preview

Veja também

• Email render em diferentes clientes
• Newsletter: enviar teste
• Newsletter: criar e enviar do zero