> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Criar emails com HTML

> Envie emails totalmente personalizados e com identidade visual usando o Editor HTML do OneSignal — regras HTML suportadas, CSS inline, modo escuro, gerenciamento de cancelamento de assinatura e limitações de clientes.

## 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

<Info>
  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.
</Info>

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

1. Use o [Encaminhamento de template de email](./email-template-forwarding)
2. Crie templates programaticamente usando a [API Create Template](/reference/create-template)
3. Copie e cole seu HTML no Editor HTML

<Tip> Comece com um template comprovado em vez de escrever HTML do zero. </Tip>

### Projetar no Figma e exportar para o OneSignal

Se seus designs de email estão no Figma, há duas maneiras de importá-los para o OneSignal como HTML:

* **[Email Love](https://emaillove.com/figma-plugin)**: Um plugin do Figma que converte seu design em HTML de email pronto para produção e faz o upload diretamente para seus templates do OneSignal. Insira seu App ID e chave de API do OneSignal no painel de exportação do plugin e clique em enviar.
* **[Servidor Figma MCP](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Figma-MCP-server)**: Conecte o Figma a uma ferramenta de codificação com IA via servidor MCP. Aponte-a para o frame do seu design de email e peça que gere código HTML de email, depois cole a saída no Editor HTML.

<Warning>
  **Erros comuns que causam problemas de renderização ou entregabilidade:**

  * **Link de cancelamento de assinatura ausente** — obrigatório para emails de marketing. Sem um, os provedores de caixa de entrada têm mais probabilidade de marcar seu email como spam.
  * **Usar blocos `<style>` em vez de CSS inline** — a maioria dos clientes de email remove as tags `<style>`. Sempre use CSS inline.
  * **Sem fontes de fallback** — fontes web personalizadas só carregam em alguns clientes. Sempre declare fontes de sistema como fallback.
  * **Imagens muito grandes** — emails acima de 1 MB carregam lentamente e podem ser bloqueados. Imagens individuais devem ter menos de 200 KB.
  * **HTML não suportado** — JavaScript, `<iframe>`, formulários e mídia incorporada são removidos pelos clientes de email.
</Warning>

***

## Use o Editor HTML

Ao criar uma mensagem de email, selecione **Editor HTML** como o tipo de editor.

1. Cole ou escreva seu HTML no editor.
2. Use **Enviar Email de Teste** para visualizar a renderização entre clientes e dispositivos.
3. Corrija problemas de layout antes de agendar ou enviar.

<Frame caption="Editor HTML com entrada de código e visualização ao vivo">
  <img src="https://mintcdn.com/onesignal/tc0EvmtSSX56SX0c/images/docs/966f520-html-editor-preheader.png?fit=max&auto=format&n=tc0EvmtSSX56SX0c&q=85&s=ceece56a7c1c52b3a51badea42685768" alt="HTML editor with code input and live preview" width="1300" height="1238" data-path="images/docs/966f520-html-editor-preheader.png" />
</Frame>

### 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.

<Columns cols={2}>
  <Card title="Links" icon="link" href="./links#email">
    Configure o rastreamento de links, rastreamento de múltiplos links e análise de cliques para email.
  </Card>

  <Card title="Deep linking" icon="arrow-up-right-from-square" href="./deep-linking">
    Direcione destinatários para telas específicas no seu app a partir de links de email.
  </Card>
</Columns>

#### 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

<Tabs>
  <Tab title="Link de cancelamento padrão do OneSignal">
    Inclua o seguinte placeholder em qualquer lugar do seu HTML (geralmente no rodapé):

    ```html HTML theme={null}
    <a href="[unsubscribe_url]">Cancelar assinatura</a>
    ```

    Quando clicado, este link cancela a [Assinatura](./subscriptions) de email do destinatário no OneSignal.
  </Tab>

  <Tab title="Usar uma página de cancelamento personalizada (opcional)">
    Você pode vincular à sua própria página de cancelamento, mas deve:

    * Capturar a ação de cancelamento de assinatura
    * Atualizar o status da Assinatura de email do destinatário

    Veja [Criar uma página de cancelamento personalizada](./create-custom-unsubscribe-page) para mais detalhes.

    <Warning> Se você usar uma URL de cancelamento personalizada e não atualizar a Assinatura, os usuários continuarão recebendo emails. </Warning>
  </Tab>
</Tabs>

***

## 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](https://htmlemail.io/inline/)

### 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 `!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 a tema.** Inclua as seguintes meta tags no `<head>` do seu HTML para reduzir a auto-inversão:

```html theme={null}
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
```

* **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.

<Note>
  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](./design-emails-with-drag-and-drop#dark-mode-styling-with-drag-and-drop).
</Note>

### Tamanhos de imagem recomendados para email

<AccordionGroup>
  <Accordion title="Proporções">
    * Imagens de cabeçalho/banner: `3:1` ou `4:1` (ex: `600×200` ou `600×150`)
    * Imagens hero: `16:9` ou `2:1` (ex: `600×338` ou `600×300`)
    * Imagens quadradas: `1:1` (ex: `300×300`) — bom para grades de produtos
    * Miniaturas: `1:1` ou `4:3`
    * Largura máxima: `600–700px` é padrão (maioria dos clientes de email)
    * Design em `2x` para displays retina (ex: `1200px` de largura, exibido a `600px`)
  </Accordion>

  <Accordion title="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
  </Accordion>

  <Accordion title="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
  </Accordion>

  <Accordion title="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 `width` e `height` no HTML
  </Accordion>
</AccordionGroup>

### 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

Use links para páginas externas para conteúdo interativo ou multimídia.

### 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

<Check> Se seu email renderiza corretamente nos principais clientes e o cancelamento de assinatura funciona, está pronto para enviar. </Check>

### 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" }}`

<Columns cols={2}>
  <Card title="Personalização de mensagem" icon="user-pen" href="./message-personalization">
    Variáveis de personalização disponíveis e como usá-las.
  </Card>

  <Card title="Usando a sintaxe Liquid" icon="code" href="./using-liquid-syntax">
    Condicionais, filtros, loops e padrões Liquid avançados.
  </Card>
</Columns>

***

## Perguntas frequentes

### Posso reutilizar meus templates de email existentes?

Sim. Encaminhe-os ao OneSignal via [Encaminhamento de template de email](./email-template-forwarding), envie-os com a [API Create Template](/reference/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](#como-os-clientes-de-email-lidam-com-o-modo-escuro) 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.

### Posso adicionar um link "ver no navegador" aos meus emails?

O OneSignal não gera uma versão web hospedada do seu email. Para fornecer uma experiência de "ver no navegador", hospede o conteúdo do email no seu próprio site e adicione um link HTML padrão apontando para essa página hospedada.

### 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

<Columns cols={3}>
  <Card title="Criar emails com arrastar e soltar" icon="paintbrush" href="./design-emails-with-drag-and-drop">
    Criador visual de emails para criar emails sem escrever HTML completo.
  </Card>

  <Card title="Visão geral de email" icon="envelope" href="./email-messaging">
    Guia completo para enviar email com o OneSignal.
  </Card>

  <Card title="Templates de email" icon="copy" href="./templates">
    Salve e reutilize designs de email em campanhas.
  </Card>

  <Card title="Links de cancelamento de assinatura" icon="link-slash" href="./unsubscribe-links-email-subscriptions">
    Adicione links de cancelamento padrão ou personalizados para conformidade.
  </Card>

  <Card title="Personalização de mensagem" icon="user-pen" href="./message-personalization">
    Personalize emails com tags, sintaxe Liquid e conteúdo dinâmico.
  </Card>

  <Card title="Encaminhamento de template de email" icon="envelope-open-text" href="./email-template-forwarding">
    Importe templates de email HTML existentes para o OneSignal.
  </Card>
</Columns>