Hidden Email Preheader | HTML Code Copy

Often I need to add preheaders to custom coded emails for platforms that do not offer preheader fields natively. If done incorrectly, the preheader text will show at the top of some email clients (except Outlook… 🤦‍♂️smh).

Copy and paste this code just below the opening body element:

<span style="display:none !important;
visibility:hidden;
mso-hide:all;
font-size:1px;
color:#f9f9f9;
line-height:1px;
max-height:0px;
max-width:0px;
opacity:0;
overflow:hidden;">Add email preheader text here.</span>

Note:

• the span text color needs to match the body background color

Screenshot of email preheader code in-use for reference

Take it further

Many email platforms will allow you to take this a step-further by adding a dynamic single-line text field. It is beyond the scope of this article, but if you have a question about a particular platform, leave a comment and I’ll respond.

If you found this helpful, like > follow > share > comment.

CR Rollyson is a Digital User Experience & Web Manager for a S&P 500 Fintech company and is the COO of Side Role, a marketing team in Charlotte North Carolina partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role here.