Why use a Preheader?
The email preheader, also called a Snippet or Preview in some inboxes, is important real estate for your marketing program. Think of the preheader as your email subject line's sidekick that, like any good sidekick, provides additional support.
Preheaders increase open and click engagement
Deepen personalization based on a user's actions
Provide additional details about the message content
Creating a Compelling Preheader
There are many different types of preheaders, but the most important factor is ensuring they fit with your subject line. Below are a few common techniques for crafting a preheader.
Build anticipation for the message content
Deepen the mystery about an offer
Provide more specific context on why a message is important
Create a sense of urgency
How Preheaders are Displayed
The inbox a contact is using, the operating system of the device, and a contact's individual settings all contribute to the way a preheader is displayed for a specific email.
As a result of the variables above, each combination will have it's own maximum number of characters that will display in the inbox. An additional area of variance is if the inbox maximum value includes both the subject line and preheader, or if each has it's own maximum value. For example, Gmail's desktop inbox has a set number of characters that will display, which includes both the subject line and preheader. Therefore, an email with a long subject line will only have a short space to display a preheader, but an email with a short subject line will display a longer preheader.
The Evolution of Preheaeders
As the online marketing space continues to evolve, so has the way inbox providers display emails. With the introduction of Apple Intelligence as part of iOS18 or OS15, Apple replaced preheaders with AI-based email summaries. Gmail, and likely other inboxes, are expected to roll out similar capabilities.
At this time, Apple Intelligence is only available on select devices, but elements like live text and alternative text in email will become even more important when used to create an AI summary.
Adding Preheaders in Listrak
There are two options for adding a preheader in the platform. Consider the key facts below when selecting the method that is best for your brand.
Add a preheader on the message authoring page.
Quickly and easily add text and emojis.
Additional characters may be included from the email body.
Preheader may be cut off if a long subject line used.
Add a preheader in the message body
Use a custom HTML element to hide the content when viewing the message body
Include additional characters in the code for more granular control of the appearance.
HTML element increases the overall message size, which may cause the email to be 'clipped' in some inboxes.
Implement a Custom Preheader
If you choose to implement preheader method #2, insert the following code into the HTML.
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">Enter preheader here.</div> <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;"> ‌͏  ‌͏  ‌͏  </div>
Add additional zero-width non-joiners and non-breaking spaces before the closing div tag as necessary. These will create 'blank' characters that will appear in the preheader, instead of showing the characters from the beginning of the message body.
‌͏ 
HTML Email
Insert the hidden div after the opening body tag of the email.
Composer Email
Drag a one column structure to the top of the email body.
Drag a custom HTML element into the structure.
Insert the div tag into the HTML block.
Add additional zero-width non-joiners and non-breaking spaces, as needed.