Grab your subscribers' attention in their inbox!
We know that subject lines are important for catching the eye of your subscribers, and getting your emails opened — but they're not the only factor.
Email clients will often show a snippet of the email's contents as a preview next to its subject line — here's what that looks like in Gmail, for example:
This preview text, or pre-header text, is great opportunity to catch your subscribers' attention in addition to your subject line!
Customizing your emails' preview text is optional. By default, the preview text will simply be the first part of your email's content. But if that's not particularly attention-grabbing on its own, you might want to override what gets displayed there with some teaser text or an enticing call-to-action. That's what this tutorial is for!
In this article, we'll go over how to customize your email's preview text with a single line of HTML.
How to customize the preview text with HTML
1. From your sequence or broadcast, select HTML block from the content menu
☝️ Make sure you add this block at the very top of your email's contents!
NOTE: If you're using our legacy email editor, click the < > icon in the toolbar to enter HTML mode, and just add the following code to the very top.
2. Click 'Edit' on your HTML block and paste in the following code
The following is the line of HTML that can be used to customize the preview text:
<div style="display:none;font-size:0;line-height:0;max-height:0;mso-hide:all">Pre-header Text Goes Here</div>
3. Customize your preview text
Replace "Pre-header Text Goes Here" with the actual text you want the preview to say.
4. Click 'Save'
Once you've populated your own preview text, press the red 'Save' button on your HTML block:
As you're composing the rest of your email, the HTML block you just created will disappear from view. This is expected! You can click back in the area it's located in if you want to make further edits:
The reason it appears empty is because the preview text is not going to show up in the email itself — it's only going to be shown in that preview area in inboxes that support it.
Now when your subscribers receive your email in their inbox, the preview text shown will be whatever you added in place of
Pre-header Text Goes Here in the HTML provided above!
Feel free to send yourself a preview email to see what your pre-header text looks like in action. 🙌
Alternative: add it to your email template!
If you want to have the same preview text for each email you send, you can add it to your template instead. Whenever you use that template the preview text code will already be configured, saving you from having to set it for each individual email.
Simply follow the same steps as above, but from our template editor instead.
NOTE: If you add pre-header text to both your template and the email itself, the template's preview text will show up first.