Adding Preheader Text to your Messages

Preheader text or “preview text” is the summary text you see after your subject line in most email clients. Where possible, we would recommend adding in preheader text to your messages. Consider it as an extension to your subject line, to help engage with your recipients and therefore lead to an increase in opens.

By default, the preheader text is the first line of text found within your message’s body, but with a bit of coding, you can set this to your own custom text instead - making it either visible so it’s displayed at the top of your message body, or invisible so it will not appear in the message’s body at all. 

Here is an example of how to add invisible preheader text to your HTML:

<td style="display:none !important;           
           visibility:hidden;
           mso-hide:all;
           font-size:1px;
           color:#ffffff;
           line-height:1px;
           max-height:0px;
           max-width:0px;
           opacity:0;
           overflow:hidden;">
Oh, but look at my engaging preheader text. Magic!⭐       
</td>

Here's how it looks in Gmail:

And on mobile (Android - Gmail app):

It is important to run some tests to make sure it’s displaying as expected, but from a compatibility point of view, it should work in the most popular email clients, except older versions of Microsoft Outlook (2013+ should be good to go!) and Lotus Notes 8.5. 

It’s also a good idea to keep an eye on the length of your preheader text. Aim for between 50-100 characters, and keep in mind that some mobile devices will cut the text much shorter. The Android/Gmail app example above is displaying 42 characters.

Tip: Like the subject line, the preheader text will likely need to be updated in your HTML each time you send a Broadcast message, so add it to your pre-sending checklist. ✅