Convince&Convert reports that 35% of email recipients open emails solely based on the subject line. Almost as important as that first glance at a subject line is the teaser snippit of copy that is displayed in the inbox after a subject line. This is the preheader of an email, and it can be an integral part of grabbing a recipient's interest to open the email. 


Preview text, as seen in Gmail


The preheader, or preview text, of an email is pulled from the first few lines of text within the email. For example, if the first line of text in your email is has an administrative purpose, such as the "view in browser" text, consider adding a line. You can insert a new line (hit enter and it will push that line down) and then on the new line above write a short 75-100 character sum up (depending on space available) that complements the subject line and further entices the viewer. Once you have it in there, highlight the text and then change the color so that it matches the light grey background, giving it an invisible ghost-like effect. 


This "ghost text" option works in both the Classic Editor and the Drag and Drop Editor. However, having text in your email that is the same color as the background will raise your spam score. One way around this besides adding a hidden preview text in the code (see below) is to purposely add a fun line of text before the "View in Browser" link in an email. Below is a fun example from an ROI email that shows the preheader text and doesn't increase the spam score of the email: 




You could also choose to specifically define which text will be displayed in the inbox using a few simple lines of code. This is referred to as hidden preview text. This allows you to customize what text will appear in the inbox without adding it directly into the design elements of your email. Below is the standard hidden preview text code to add to an email's HTML. 


<body> 

   <div> This is how you define which text you’d like displayed for the preview text

   </div> 

</body>


It's important to note that the coding for a hidden preview text doesn't always work seamlessly across all email providers. The work-around for this is to add additional code to instruct the text specifically to not display (matching the background color, being very small). Below is the code for this version of hidden preview text. 


<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;"> Insert preview text here. </div>


Testing is very important when working with preview text, as no two inboxes will look the same due to placement and character count. Testing across email providers is recommended, as well as staying within the preview text character limits for prominent email providers. Below is a chart of average number of characters displayed in an email provider, as well as if they support a preheader or not. 




**Please remember that code can be inserted into the Classic Email Editor and HTML Code Editor. However, it is not recommended to change the HTML of the Drag and Drop Editor. If you wish to add a preheader to an email in the Drag and Drop, you can add an additional content block of the desired text to the top of the email, and change the color of the text so it is not visible.**