Vindi recorrência

Melhores práticas de HTML

A personalização de e-mails é uma ótima prática para engajar seus clientes e garantir que as mensagens da sua Régua de Cobrança sejam bem recebidas. Para isso, você pode utilizar HTML na customização de e-mails, criando layouts atraentes e funcionais. 

É importante ter conhecimento de que para evitar a inserção de conteúdos maliciosos, bloqueamos parcialmente conteúdos e códigos que poderiam gerar vulnerabilidades. Por exemplo, não permitimos a inserção de emojis na edição da notificação, pois isso pode desconfigurar o layout do e-mail. Também não permitimos estilizações fora do uso do atributo style inline, devido a limitações de ferramentas de e-mail padrão como Gmail e Outlook. Confira mais detalhes sobre os atributos e protocolos permitidos neste artigo.

Dito isso, separamos algumas práticas para garantir que você customize e acrescente personalidade em seus e-mails de forma correta, confira:

 

  1. Parágrafo
<p>Este é um parágrafo.</p>
  1. Negrito
<b>Este texto está em negrito.</b>
  1. Itálico
<i>Este texto está em itálico.</i>
  1. Link
<a href="https://www.exemplo.com">Clique aqui para visitar nosso site</a>
  1. Imagem
<img src="https://www.exemplo.com/imagem.jpg"  width="600" height="300">

Insira o link da imagem em ‘src’ e altere sua largura (‘width’) e altura (‘height’) modificando o número em pixels. Gifs também funcionam e podem trazer mais dinamismo para sua comunicação. Importante reforçar que a imagem deve estar em um link público e acessível, caso contrário ela não será visualizada.

 

Dica: se quiser deixar uma imagem clicável,  basta envolvê-la em uma tag de ‘a’  (link). Exemplo:

<a href="https://www.seusite.com">

  <img src="https://www.exemplo.com/imagem.jpg" width="600" height="300" style="border: none;">

</a>
  1. Estilos
<p style="color: #333; font-size: 32px;">Este é um parágrafo estilizado,na cor 333 e fonte no tamanho de 32px.</p>
<p style="background-color: #f0f0f0;">Este parágrafo tem um fundo colorido. Todo o texto que você inserir aqui irá ficar exatamente da cor do background-color.</p>
  • Altere o fundo de  cor inserindo o código hexadecimal em ‘background-color’;
  • Altere a cor do texto inserindo o código o código hexadecimal em ‘color’;
  • Altere o tamanho do texto inserindo o tamanho em pixels em ‘font-size’;
  • Altere a distância entre o conteúdo do texto e suas bordas inserindo o tamanho em pixels em ‘padding’.

Lembre-se de sempre separar cada atributo com ponto e vírgula (;).

Previsão das modificações.

  1. Botão
<a style="display: inline-block; background-color: #001A9E; color: #fff; font-style: Semibold; font-weight: bold; line-height: 130%; text-decoration: none; padding: 16px; border-radius: 3px;" href="{{bill.url}}">

    <b>Texto dentro botão</b>

  </a>
  • Altere a cor de fundo do botão inserindo o código hexadecimal em ‘background-color’.
  • Altere a cor do texto do botão em ‘color’.
  • Altere o arredondamento da borda do botão alterando os pixels em ‘border-radius’.
  • Altere o link de destino do botão em ‘href’.

Previsão das modificações.

  1. Tabela
<table border="1" cellpadding="10" cellspacing="0" style="width: 100%; border-collapse: collapse;">

  <tr>

    <th style="background-color: #007BFF; color: #fff;">Coluna 1</th>

    <th style="background-color: #007BFF; color: #fff;">Coluna 2</th>

  </tr>

  <tr>

    <td>Celula 1</td>

    <td>Celula 2</td>

  </tr>

</table>
  • Cada ‘<tr>’ representa uma linha.
  • ‘<th>’estiliza o cabeçalho da tabela.
  • ‘<td>’ define o conteúdo das células abaixo do cabeçalho.
  • Altere o fundo do cabeçalho  inserindo o seu código hexadecimal em ‘background-color’ e a cor do texto em ‘color’.

 

Previsão das modificações.

Lembre-se que você pode sempre aproveitar e estilizar cada elemento adicionando o style! 

Usando esses elementos, você pode criar e-mails visualmente atraentes e informativos que funcionam bem em diversos modelos de e-mail.