What the Email Preheader Preview Builder does
This email preheader preview builder shows how your sender name, subject line and preheader appear together in a phone inbox and a desktop webmail row, checks the preheader for common mistakes, and writes the hidden preheader HTML - with invisible padding - that you paste at the top of your email body.
The preheader (also called preview text) is the short line an inbox shows after the subject. If you do not set one, the inbox takes the first text it finds in the email, which is often "View this email in your browser" or the alt text of a logo. Everything on this page runs in your browser; nothing you type is sent anywhere.
How to use it
- Enter the sender name and subject line you plan to use, so the preview shows the whole inbox line.
- Write the preheader: a sentence that adds to the subject - a detail, a benefit or a deadline - rather than repeating it.
- Check the phone and desktop previews and the findings. Move the most useful words to the start if the phone preview cuts them off.
- Keep the default padding unless you have a reason to change it. It fills the rest of the preview line with invisible characters so the start of your email body does not leak in after the preheader.
- Copy the HTML and paste it straight after the opening body tag of your email template, before any other content.
Reading the results
Red findings should be fixed: "View in browser" boilerplate used as a preheader, or a broken personalisation tag such as {{first_name} that would be shown literally.
Amber findings are weaker choices: no preheader at all, a preheader that repeats the subject, or one so short that the inbox fills the gap with body text.
The previews are approximations. Inboxes cut text by pixel width, and each app, device and font size differs; the widths can be adjusted under Preview widths.
Worked example: a sale newsletter
Sender "Northwind", subject "Autumn sale: 20% off jackets and boots" and preheader "Plus free returns on every order until Sunday night - your favourites are back in stock."
The preheader is 88 characters: 51 for "Plus free returns on every order until Sunday night", 3 for the spaced dash and 34 for "your favourites are back in stock." It adds free returns and a deadline that the subject does not mention, so there is no duplication warning.
With the default padding of 90 repeats of ‌ (12 characters of source each), the padding div holds 1,080 characters of HTML source but shows nothing. At the default 290 px phone width the whole preheader fits on two lines; on the 560 px desktop row only its start fits after the subject, which is why the most useful words (free returns) come first.
Switching to the second example, "View this email in your browser", is flagged as boilerplate: that line tells the reader nothing about why they should open the message.
Why the preheader HTML is hidden, and why it is padded
The preheader text sits in a div at the very top of the body so that inboxes read it first, but it is hidden with display:none, zero maximum height and width, zero opacity and mso-hide:all so that it never appears in the opened email. These are all properties on Gmail's documented list of supported CSS, and mso-hide is what classic Outlook for Windows respects.
Inboxes show as much text as fits. If your preheader is shorter than the space, many of them continue with the next text in the email. The second hidden div repeats a zero-width non-joiner and a non-breaking space, which occupy the rest of the preview space with characters that look blank. The alternative filler adds a combining grapheme joiner, a variant some email developers prefer; neither is a formal standard.
Limitations: what the result does not prove
- It cannot show exactly what a given inbox app will display: truncation varies with the app, device, screen width, font size and user settings, and some apps do not show a preheader at all.
- The preview uses sample values for personalisation tags; it cannot see what your email platform will fill in for each contact.
- It does not check the rest of your email HTML. Use the HTML email compatibility checker for that.
- Padding characters are a widely used convention, not a documented feature of any inbox, and an inbox could change how it treats them.
Privacy: where your data goes
Everything you paste, type or drop is processed in this browser tab. It is not uploaded, logged, stored or sent to analytics. Session recording and tag-manager scripts are switched off on this page.
Standards and sources
- Google Developers - CSS support in Gmail
- Can I email - CSS and HTML support across email clients
- US Federal Trade Commission - CAN-SPAM Act: a compliance guide for business
Frequently asked questions
What is the difference between a preheader and preview text?
They are the same thing seen from two sides. Preview text is what the inbox shows after the subject; the preheader is the text you place at the top of the email so that the inbox uses it. Some email platforms have a preview-text field that writes the same hidden HTML for you.
How long should a preheader be?
Write the important part in the first 40 or so characters, because that is often all a phone shows beside a long subject, and keep the whole thing under about 130 characters. The builder warns below 20 characters, notes anything over 150, and refuses more than 250.
Why does text from my email body appear after the preheader?
Inboxes fill the preview line with as much text as fits. If the preheader is short, the next text in the email follows it. The hidden padding in the generated HTML fills that space with invisible characters, so the preview ends where your preheader ends.
Where exactly do I paste the preheader HTML?
Immediately after the opening body tag, before your logo, navigation or any "view in browser" link. If anything with text comes first, some inboxes will show that instead. In a drag-and-drop editor, use a custom HTML block at the very top, or your platform's own preview-text field.
Will the hidden preheader show when someone opens the email?
It should not. The div is hidden with display:none plus zero size, zero opacity and the Outlook-specific mso-hide:all, which together cover the clients that ignore one of those rules. Always send a test to the clients your audience uses before a campaign goes out.
Does a preheader affect spam filtering?
Not in any documented way. Filters look at authentication, sender reputation and engagement. A preheader that misleads about the content can count against you with readers, and in the US the CAN-SPAM Act's rules on deceptive content still apply to what you say.
Last reviewed by the A2Z.Tools team against the sources listed above.
