Visão geral
O Editor HTML permite que você envie emails totalmente personalizados e com identidade visual 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 o Encaminhamento de template de email
- Crie templates programaticamente usando a API Create Template
- Copie e cole seu HTML no Editor HTML
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. O rastreamento de múltiplos links é suportado e os cliques aparecem nos relatórios de mensagem.Links
Configure o rastreamento de links, rastreamento de múltiplos links e análise de cliques para email.
Deep linking
Direcione destinatários para telas específicas no seu app a partir de links de email.
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
- Usar uma página de cancelamento personalizada (opcional)
Inclua o seguinte placeholder em qualquer lugar do seu HTML (geralmente no rodapé):Quando clicado, este link cancela a Assinatura de email do destinatá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 o modo escuro está ativado. Isso pode causar resultados imprevisíveis — botões podem aparecer com fundo preto e texto preto, ou logotipos podem desaparecer. Defina explicitamente como seu email deve aparecer nos modos claro e escuro para evitar esses problemas.Como os clientes de email lidam com o modo escuro
| Cliente | Comportamento | Respeita prefers-color-scheme CSS? |
|---|---|---|
| Apple Mail (iOS/macOS) | Inversão total de cores | Sim |
| Gmail (apps iOS/Android) | Inversão parcial — altera fundos claros, mas não todas as cores | Não |
| Gmail (Web) | Sem renderização em modo escuro | N/A |
| Outlook (Windows) | Inversão total usando o mecanismo de renderização do Word | Não — ignora a maioria das substituições CSS |
| Outlook (Mac/iOS) | Inversão parcial | Sim |
| Yahoo Mail | Inversão parcial | Não |
| Samsung Mail | Inversão total | Não |
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 que suportam
@media (prefers-color-scheme: dark)(Apple Mail, Outlook Mac/iOS) permitem substituir estilos para o 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 a tema. Inclua as seguintes meta tags no
<head>do seu HTML para reduzir a auto-inversão:
- Evite branco puro e preto puro. Use tons de branco-gelo e cinza escuro para reduzir o impacto dos clientes com inversão total.
- Use PNGs transparentes com cuidado. Logotipos escuros em fundos transparentes ficam invisíveis em fundos escuros. Adicione um contorno claro ou use uma versão com fundo embutido.
Para um passo a passo detalhado de como adicionar CSS de modo escuro usando o Editor de Arrastar e Soltar, veja Estilização de modo escuro com arrastar e soltar.
Tamanhos de imagem recomendados para email
Proporções
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)
Tamanho do arquivo
Tamanho do arquivo
- Mantenha imagens individuais abaixo de
100–200 KB - Tamanho total do email (incluindo imagens) abaixo de
1 MB - Imagens menores significam tempos de carregamento mais rápidos e melhor entregabilidade
Formatos de arquivo
Formatos de arquivo
- JPG — melhor para fotos
- PNG — melhor para gráficos, logotipos e imagens com transparência
- GIF — para animações simples (mantenha o tamanho do arquivo pequeno)
- WebP — ainda não amplamente suportado em email; evite
Dicas gerais
Dicas gerais
- Sempre inclua texto alt para acessibilidade e para quando as imagens não carregarem
- Use CSS inline para estilização (muitos clientes removem tags
<style>) - Evite imagens de fundo (suporte inconsistente entre clientes)
- Teste entre clientes — Gmail, Outlook e Apple Mail renderizam de forma diferente
- O Outlook frequentemente ignora dimensões de imagem, portanto defina os atributos
widtheheightno HTML
Adicione texto alt às imagens
O texto alt melhora a acessibilidade e garante que as informações sejam transmitidas mesmo quando as imagens são bloqueadas ou falham ao carregar. A maioria dos principais clientes de email exibe e estiliza o texto alt:| 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 |
Use apenas HTML suportado
Clientes de email não suportam:- JavaScript
<iframe>- Formulários HTML
- Áudio ou vídeo incorporado
- Truques de posicionamento ou camadas CSS
Valide antes de enviar
Antes de enviar, verifique o seguinte:- Todos os links funcionam (links quebrados prejudicam a entregabilidade e podem acionar filtros de spam)
- O link de cancelamento de assinatura funciona corretamente
- Os emails de teste renderizam no Gmail, Outlook e Apple Mail
- A renderização no modo escuro está aceitável
- O HTML usa tags semânticas e indentação adequada para acessibilidade e manutenibilidade
Se seu email renderiza corretamente nos principais clientes e o cancelamento de assinatura funciona, está pronto para enviar.
Personalização
Use a linguagem de template Liquid para inserir conteúdo específico do assinante, como nomes, tags ou valores de fallback, diretamente no seu HTML. Exemplo:{{ first_name | default: "there" }}
Personalização de mensagem
Variáveis de personalização disponíveis e como usá-las.
Usando a sintaxe Liquid
Condicionais, filtros, loops e padrões Liquid avançados.
Perguntas frequentes
Posso reutilizar meus templates de email existentes?
Sim. Encaminhe-os ao OneSignal via Encaminhamento de template de email, envie-os com a API Create Template ou copie e cole o HTML diretamente no editor.Posso usar fontes personalizadas?
Sim, mas o suporte varia. Declare fontes personalizadas com@font-face e sempre inclua fontes de sistema como fallback. O Outlook no Windows ignora completamente as fontes web e usa os padrões do sistema.
Por que meu email parece diferente no modo escuro?
Cada cliente de email aplica o modo escuro de forma diferente — alguns invertem totalmente as cores, outros invertem parcialmente, e o Gmail web não aplica o modo escuro. Veja a tabela de comportamento dos clientes acima para detalhes. Defina estilos explícitos para os modos claro e escuro para controlar a renderização.Quais recursos HTML e CSS não são suportados em email?
JavaScript,<iframe>, formulários HTML, áudio/vídeo incorporado e posicionamento CSS não são suportados. Use CSS inline para toda a estilização — a maioria dos clientes remove blocos <style> e folhas de estilo externas.
Qual é o tamanho máximo de um email?
Mantenha o tamanho total do email (HTML + imagens) abaixo de 1 MB. Emails com mais de 102 KB de HTML são cortados pelo Gmail, que oculta o conteúdo abaixo da dobra atrás de um link “Ver mensagem completa”.Páginas relacionadas
Criar emails com arrastar e soltar
Criador visual de emails para criar emails sem escrever HTML completo.
Visão geral de email
Guia completo para enviar email com o OneSignal.
Templates de email
Salve e reutilize designs de email em campanhas.
Links de cancelamento de assinatura
Adicione links de cancelamento padrão ou personalizados para conformidade.
Personalização de mensagem
Personalize emails com tags, sintaxe Liquid e conteúdo dinâmico.
Encaminhamento de template de email
Importe templates de email HTML existentes para o OneSignal.