Dicas e Códigos Úteis para Configurar E-mails HTML na Albato

Se você envia e-mails pela Albato usando a conexão Email (SMTP e IMAP), pequenas decisões de formatação — o texto de prévia, o tamanho da fonte, o espaçamento — podem afetar como suas mensagens aparecem e são percebidas. Acertar nesses detalhes importa para as taxas de abertura e para a imagem da sua marca.

A Albato cuida disso para você. No momento em que você configura a ação Send Email (Enviar E-mail), é possível definir todo o layout HTML diretamente no construtor de automações — sem precisar de nenhuma ferramenta externa.

Este guia cobre as personalizações HTML mais comuns: prévia do e-mail, cor e tamanho da fonte, tipo de fonte e margens. Use as opções que se encaixam melhor na sua estratégia.

Para isso, usaremos a conexão do aplicativo Email (SMTP e IMAP). Se ainda não criou essa conexão, consulte o guia passo a passo.

Configurando a Ação na Sua Automação

Nesse caso, não importa qual gatilho você está usando — a ideia é configurar a ação Send Email (Enviar E-mail).

Como exemplo, imagine um cenário em que um e-mail é enviado para um lead marcado como oportunidade no RD Station.

Atenção: Você pode seguir as instruções abaixo independentemente do gatilho que utilizar. Apenas fique atento aos ajustes na ação Send Email (Enviar E-mail) que configuraremos a seguir.

Na sua automação, clique para adicionar uma nova ação:

Selecione o aplicativo Email e, em seguida, a ação Send email via SMTP (Enviar e-mail via SMTP):

Em seguida, preencha os campos obrigatórios, como remetente, destinatário e assunto. Nesses campos, você pode usar valores recebidos do gatilho ou valores fixos inseridos manualmente.

Além disso, certifique-se de ativar a opção que indica que o corpo do e-mail está em HTML.

Atenção: Para garantir o funcionamento correto, todo o conteúdo do e-mail também deve estar formatado em HTML.

Outros campos como CC, BCC e similares são opcionais.

Agora, vamos personalizar o campo Text (Texto) usando alguns códigos HTML. A seguir você encontra algumas opções — use as que melhor se encaixam na sua estratégia.

Prévia do E-mail

A prévia do e-mail é uma frase curta que aparece em alguns clientes de e-mail logo após a linha de assunto quando uma nova mensagem é recebida:

Por padrão, essa informação costuma ser a primeira linha do seu e-mail.

No entanto, se quiser personalizá-la, adicione o seguinte código antes do texto principal do seu e-mail na Albato (na primeira linha):

<span style="display:none; font-size:1px; color:#ffffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;">preview text</span>

Substitua preview text pela frase que deseja exibir como prévia do e-mail.

Na Albato, ficaria assim:

Dessa forma, a prévia do seu e-mail estará configurada corretamente.

Cor e Tamanho da Fonte

Para configurar esses detalhes, você também pode usar HTML.

Para alterar o tamanho e a cor da fonte, use o seguinte código:

<p style="font-size:15px; color:#333;">Text to be modified</p>

Copie e cole este código, modificando os valores conforme necessário.

Ajuste o tamanho da fonte (font-size), a cor (color) e o texto ao qual deseja aplicar o novo estilo.

Para a cor, você precisará usar um código padrão conhecido como RGB.

Tipo de Fonte

Para alterar a fonte do seu texto, use o seguinte código.

Assim como no exemplo anterior, modifique os valores e adicione a linha ao seu e-mail:

<p style="font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:22px;color:#333;">Text to be modified</p>

Este exemplo utiliza uma fonte geralmente recomendada para a maioria dos clientes de e-mail.

• font-family: Arial, sans-serif — universal e compatível.
• line-height: 1.5 ou 22px — melhora a legibilidade.

Esses ajustes são sugestões — você pode escolher qualquer família de fontes, alinhamento, cor ou espaçamento que preferir.

Margens e Espaçamento

Para ajustar o espaçamento, use o seguinte código:

<td style="padding:20px 30px;">Text inside the margin to be modified</td>

Modifique o padding (espaçamento interno) e os valores seguintes (espaçamento externo) conforme necessário.

Se quiser separar blocos de conteúdo, você também pode usar este código:

<div style="margin-bottom:25px;"></div>

Todos os valores são exemplos — modifique-os conforme necessário.

Revisando o E-mail Antes de Salvar Esta Etapa

Você pode continuar personalizando seu e-mail usando outros códigos ou configurações neste campo de texto.

O importante é que, após finalizar o e-mail, verifique se todas as tags e ajustes estão corretamente inseridos e seguem a sintaxe HTML adequada.

Exemplo de um e-mail configurado:

Se não tiver certeza se está tudo correto, salve a etapa, ative a automação e faça um teste real — acione-a e verifique como o e-mail aparece diretamente na sua caixa de entrada.

Se encontrar erros ou formatações indesejadas, volte e edite o código HTML no campo de texto.

Agora você pode enviar e-mails HTML bem formatados por meio das suas automações na Albato. Se tiver alguma dúvida, entre em contato com nosso suporte pelo chat.