Como incluir o texto de pré-header em seus envios de email
Além do assunto do email, o snippet de pré-header é o segundo incentivo para que os seus destinatários abram seus envios.
Para muitas plataformas, é o primeiro texto digitado no corpo do seu email e ele será disponibilizado nos dispositivos conforme imagem abaixo:
Como incluir o pré-header em meus envios?
Existem diferentes formas de incluir o pré-header em seus envios realizados pelas plataformas da Dinamize. Abaixo vamos exemplificar algumas formas:
Para incluir o pré-header utilizando o nosso editor de emails (em estilo drag and drop)
O pré-header dos envios criados pelo Editor de Emails (drag and drop) será sempre a primeira frase incluída em seu e-mail. Pode ser o texto que estiver no bloco de introdução ou se a primeira parte do seu envio for uma imagem, será mostrado o texto alternativo dela.
Bloco de introdução com texto:
Caso você não queira que o texto do pré header apareça em seu envio, você poderá alterar a cor dele para a mesma da cor de fundo, neste caso, branco.
Desta forma, ele será mostrado apenas no pré header (que mostrará o texto na cor preta, independente de ter definido outra), e no conteúdo ficará invisível.
Bloco de introdução com imagem e texto alternativo:
Exemplo de onde aparecerá o pré-header:
Pronto, agora escolhendo uma das opções acima, você conseguirá utilizar o pré-header que deseja.
Para incluir o pré-header com modelo de texto em branco ou HTML criado externamente (código-fonte)
Para que você inclua um texto no pré-header de seu envio, você deve seguir estes passos:
No código-fonte do seu HTML você deve adicionar algumas informações:
Adicione o código abaixo entre as tags <head> e </head>:
<title></title>
<style type="text/css">
.preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: transparent;
height: 0;
width: 0;
}
</style>
E logo após a abertura da tag <body>, coloque a seguinte tag:
<span class="preheader" style="display: none!important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Meu texto do Pré Header</span>
Agora, basta alterar o que está em vermelho pelo o texto que deseja que apareça como pré-header em seu envio.
Qual limite de caracteres para esse texto?
Cada dispositivo irá exibir um número específico que irá exibir, podendo variar até de acordo com a tela do dispositivo, por exemplo.
Mas o limite máximo que pode ser exibido é de no máximo 140 caracteres.
Então, o ideal é testar nos principais dispositivos acessados por seus clientes e deixar a criatividade rolar na criação desse texto!
O Pré-Header é exibido em todos dispositivos e provedores de e-mail?
Veja em quais dispositivos e provedores pode ser visto o pré-header e qual a média de caracteres que será exibido
Desktop | Será exibido o pré-header? | Média de caracteres que será exibido |
Apple Mail | ![]() | 140 |
Lotus Notes 8.5 | ![]() | N/A |
Outlook 2003 | ![]() | N/A |
Outlook 2007 | ![]() | N/A |
Outlook 2010 | ![]() | N/A |
Outlook 2013 | ![]() | 35 |
Outlook for Mac 2015 | ![]() | 55 |
Mobile | Será exibido o pré-header | Média de caracteres que será exibido |
Android Native App | ![]() | 40 |
Android Gmail App | ![]() | * |
Android Yahoo! App | ![]() | 45 |
BlackBerry | ![]() | N/A |
iOS Native App | ![]() | 90 |
iOS Gmail App | ![]() | 50 |
iOS Yahoo! App | ![]() | 50 |
Windows Phone | ![]() | 40 |
Webmail | Será exibido o pré-header? | Média de caracteres que será exibido |
AOL Mail | ![]() | 75 |
Gmail | ![]() | * |
Yahoo! | ![]() | * |
Outlook.com | ![]() | N/A |
Veja também: