Templates de E-mail
Bem-vindo ao guia de Templates de E-mail do CMS E-commerce! Este manual irá ajudá-lo a visualizar, editar e personalizar os templates de e-mail que são enviados automaticamente pelo sistema aos seus clientes.
Visão Geral
A tela de Templates de E-mail permite que você:
- 📋 Visualize todos os templates cadastrados no sistema
- 🔍 Filtre templates por nome, assunto e status
- 👁️ Visualize o preview dos e-mails em tempo real
- ✏️ Edite templates existentes para personalizar o conteúdo
- 📱 Teste em diferentes dispositivos (Desktop e Mobile)
- 📧 Envie e-mails de teste para validar o template
- 🎨 Personalize o HTML dos e-mails enviados aos clientes
Os templates de e-mail são fundamentais para a comunicação com seus clientes, permitindo que você personalize mensagens de confirmação de cadastro, recuperação de senha, confirmação de pedidos e muito mais.
Acessando a Tela de Templates de E-mail
A tela de templates de e-mail está localizada no menu principal do sistema. Ao acessá-la, você verá:
- Título "Todos Templates de E-mail"
- Subtítulo "Verifique as informações dos templates de e-mail cadastrados"
- Aviso importante sobre customização
- Barra de busca
- Filtro de Status
- Seletor de templates por página
- Tabela com os templates cadastrados
Aviso Importante sobre Customização
Template de Fallback: Em caso de erro no template customizado, será enviado automaticamente um e-mail padrão da Zeyko para garantir que a comunicação seja entregue.
Responsabilidade: Todas as customizações são de responsabilidade do cliente. A Zeyko não se responsabiliza por erros ou alterações no padrão.
Como Buscar e Filtrar Templates de E-mail
Busca por Nome ou Assunto
A barra de busca permite encontrar templates específicos por nome ou assunto:
Como usar:
- Digite o nome ou assunto do template no campo de busca
- Pressione Enter para realizar a busca
- Os resultados serão filtrados automaticamente
A busca funciona tanto para o nome do template quanto para o assunto do e-mail.
Filtro por Status
O sistema permite filtrar templates por status:
Status Disponíveis:
- ✅ Ativo: Template está ativo e sendo utilizado pelo sistema
- ⭕ Inativo: Template está desativado
Como filtrar:
- Clique no seletor "Status"
- Escolha entre "Ativo" ou "Inativo"
- A tabela será atualizada automaticamente
- Clique no X no badge para remover o filtro
Templates por Página
Para facilitar a navegação, você pode ajustar quantos templates são exibidos por vez:
- Localize o seletor "Templates por página"
- Escolha entre: 10, 15, 20, 25, 30 templates por página
- Use a paginação no rodapé da tabela para navegar
Entendendo a Tabela de Templates de E-mail
A tabela exibe as seguintes informações:
Colunas da Tabela
| Coluna | Descrição |
|---|---|
| Nome | Nome do template (Ex: Confirmação de Cadastro) |
| Assunto | Assunto do e-mail que será enviado ao cliente |
| Status | Status do template com badge visual (Ativo ou Inativo) |
Indicadores Visuais
- Status Ativo: Badge verde com borda verde
- Status Inativo: Badge cinza com borda cinza
- Linhas da tabela são clicáveis para acessar os detalhes do template
Visualizando Detalhes de um Template de E-mail
Para ver informações completas sobre um template:
- Clique em qualquer linha da tabela
- Você será direcionado para a tela de detalhes
Informações Disponíveis na Tela de Detalhes
1. Cabeçalho
- Nome do template em destaque
- Botão "Testar E-mail": Para enviar um e-mail de teste
- Botão "Editar Template": Para modificar o template
- Botão "Voltar": Para retornar à lista de templates
2. Card de Informações Básicas
Exibe (quando não está em modo de edição):
- Nome do Template: Nome identificador do template
- Status: Badge indicando se está ativo ou inativo
- Assunto do E-mail: Assunto que será enviado ao cliente
- Descrição: Descrição do propósito do template (se houver)
3. Preview do Template
O sistema oferece um preview completo e interativo do template:
Recursos de Visualização:
- 🖥️ Visualização Desktop: Preview do e-mail em tela grande
- 📱 Visualização Mobile: Preview do e-mail em dispositivos móveis
- 📧 Cliente de E-mail: Simula diferentes clientes (Padrão, Gmail, Outlook, Apple Mail)
- 🌓 Tema: Alterna entre modo claro e escuro
- 🔍 Zoom: Ajuste o zoom de 50% a 200%
- 🖼️ Tela Cheia: Visualize o preview em tela cheia
- 📊 Dados de Exemplo: Escolha entre dados padrão, nomes longos ou caracteres especiais
4. Variáveis Disponíveis
Lista todas as variáveis que podem ser usadas no template:
- As variáveis são exibidas no formato
{{nomeVariavel}} - Cada variável possui um card individual
- Instruções sobre o uso das variáveis
Exemplo de variáveis:
{{username}}- Nome do usuário{{email}}- E-mail do usuário{{confirmationLink}}- Link de confirmação{{resetLink}}- Link de recuperação de senha{{orderNumber}}- Número do pedido{{companyName}}- Nome da empresa{{year}}- Ano atual
5. Card de Informações de Auditoria
Código:
- 🔖 Código do Template: Identificador único do template
Criação:
- 👤 Criado por: Nome do usuário que criou o template
- 📅 Data de criação: Data e hora da criação
Última Atualização (quando aplicável):
- 👤 Atualizado por: Nome do usuário que fez a última alteração
- 📅 Data de atualização: Data e hora da última modificação
Como Editar um Template de E-mail
Passo a Passo para Editar
Passo 1: Acesse os Detalhes
- Clique no template desejado na tabela
- Na tela de detalhes, clique no botão "Editar Template"
Passo 2: Leia o Aviso de Customização
Ao entrar no modo de edição, você verá um aviso importante:
- Template de Fallback: Caso o template customizado apresente erro, será enviado automaticamente um e-mail padrão da Zeyko
- Responsabilidade: Todas as customizações são de responsabilidade do cliente
- Recomendamos testar o template antes de usar em produção
Passo 3: Edite as Informações
O modo de edição oferece dois painéis principais:
Painel 1 - Informações do Template:
- Nome do Template (obrigatório): Nome identificador
- Assunto do E-mail (obrigatório): Assunto que será enviado
- Descrição (opcional): Descreva o propósito do template
Painel 2 - Editor HTML:
O editor HTML oferece recursos avançados:
- 💻 Editor Monaco: Editor profissional com syntax highlighting
- 📝 Snippets: Componentes prontos para usar (botões, headers, footers, etc.)
- 🔍 Buscar e Substituir: Ctrl+F para buscar, Ctrl+H para substituir
- 🎨 Formatação Automática: Alt+Shift+F para formatar o código
- 📋 Copiar Código: Botão para copiar todo o HTML
- Digite o nome de um componente (ex: "button", "header", "footer") e pressione Enter
- Use Ctrl+Espaço para ver todos os snippets disponíveis
- Ctrl+F para buscar, Ctrl+H para substituir
- Alt+Shift+F para formatar o código automaticamente
Painel 3 - Preview em Tempo Real:
- O preview é atualizado automaticamente conforme você edita
- Teste em diferentes dispositivos (Desktop/Mobile)
- Simule diferentes clientes de e-mail
- Ajuste o zoom e use tela cheia
- Visualize com dados de exemplo
Passo 4: Validações e Alertas
O sistema exibe alertas importantes durante a edição:
✅ Validações de Acessibilidade:
- Imagens sem atributo
alt - Fontes menores que 11px
- Falta de títulos (h1/h2)
- Links vazios
⚠️ Variáveis Não Reconhecidas:
Se você usar uma variável que não está na lista de variáveis permitidas, o sistema irá alertá-lo:
- Badge laranja com a variável não reconhecida
- Botão "Salvar Alterações" desabilitado até corrigir
Passo 5: Salve as Alterações
- Revise todas as modificações
- Certifique-se de que não há variáveis não reconhecidas
- Clique no botão "Salvar Alterações"
- Aguarde a confirmação (você verá "Salvando...")
- O modo de edição será desativado automaticamente
Você pode clicar em "Cancelar" a qualquer momento para descartar as alterações.
Passo 6: Ocultar/Mostrar Preview
Durante a edição, você pode ocultar o preview para ter mais espaço no editor:
- Clique no botão "Ocultar Preview" (canto superior direito do editor)
- O editor ocupará toda a largura da tela
- Clique em "Mostrar Preview" para voltar ao layout dividido
Como Enviar um E-mail de Teste
Para validar seu template antes de usar em produção:
Passo a Passo para Testar
Passo 1: Acesse os Detalhes
- Clique no template desejado na tabela
- Na tela de detalhes, clique no botão "Testar E-mail"
Passo 2: Preencha os Dados do Teste
Um diálogo será aberto solicitando:
- E-mail de Destino (obrigatório): Digite o e-mail que receberá o teste
- Variáveis do Template: Preencha os valores para cada variável disponível
- Se você não preencher uma variável, ela não aparecerá no e-mail de teste
- O e-mail será enviado com o assunto: [TESTE] {Assunto Original}
- Verifique também a pasta de spam
Passo 3: Envie o E-mail de Teste
- Revise os dados preenchidos
- Clique no botão "Enviar E-mail de Teste"
- Aguarde o envio (você verá "Enviando...")
- Verifique sua caixa de entrada
Recursos Avançados do Preview
Visualização em Diferentes Dispositivos
Desktop:
- Visualização em tela completa
- Ideal para verificar layout e espaçamento
Mobile:
- Largura máxima de 375px
- Simula dispositivos móveis
- Ideal para testar responsividade
Simulação de Clientes de E-mail
O sistema permite simular como o e-mail será visualizado em diferentes clientes:
Clientes Disponíveis:
- 📧 Cliente Padrão: Visualização padrão sem customizações
- 📮 Gmail: Aplica estilos específicos do Gmail
- 📨 Outlook: Aplica estilos específicos do Outlook
- 🍎 Apple Mail: Aplica estilos específicos do Apple Mail
Temas Claro e Escuro
Teste como o e-mail aparece em modo escuro:
- Clique no botão de tema (ícone de lua/sol)
- O preview será invertido para simular modo escuro
- Verifique se cores e contrastes estão adequados
Controles de Zoom
Ajuste o zoom para visualizar detalhes:
- Zoom In (+): Aumenta o zoom até 200%
- Zoom Out (-): Diminui o zoom até 50%
- Reset: Clique no valor (ex: 100%) para resetar
- Use a roda do mouse sobre os botões de zoom para ajustes finos
Modo Tela Cheia
Para uma visualização mais imersiva:
- Clique no botão "Tela Cheia" (ícone de maximizar)
- O preview ocupará toda a tela
- Todos os controles continuam disponíveis
- Clique em "Sair da Tela Cheia" para retornar
Conjuntos de Dados de Exemplo
Teste o template com diferentes cenários:
Dados Padrão:
- Nome: Pedro Henrique
- E-mail: pedro.henrique@example.com
Nomes Longos:
- Nome: Maria Eduarda dos Santos Oliveira
- E-mail: maria.eduarda.santos.oliveira@example.com
Caracteres Especiais:
- Nome: José María Ñoño
- E-mail: jose.maria@exãmple.com
Use "Nomes Longos" para testar se o layout suporta nomes grandes sem quebrar o design.
Entendendo as Variáveis
O que são Variáveis?
Variáveis são marcadores no formato {{nomeVariavel}} que são substituídos por valores reais quando o e-mail é enviado.
Como Usar Variáveis
- Digite a variável no formato exato:
{{nomeVariavel}} - Use apenas variáveis da lista de variáveis permitidas
- As variáveis são case-sensitive (diferenciam maiúsculas de minúsculas)
Variáveis Comuns
| Variável | Descrição | Exemplo |
|---|---|---|
{{username}} | Nome do usuário | Pedro Henrique |
{{email}} | E-mail do usuário | pedro@example.com |
{{confirmationLink}} | Link de confirmação de cadastro | https://loja.com/confirmar/.. |
{{resetLink}} | Link de recuperação de senha | https://loja.com/resetar/.. |
{{orderNumber}} | Número do pedido | #12345 |
{{companyName}} | Nome da empresa | Zeyko Tech Solutions |
{{year}} | Ano atual | 2026 |
Casos de Uso Práticos
1. Personalizar Template de Confirmação de Cadastro
Situação: Você quer adicionar o logo da empresa no e-mail de confirmação.
Como fazer:
- Clique no template "Confirmação de Cadastro"
- Clique em "Editar Template"
- No editor HTML, adicione uma tag de imagem no topo
- Use a variável
{{companyName}}no alt da imagem - Visualize o preview em tempo real
- Teste com diferentes dispositivos
- Clique em "Salvar Alterações"
- Use "Testar E-mail" para validar
2. Ajustar Cores do Template para Combinar com a Marca
Situação: Você quer usar as cores da sua marca nos e-mails.
Como fazer:
- Acesse o template desejado e clique em "Editar Template"
- No editor HTML, localize as cores atuais (ex:
#3B82F6) - Substitua pelas cores da sua marca
- Use o preview em tempo real para verificar
- Teste com tema claro e escuro
- Valide em diferentes clientes de e-mail
- Salve as alterações
3. Adicionar um Botão de Chamada para Ação
Situação: Adicionar um botão "Ver Meu Pedido" no e-mail de confirmação de pedido.
Como fazer:
- Acesse o template de confirmação de pedido
- Entre no modo de edição
- No editor, digite "button" e pressione Enter
- Um snippet de botão será inserido automaticamente
- Customize o texto e o link do botão
- Ajuste as cores no CSS inline
- Visualize no preview
- Salve e teste
4. Testar Template com Nomes Longos
Situação: Garantir que o template funciona com nomes completos longos.
Como fazer:
- Acesse os detalhes do template
- No preview, selecione "Nomes Longos" no seletor de dados
- Verifique se o layout não quebra
- Ajuste o CSS se necessário
- Teste em Mobile também
- Salve as alterações se fizer ajustes
5. Validar Template em Modo Escuro
Situação: Garantir que o e-mail é legível em modo escuro.
Como fazer:
- Acesse os detalhes do template
- Clique no botão de tema (ícone de lua)
- Verifique se textos e cores continuam legíveis
- Se necessário, ajuste contraste no HTML
- Teste em diferentes clientes de e-mail
- Valide em Desktop e Mobile
Problemas Comuns e Soluções
❌ "Nenhum template de e-mail cadastrado"
Problema: A tabela está vazia.
Soluções:
- Verifique se você aplicou algum filtro de status
- Clique em "Limpar filtro" se houver algum filtro ativo
- Entre em contato com o administrador se realmente não há templates
❌ "Nenhum template de e-mail encontrado com esse filtro"
Problema: A busca ou filtro não retornou resultados.
Soluções:
- Verifique a ortografia do termo buscado
- Tente buscar apenas parte do nome ou assunto
- Remova o filtro de status se estiver ativo
- Clique em "Limpar filtro" para resetar
❌ Variáveis não reconhecidas no editor
Problema: O sistema alerta sobre variáveis não reconhecidas e o botão salvar está desabilitado.
Soluções:
- Verifique se a variável está na lista de variáveis permitidas
- Confirme que a variável está no formato correto:
{{nomeVariavel}} - Certifique-se de que não há espaços extras:
{{ variavel }}(errado) vs{{variavel}}(correto) - Verifique se não há erros de digitação
- Use apenas variáveis da lista exibida no card de "Variáveis Disponíveis"
❌ Preview não está atualizando
Problema: O preview não reflete as alterações no editor.
Soluções:
- Aguarde alguns segundos (o preview tem um pequeno delay de 300ms)
- Verifique se você está no modo de edição
- Recarregue a página e tente novamente
- Limpe o cache do navegador
❌ E-mail de teste não chegou
Problema: O e-mail de teste não foi recebido.
Soluções:
- Verifique a pasta de spam/lixo eletrônico
- Confirme se o e-mail foi digitado corretamente
- Aguarde alguns minutos (pode haver delay na entrega)
- Tente enviar para outro e-mail
- Entre em contato com o suporte se o problema persistir
❌ Layout quebrado no preview mobile
Problema: O template não está responsivo em mobile.
Soluções:
- Use media queries no CSS para ajustar o layout
- Defina
max-width: 100%para imagens - Use tabelas com
width: 100%ao invés de valores fixos - Teste com o snippet "responsive-container" do editor
- Valide o código HTML para erros de estrutura
❌ Imagens não aparecem no e-mail
Problema: As imagens do template não são exibidas.
Soluções:
- Use URLs absolutas para as imagens (ex:
https://site.com/imagem.jpg) - Não use URLs relativas (ex:
/imagens/logo.png) - Verifique se as imagens estão hospedadas e acessíveis
- Confirme se as URLs não requerem autenticação
- Teste a URL da imagem diretamente no navegador
❌ Cores diferentes em clientes de e-mail
Problema: As cores aparecem diferentes no Gmail, Outlook, etc.
Soluções:
- Use cores em hexadecimal (ex:
#3B82F6) ao invés de nomes - Defina cores com CSS inline ao invés de classes
- Teste o template em diferentes clientes usando o preview
- Evite usar transparências (rgba) que podem não funcionar em todos os clientes
- Use cores de alto contraste para garantir legibilidade
❌ Botão "Salvar Alterações" está desabilitado
Problema: Não consigo salvar as alterações.
Possíveis causas:
- Há variáveis não reconhecidas no template
- Não há alterações para salvar (o formulário não está "sujo")
- Há erros de validação nos campos obrigatórios
Soluções:
- Corrija todas as variáveis não reconhecidas
- Certifique-se de que fez alguma alteração
- Verifique se preencheu todos os campos obrigatórios (Nome e Assunto)
- Revise as mensagens de erro em vermelho
Boas Práticas
📝 HTML e CSS
- Use CSS inline ao invés de classes ou estilos externos
- Teste em múltiplos clientes de e-mail antes de usar em produção
- Use tabelas para layout ao invés de divs (melhor compatibilidade)
- Defina larguras fixas para tabelas principais (ex: 600px)
- Use URLs absolutas para todas as imagens e links
Exemplo correto:
<table
width="600"
cellpadding="0"
cellspacing="0"
style="margin: 0 auto;"
>
<tr>
<td style="padding: 20px; background-color: #ffffff;">
<img
src="https://seusite.com/logo.png"
alt="Logo"
style="max-width: 200px;"
/>
</td>
</tr>
</table>
🎨 Design
- Mantenha largura máxima de 600px para melhor visualização
- Use fontes web-safe (Arial, Helvetica, Georgia, Times New Roman)
- Defina alto contraste entre texto e fundo
- Inclua alt text em todas as imagens
- Use fontes com tamanho mínimo de 14px para legibilidade
🔤 Variáveis
- Use apenas variáveis permitidas da lista de variáveis disponíveis
- Não modifique o formato das variáveis (
{{variavel}}) - Sempre forneça um fallback caso a variável esteja vazia
- Teste com diferentes valores usando os conjuntos de dados de exemplo
📧 Conteúdo
- Seja claro e objetivo no assunto do e-mail
- Inclua um call-to-action (botão ou link) claro
- Adicione informações de contato no rodapé
- Use o nome da empresa de forma consistente
- Inclua o ano atual com a variável
{{year}}
✅ Testes
- Sempre teste antes de usar em produção usando o botão "Testar E-mail"
- Teste em diferentes dispositivos (Desktop e Mobile)
- Teste com nomes longos e caracteres especiais
- Verifique modo claro e escuro
- Valide em diferentes clientes de e-mail
- Peça feedback de colegas ou da equipe
⚠️ Segurança e Responsabilidade
- Faça backup do HTML original antes de editar
- Documente as alterações feitas nos templates
- Não inclua informações sensíveis no template
- Lembre-se: você é responsável pelas customizações
- Em caso de erro, um e-mail padrão da Zeyko será enviado
Recursos do Editor HTML
Snippets Disponíveis
O editor oferece snippets prontos para uso. Digite o nome e pressione Enter:
Estrutura:
- email-template: Template completo de e-mail
- responsive-container: Container responsivo
Componentes:
- button: Botão de call-to-action
- header: Cabeçalho com logo
- footer: Rodapé com informações
- divider: Linha divisória
Conteúdo:
- text-block: Bloco de texto
- image: Tag de imagem otimizada
- social-icons: Ícones de redes sociais
Atalhos do Editor
| Atalho | Ação |
|---|---|
| Ctrl + Espaço | Ver todos os snippets disponíveis |
| Ctrl + F | Buscar no código |
| Ctrl + H | Buscar e substituir |
| Alt + Shift + F | Formatar código automaticamente |
| Ctrl + Z | Desfazer |
| Ctrl + Y | Refazer |
Perguntas Frequentes (FAQ)
Posso criar novos templates de e-mail?
Não. O sistema oferece templates pré-configurados que podem ser customizados. Não é possível criar novos templates do zero através da interface.
O que acontece se eu salvar um template com erro?
Se o template tiver erros (HTML inválido, variáveis não reconhecidas, etc.), o sistema pode impedir o salvamento ou, se o erro passar, será enviado um e-mail padrão da Zeyko quando houver tentativa de envio.
Posso usar JavaScript nos templates?
Não. Por questões de segurança, a maioria dos clientes de e-mail bloqueia JavaScript. Use apenas HTML e CSS inline.
Como faço para restaurar o template original?
Entre em contato com o suporte técnico para restaurar o template ao padrão original da Zeyko.
As alterações afetam e-mails já enviados?
Não. As alterações só afetam e-mails enviados após salvar o template.
Posso usar GIFs animados nos templates?
Sim, mas tenha cuidado. Alguns clientes de e-mail podem não exibir a animação e mostrarão apenas o primeiro frame.
Como adiciono imagens ao template?
Use a tag <img> com URL absoluta da imagem já hospedada em algum servidor. O sistema não faz upload de imagens.
Posso adicionar anexos aos templates?
Não. Os templates são apenas para o corpo do e-mail. Anexos devem ser gerenciados pelo sistema que dispara o e-mail.
Suporte
Precisa de Ajuda?
Se você encontrou algum problema ou tem dúvidas:
- Verifique este manual para soluções comuns
- Consulte a seção de Problemas Comuns acima
- Entre em contato com o suporte técnico com as seguintes informações:
- Print da tela ou descrição do problema
- Nome do template (se aplicável)
- Mensagens de erro exibidas
- O que você estava tentando fazer
- Código HTML que está causando problema (se aplicável)
Informações Úteis ao Contatar o Suporte
Tenha em mãos:
- Seu nome de usuário
- Nome do template relacionado
- Código do template (disponível no card de auditoria)
- Prints de tela do problema
- Descrição detalhada do que você tentou fazer
- Código HTML (se o problema for de renderização)
Glossário
| Termo | Significado |
|---|---|
| Template | Modelo de e-mail pré-configurado usado pelo sistema |
| Variável | Marcador no formato {{nome}} substituído por valores reais no envio |
| Preview | Visualização prévia de como o e-mail aparecerá para o destinatário |
| Snippet | Trecho de código pronto para ser inserido no editor |
| CSS Inline | Estilos CSS aplicados diretamente nas tags HTML (ex: style="color: red;") |
| Fallback | Template padrão usado quando o template customizado apresenta erro |
| Client de E-mail | Aplicativo usado para ler e-mails (Gmail, Outlook, Apple Mail, etc.) |
| Responsivo | Design que se adapta a diferentes tamanhos de tela |
| Alt Text | Texto alternativo para imagens, usado quando a imagem não carrega |
| Call-to-Action (CTA) | Botão ou link que incentiva o usuário a realizar uma ação |
| HTML | Linguagem de marcação usada para estruturar o conteúdo do e-mail |
| Auditoria | Registro de quem criou/modificou o template e quando |
Próximos Passos
Após dominar os templates de e-mail, você pode:
- 📧 Personalizar cada template para combinar com a identidade visual da sua marca
- 🎨 Criar designs únicos usando HTML e CSS avançados
- 🧪 Testar extensivamente em diferentes cenários
- 📊 Monitorar o impacto das personalizações na comunicação com clientes
- 🔄 Iterar e melhorar continuamente os templates baseado em feedback
Bom uso da ferramenta de templates de e-mail! 🚀