How to add a hidden preview text to an email?

Preview text is an inbox element that is as important as the subject line, yet it hardly gets any attention at all.  While subject lines are a top priority for marketers, preview text can have a big impact on an email’s performance because:

1. It’s widely supported.
2. Often, twice as much preview text is displayed than subject line copy.

For example, the native iPhone email app displays 35-40 characters of a subject line and twice as many characters of preview text.

Please follow the instructions below to add a preview text to your campaign that is hidden in the body of the email but visible in the inbox's preview:

Step 1

Drag an empty row, followed by dragging an HTML block inside the empty row.

Step 2

Add the following HTML script to the HTML box. 

<div style="display: none; max-height: 0px; overflow: hidden;">
Insert hidden preheader text here
</div>

<!-- Insert &zwnj;&nbsp; after hidden preview text -->
<div style="display: none; max-height: 0px; overflow: hidden;">
&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;
&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;
&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;
</div>

Some might noticed the strange text after <!-- Insert &zwnj;&nbsp; after hidden preview text -->

Why do you need this, you ask?

The repetition of “‌&zwnj;&nbsp;&#847;” then fills any remaining preview text space. Adding &zwnj;&nbsp allows you to NOT display text you do not want displayed in the preview. It also helps you create white space after your desired preview text so that email clients don’t pull other distracting text or characters into the envelope content.

All you need to do is add a chain of zero-width non-joiners (‌&zwnj;) and non-breaking spaces (&nbsp;) after the preview text that you want displayed. 

*** Please note: While designing the campaign, the text inside the HTML will not be displayed ***

Step 3

In the HTML box, make sure to replace the text "Insert hidden preheader text here" with the actual preview message you like to include, instead. 

Step 4

progress to the Preview stage and send yourself a test email to make sure the preview text appears as you expected. 

If you can see the preview text in the inbox:

But, not inside the email, itself, then you are all set!

To learn more tips and tricks to use in Remarkety's campaign editor, contact support@remarkety.com