The preheader text for campaigns and automation emails is a snippet of text that displays in a contact’s inbox after the subject line, and is the first (or part of the first) line of text in your communication. If you do not set your own custom preheader text, then subscribers will instead see either the first sentence of your communication or “View this email in your browser” (if that line of text is first in your email).
Setting your own preheader text offers you an opportunity to stand out in a contact's inbox, especially if they are accessing their email from a mobile device. This is the first thing subscribers will see aside from your From Name and Subject line and can be used to sway a contact to open your communication.
Because each device and app is different, preheader text may not always be supported (ie, Outlook) and character limits will differ. However, setting your own preheader text only takes a few moments and is worth the effort. As far as preheader content is concerned, it's best to keep it meaningful, compelling, and short (anywhere between 40-100 characters, depending on the device and app). As always, we recommend testing your emails as much as possible before sending it out to your list so you can see how the preheader will look for your subscribers.
Example of preheader text on a desktop:
Example of preheader text on a mobile device:
In order to add preheader text to your emails, you will need to use the HTML widget in the email designer, which we will walk you through below. Adding preheader text using the code provided below will only make the text appear in your subscribers' inboxes; it will not be visible in the body of the email.
Adding preheader text to your email
To add preheader text to your email, follow these steps:
- Open your campaign or automation email.
- Click the HTML widget located on the right side menu of the email designer.
- Drag the widget to the top of your email.
- Click the HTML block in your campaign to pull up the “Custom HTML” modal:
- Add the following HTML code to your HTML block, replacing “Place your desired text here” with your desired preheader text:
<div 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;"> Place your desired preheader text here </div>
- Test your email to ensure you can see your preheader text in your inbox.