Se rendre au contenu

Un pré-header, propre, pour tous.

Ce bout de code suffit.
4 octobre 2025 par
Lefevre Thibaut

Le monde de l'emailing est en constante évolution. Cet article sera mis à jour aussi souvent que nécessaire.

 

Exemple Boite mail.

Le pré-header (ou en-tête) correspond à un résumé ou une phrase d'accroche que souhaite faire apparaitre le Marketeur, dans la boîte mail du destinataire.

Le rôle de ce pré-header est clairement de maximiser le taux d'ouverture d'une campagne emailing. 

Splio limite le pré-header à 130 caractères mais bien souvent, l'affichage maximum sur Desktop correspond à environ 80 caractères, post objet de l'email, et tout dépendra de la longueur de l'objet 🤯


Pourquoi travailler l'affichage de son pré-header.

Que le destinataire de l'email soit sur écran 13", 22" ou 32", la longueur d'affichage du préheader n'est pas la même.

On passe ainsi de "Découvrez notre nouvelle collection et profit.." à "Découvrez notre nouvelle collection et profitez d'un Mug offert dès 10€ d'achat"

La réactivité ne sera pas la même.

La reco Yellow-CRM est de viser les 10 - 15 mots pour un bon pré-header mais surtout de le tester sur différents environnements.


Comment isoler le Pré-header de l'aperçu par le client de messagerie :

À date, les principaux clients de messagerie (Gmail, Yahoo, Free, Outlook etc), affichent le début de l'email à la suite du pré-header. 

C'est pourquoi il apparait souvent "Afficher la version en ligne - Logo - Mon compte" ou autres variantes.

Le code à injecter est le suivant : 

<div style="display: none; max-height: 0px; overflow: hidden;">

  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

 ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

  ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

</div>

Pour l'injecter via le Message Builder, il suffit de déposer un contenu HTML dans le bloc le plus haut de l'email.

 (Ne pas le déposer dans un bloc additionnel tout en haut du template)

Insérer bloc html     Puis injecter le code à droite tel qu'ici :
Saisie du code HTML

Pour information ou pour rappel, le pré-header est lui à renseigner dans "Paramètres" "METADATA". 

Meta desc



Si vous souhaitez qu'il soit visible dans le corps de l'email, il faudra alors simplement le saisir en texte, tout en haut, APRÈS le code HMTL que nous venons de voir.

PS : Le code HTML communiqué est le même que vous travailliez sur le Builder Splio ou sur d'autres Builder type Dartagnan.