Gerador de Assinatura de Email

Por que HTML baseado em tabelas?

Os clientes de email interpretam HTML de maneiras diferentes. O Outlook usa o mecanismo de renderização do Word, que ignora grande parte do CSS moderno (sem flexbox, sem grid, box-shadow limitado). Layouts em tabela com estilos inline são o único padrão que todos os clientes principais renderizam de forma previsível. O gerador escreve exatamente esse estilo restrito, então a assinatura fica igual no Gmail, no Outlook desktop, no Outlook web, no Apple Mail e no iOS Mail.

O que o gerador produz

O resultado é uma tabela simples: seu nome em negrito na primeira linha, cargo e empresa em linhas próprias abaixo, e seus contatos na última linha separados por uma barra vertical:

<table cellpadding="0" cellspacing="0" style="font-family: Arial, sans-serif; font-size: 14px; color: #111827;">
  <tr><td style="font-weight: 700; font-size: 16px;">Alex Rivera</td></tr>
  <tr><td>Lead Designer</td></tr>
  <tr><td>Estúdio Aurora</td></tr>
  <tr><td style="padding-top: 8px;">alex@example.com | +34 600 000 000 | example.com</td></tr>
</table>

Campos deixados em branco são simplesmente ignorados, então uma assinatura com apenas nome e email continua compacta. No nome a ferramenta insiste: sem ele, a última etapa mostra um aviso curto no lugar da assinatura.

Cada campo é uma única linha de texto simples. Quebras de linha e caracteres invisíveis viram espaços normais, e tudo o que passa de 200 caracteres é cortado, então um endereço colado vira uma linha longa em vez de um bloco.

A última etapa oferece dois botões. Copiar assinatura coloca a assinatura formatada na área de transferência, que é o que os editores de assinatura do Gmail, do Outlook e do Apple Mail esperam. Copiar HTML coloca o código-fonte na área de transferência, útil para um arquivo de modelo ou um editor que aceite HTML puro.

O que deve ter uma assinatura

Obrigatório:

• Nome completo.
• Cargo ou função.
• Nome da empresa.
• Contato direto (email ou telefone).

Adições úteis:

• URL do LinkedIn ou link para o site pessoal.
• Telefone para funções com contato com clientes.

Evite:

• Citações inspiradoras longas.
• GIFs animados (muitos clientes removem a animação).
• Imagens grandes (deixam o email mais lento e são marcadas como “pesadas”).
• Avisos de “confidencialidade” com mais de 2-3 linhas, salvo exigência legal.
• Uma parede de ícones de redes sociais para cada rede em que você já se cadastrou.

Adicionar foto ou logo depois

O gerador produz apenas texto, e a caixa de HTML da última etapa é somente leitura. Para adicionar uma foto ou logo, copie a assinatura para o editor de assinaturas do seu cliente de email e use os controles de imagem dele, ou copie o código HTML para um editor de texto e adicione uma tag img apontando para uma imagem hospedada. A imagem precisa estar em uma URL de acesso público:

• CDN da empresa: o melhor para assinaturas comerciais; sua equipe de TI pode hospedar no domínio da marca.
• Hospedagem gratuita de imagens (imgur, plano gratuito do Cloudinary): rápido e grátis; risco de o serviço sair do ar.
• Incorporação Base64: evita a hospedagem, mas aumenta cada email em 20-50 KB e algumas configurações do Outlook a removem.

Mantenha as imagens pequenas: menos de 20 KB, quadradas, 120x120 ou menores.

Peculiaridades do Outlook

• Largura: fique abaixo de 600px; assinaturas mais largas são cortadas no painel de visualização.
• Fontes: use Arial, Helvetica, Georgia, Verdana ou uma pilha como font-family: "Segoe UI", Arial, sans-serif;.
• Cores: evite o #000 puro; #333 ou #444 renderizam melhor no Outlook em modo escuro.
• Não use variáveis CSS, flex, grid ou SVG como elementos principais.

Avisos legais

Algumas jurisdições (Companies Act 2006 do Reino Unido, requisitos da UE para certas entidades) exigem nome, número e endereço da empresa registrada em emails comerciais. Adicione você mesmo as informações exigidas, nos campos de cargo e empresa ou editando o HTML depois de copiá-lo, e verifique com sua equipe jurídica se o seu mercado as exige.