Visão geral
O Editor HTML permite que você envie emails completamente personalizados e com marca usando seu próprio HTML. Você deve usar o Editor HTML quando:- Precisa de controle completo sobre layout, espaçamento e estilo
- Já tem templates de email HTML prontos para produção
- Está confortável trabalhando dentro das limitações dos clientes de email
Emails HTML não são iguais a páginas web. Muitos recursos HTML e CSS não são suportados ou são renderizados inconsistentemente entre clientes de email.
Pré-requisitos
Antes de usar o Editor HTML, certifique-se de:- Ter experiência construindo emails HTML responsivos
- Hospedar todas as imagens em URLs publicamente acessíveis (seu site, CDN, S3, etc.)
Resultado esperado
Após a configuração, seu email irá:- Renderizar consistentemente entre os principais clientes (Gmail, Outlook, Apple Mail)
- Rastrear cliques de links corretamente
- Incluir um mecanismo de cancelamento de assinatura funcional
- Passar por verificações de spam e entregabilidade
Importar seus próprios templates
Se você já tem templates de email HTML, pode adicioná-los ao OneSignal de qualquer uma das seguintes maneiras:- Use Encaminhamento de template de email
- Crie templates programaticamente usando a API Create Template
- Copie e cole seu HTML no Editor HTML
Recomendamos começar com um template comprovado em vez de escrever HTML do zero.
Use o Editor HTML
Ao criar uma mensagem de email, selecione Editor HTML como o tipo de editor.- Cole ou escreva seu HTML no editor.
- Use Enviar Email de Teste para visualizar a renderização entre clientes e dispositivos.
- Corrija problemas de layout antes de agendar ou enviar.
Links e rastreamento
O rastreamento de links está habilitado por padrão para emails HTML.- Rastreamento de múltiplos links é suportado
- Cliques aparecem nos relatórios de mensagem
Links de cancelamento de assinatura
Todos os emails de marketing devem incluir um link de cancelamento de assinatura. Emails sem uma opção válida de cancelamento de assinatura têm mais probabilidade de:- Serem marcados como spam
- Prejudicar a reputação do remetente
- Serem bloqueados por provedores de caixa de entrada
- Link de cancelamento padrão do OneSignal
- Use uma página de cancelamento personalizada (opcional)
Inclua o seguinte placeholder em qualquer lugar do seu HTML (geralmente no rodapé):Quando clicado, este link cancelará a Assinatura de email do usuário no OneSignal.
HTML
Melhores práticas para email HTML
Sempre use CSS inline
A maioria dos clientes de email remove blocos<style> e folhas de estilo externas.
Experimente esta ferramenta: Responsive Email CSS Inliner
Estilização de modo escuro
Muitos clientes de email aplicam inversão automática de cores quando um usuário tem o modo escuro habilitado. Esse comportamento pode causar resultados imprevisíveis, como botões aparecendo com fundo preto e texto preto. Para garantir renderização consistente, recomendamos definir explicitamente como seu email deve aparecer nos modos claro e escuro. Melhores práticas:- Defina estilos base inline. Sempre defina cores de fundo e texto diretamente nos elementos em vez de depender de padrões ou transparência.
- Use media queries para modo escuro. Clientes como Apple Mail e Outlook no iOS suportam
@media (prefers-color-scheme: dark)onde você pode substituir estilos para modo escuro. - Aplique
!importantcom moderação. Adicionar!importantàs substituições de modo escuro ajuda a evitar que as caixas de entrada empilhem regras de inversão sobre seus estilos personalizados. - Sinalize suporte de tema. Inclua as seguintes meta tags no head do seu HTML para reduzir auto-inversão:
Teste em clientes diferentes. Gmail (iOS, Android, web), Outlook e Apple Mail todos se comportam de forma diferente. Testar ajuda a detectar problemas cedo.
Tamanhos de imagem recomendados para email
Proporções:- Imagens de cabeçalho/banner:
3:1ou4:1(ex:600×200ou600×150) - Imagens hero:
16:9ou2:1(ex:600×338ou600×300) - Imagens quadradas:
1:1(ex:300×300) — bom para grades de produtos - Miniaturas:
1:1ou4:3 - Largura máxima:
600–700pxé padrão (maioria dos clientes de email) - Design em
2xpara displays retina (ex:1200pxde largura, exibido a600px)
- Mantenha imagens individuais abaixo de
100–200KB - Tamanho total do email (incluindo imagens) abaixo de
1MB - Menor = tempos de carregamento mais rápidos e melhor entregabilidade
- JPG: Melhor para fotos
- PNG: Melhor para gráficos, logos, transparência
- GIF: Para animações simples (mantenha o tamanho pequeno)
- WebP: Ainda não amplamente suportado em email — evite
- Sempre inclua texto alt para acessibilidade e quando as imagens não carregarem
- Use CSS inline para estilo (muitos clientes removem tags
<style>) - Evite imagens de fundo (suporte inconsistente)
- Teste entre clientes (Gmail, Outlook, Apple Mail todos renderizam diferente)
- Outlook frequentemente ignora dimensões de imagem, então defina atributos width e height no HTML
Adicione tags alt às imagens
Texto alt melhora a acessibilidade e garante que informações sejam transmitidas mesmo se as imagens forem bloqueadas ou falharem ao carregar.| Cliente de Email | Bloqueia Imagens? | Mostra Texto Alt | Estiliza Texto Alt |
|---|---|---|---|
| AOL | Sim | Sim | Sim |
| Gmail | Sim | Sim | Sim |
| Yahoo | Sim | Sim | Sim |
| Outlook | Às vezes | Sim | Sim |
Nomeie e formate seu HTML
Use HTML semântico e nomenclatura de tag significativa para acessibilidade. Isso ajuda leitores de tela a interpretar seu conteúdo com mais precisão. Além disso, use formatos de cor padrão e indentação adequada para manutenibilidade.Verifique links quebrados
Links quebrados reduzem a entregabilidade e podem marcar seus emails como spam. Teste todos os links minuciosamente antes de enviar.Use apenas HTML suportado
Clientes de email não suportam:- JavaScript
<iframe>- Formulários HTML
- Áudio ou vídeo incorporado
- Flash
- Truques de posicionamento ou camadas CSS
Valide antes de enviar
Antes de enviar, valide seu email:- Testando todos os links
- Verificando comportamento de cancelamento de assinatura
- Enviando emails de teste para Gmail, Outlook e Apple Mail
- Verificando renderização do modo escuro
Se seu email renderiza corretamente nos principais clientes e o cancelamento funciona, está pronto para enviar.