Preview Text Hacks!

If you are sending emails to your visitors, you definitely want them to read it and be attracted to what you have to offer. Previously I wrote about how to grab attention using an attractive email headertoday this will be a short tip on an often overlook part of the email display.


Noticed that after the email header, there’s some grey text? That’s the Johnson box or email preview text. It’s another free space for you to attract your visitor to open the email.

The requirement is simply that your email is sent in HTML format instead of text.

If you do not set the preview text and you are already using HTML format, what usually happens is that the first one to two lines of text in your email body will become the text to be displayed which you can see happening in the above picture for MGP.

What you should be doing is the example by Groupon above, a quick summary of how you will be able to help your readers.

Just add this line into your email after the <body> tag and you’ll be done.

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

Or if you would like the text to only display on the preview text but not in the email itself you can add the line below instead.

<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>

As usual hope this helps and you can always find me on Facebook if you need more help.

%d bloggers like this: