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>:

<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