Pular para o conteúdo principal

​
Visão geral

O Editor HTML no OneSignal permite que você crie emails altamente estilizados e com marca, com controle completo sobre layout e design para desktop e mobile. Para aproveitar ao máximo o design de email HTML, recomendamos:
  • Certifique-se de que você ou um membro da equipe tenha experiência em escrever emails HTML responsivos que renderizem bem em diferentes clientes e dispositivos.
  • Hospede todas as imagens em um local publicamente acessível, como seu site, AWS ou outras plataformas de hospedagem confiáveis.

​
Importar seus próprios templates

Já tem templates de email? Você pode adicioná-los ao seu aplicativo OneSignal com as seguintes opções:
  1. Encaminhamento de template de email
  2. API Create Template
  3. Copiar e colar seu HTML no Editor HTML

​
Usando o editor HTML

Selecione a opção HTML Editor ao configurar sua mensagem. Insira seu código HTML no painel esquerdo. Você pode usar o recurso Send Test Email para verificar como seu email renderiza em clientes mobile e desktop.

Imagem mostrando o editor HTML ao lado da visualização

O rastreamento de links está habilitado por padrão. Rastreamento de múltiplos links está disponível. Veja Links e Deep Linking para mais detalhes. Todos os emails de marketing devem conter um link de cancelamento. Sem um link de cancelamento, seus emails terão uma chance maior de serem marcados como spam. Veja Links de cancelamento para mais detalhes. O OneSignal fornece um link de cancelamento padrão que, quando usado, cancelará a Assinatura de email do usuário. Você também pode incluir sua própria URL de cancelamento personalizada, se desejar. Apenas certifique-se de gerenciar corretamente a Assinatura de email (detalhes em Criar uma página de cancelamento personalizada). Adicione o [unsubscribe_url] padrão do OneSignal em seus emails via: 
<a href="[unsubscribe_url]">Unsubscribe</a>

​
Melhores práticas

Configuração recomendada para emails HTML:

​
Use CSS inline

Muitos clientes de email removem estilos incorporados ou externos. Sempre coloque seu CSS inline para garantir renderização consistente. 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 !important com 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:
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
Teste em clientes diferentes. Gmail (iOS, Android, web), Outlook e Apple Mail todos se comportam de forma diferente. Testar ajuda a detectar problemas cedo.

​
Adicione tags alt às imagens

Texto alt melhora a acessibilidade e garante que informações sejam transmitidas mesmo se as imagens forem bloqueadas ou não carregarem.
Cliente de EmailBloqueia Imagens?Mostra Texto AltEstiliza Texto Alt
AOLSimSimSim
GmailSimSimSim
YahooSimSimSim
OutlookÀs vezesSimSim
Fonte: Litmus Email Client Support

​
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. Links quebrados reduzem a entregabilidade e podem marcar seus emails como spam. Teste todos os links minuciosamente antes de enviar.

​
Evite HTML não suportado

A maioria dos clientes de email não suporta o seguinte:
  • JavaScript ou Flash
  • Áudio ou vídeo incorporado
  • Formulários HTML
  • Iframes
  • Camadas de texto
Use hiperlinks para compartilhar conteúdo adicional com segurança.

​
FAQ

​
Como posso usar meus templates de email existentes?

Veja acima Importar seus próprios templates para detalhes.

​
Posso usar fontes personalizadas?

Sim, mas tenha em mente que nem todos os clientes de email (como Outlook) suportam fontes personalizadas. Fontes não suportadas retornarão automaticamente para fontes padrão do sistema.