Overview
Preheader text is the short snippet of copy that appears next to (or just below) your subject line in the inbox preview, before someone actually opens the email. It's the first taste recipients get of what's inside, and it works hand in hand with your subject line to earn the click.
Most email clients will automatically pull the first piece of readable text they find inside your email and use that as the preview. Without a deliberate preheader, you could end up with something awkward like View this email in your browser or If you're having trouble reading this message taking centre stage. Not exactly the impression you want to lead with.
Set one up well and you've got a second headline — prime real estate to expand on your subject, tease the value inside, or give recipients a reason to open.
Quick win
Treat your preheader as an extension of your subject line, not a repeat of it. If your subject reads Your March statement is ready, your preheader could add something like "Plus a quick reminder about your upcoming payment date" — building on the message rather than echoing it.
Why preheader text matters
A few quick reasons to give it some attention:
- It's often the second thing recipients see, right after the subject line — and well before they've decided whether to open.
- It can lift open rates by giving people more context about what's inside, especially on mobile where preview space is generous.
- Without one, you're leaving it to chance. Email clients will fall back to whatever copy comes first in your HTML, which is rarely the message you'd choose.
Add preheader text manually to your HTML
When you're working directly with HTML — say, in a custom template or one you've imported — you'll add preheader text as a hidden element near the top of the email body. The trick is that it needs to be readable by inbox clients so they pick it up for the preview, but invisible once the email is actually opened.
Here's how to do it:
- Open your Application and the associated template in either the Visual Editor or Advanced HTML editor then open the HTML view.
- Locate the opening <body> tag. Your preheader needs to sit immediately after this, before any visible content.
- Paste in the hidden preheader snippet shown below, then replace the placeholder text with your own preview copy.
- Aim for around 40 to 100 characters. Anything shorter looks thin, anything longer gets truncated by most inbox clients.
- Save your template and send a test to yourself across a few inboxes (Gmail, Outlook, Apple Mail) to confirm the preview reads the way you intended.
The snippet
Drop this in right after your opening <body> tag and swap the placeholder copy for your own:
Standard Preheader HTML
<!-- Preheader text — hidden in the email body, shown in inbox preview -->
<div style="display:none; font-size:1px; color:#ffffff; line-height:1px;
max-height:0px; max-width:0px; opacity:0; overflow:hidden;
mso-hide:all;">
Your preheader text goes here — keep it short, punchy, and useful.
</div>
The inline styles do the heavy lifting here: display:none and the zero dimensions hide the text from view, while mso-hide:all takes care of Outlook, which can be a little stubborn about respecting display rules.
Stop the trailing text trick
Sometimes email clients keep pulling additional text from the email body into the preview after your preheader runs out. To prevent this, add a string of hidden non-breaking spaces ( ) or zero-width characters (‌) after your preheader text. It pushes any unwanted follow-on copy out of the preview window. See below for example.
Extended Preheader HTML
<!-- Preheader text with trailing characters to block follow-on copy -->
<div style="display:none; font-size:1px; color:#ffffff; line-height:1px;
max-height:0px; max-width:0px; opacity:0; overflow:hidden;
mso-hide:all;">
Your preheader text goes here — keep it short, punchy, and useful.
‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌
</div>
What's next
That's it — your preheader is live, and every send from this template will use it automatically. You can update the copy any time without touching the rest of the email design, so it's easy to keep tweaking until you land on something that performs.
If you're sending the same template for different campaigns, consider tailoring the preheader for each one. Small change, big impact.
What's next
That's it — your preheader is live, and every send from this template will use it automatically. You can update the copy any time without touching the rest of the email design, so it's easy to keep tweaking until you land on something that performs.
If you're sending the same template for different campaigns, consider tailoring the preheader for each one. Small change, big impact.