What is a preheader and why is it so important? This is a question we hear a lot in Customer Support!
First, let’s take a step back and look at the subject line. It’s the headline of your email in the inbox, stating the intent or essence of your campaign. A great subject line sparks interest, summarizes your content, and—most importantly—keeps you out of the spam folder.
But what if you could add even more "punch" before the reader even opens the email?
This is where the preheader comes in. It’s that extra line of text that displays in the inbox right after the subject line. Think of it as the "Subtitle" to your "Main Title." Without a custom preheader, email clients might pull in random text like "View in Browser" or a messy URL. You want to maximize this real estate to create value or a sense of urgency.
How to Add Your Preheader
We’ve made it easier than ever to add this directly in the editor:
Open Email Settings: In your email draft, click the Email settings button or click anywhere on the Email Header at the top of the screen.
Type Your Text: You’ll see a dedicated field for Preheader right below the Subject Line.
Use AI Assist: Feeling a bit stuck? Click the AI assist link (or the lightbulb icon) next to the field. It can generate effective, recommended preheaders to help you beat writer's block!
Best Practices for 2026
Watch the Length: While you can use up to 250 characters, we recommend staying under 90 characters. Focus your most important message in the first 5–8 words to ensure it isn't cut off on mobile devices.
Don't Repeat Yourself: Your preheader shouldn't just be a second subject line. Use it to provide more detail or a "Call to Action" (CTA).
Personalize It: You can now use personalization tags like
[[FirstName]]in your preheader to grab attention immediately.
Working with Custom Code?
If you're building your own HTML email, you can still play along! To ensure your preheader shows up in the inbox but stays hidden in the body of the email, add this code immediately after your <body> tag:
HTML
<div id="preheader" style="display: none; font-size: 1px; color: transparent; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
Your Catchy Preheader Text Here
</div>
Remember, the subject line and preheader work in tandem. Together, they are your golden opportunity to engage your contacts before they even click "Open"!
Editor's Note: This article has been updated to reflect the latest Constant Contact features.
