πŸ‘€

Add your own preview in emails

You may have wondered how you can customize the preview text of your emails:

image

A good preview should be the continuation of your subject line. It will help your open rates go up. So how does it work?

The first text is the preview

Most email clients take the first line of text from an email to display it as a preview.

However, this is not always the same text that you want to have in your visible email.

Therefore there is a trick how you can define the preview text independently from the visible content of the email.

However, this is not always the same text that you want to have in your visible email.

Therefore there is a trick how you can define the preview text independently from the visible content of the email.

It works by setting the preview text to "hidden" in the HTML source of the email.

This sounds more complicated than it is. In the following I will show you how it works.

Add email preview as hidden text

Start by selecting the first visible element of your email.

πŸ’‘
If you define the preview text as a separate element and then set it to "Hidden" in HTML, it will not be displayed in the editor anymore. Therefore we add it to the first visible element.

Often this is the link to the email preview. It can also be any other element that is at the very beginning:

image

Click on the Code View button in the editor on the right side:

image

This should look something like this:

image

Now just insert this code before the existing code:

<!-- Some preview text. -->
<div style="display: none; max-height: 0; overflow: hidden;">
This is your preview text.
</div>
<!-- Get rid of unwanted preview text. -->
<div style="display: none; max-height: 0px; overflow: hidden;">&nbsp;β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ β€Œ&nbsp;</div>

Now replace the characters "This is your preview text." with your desired text.

When you send the email, the text you just entered should be shown as a preview:

image

If you are interested - what is the second part of the preview code for?

Now you're actually done - this addendum is only there if you want to fully understand the code for the email preview.

You may have noticed the many spaces in the second part of the code for the email preview. These are also important. If you paste the above code into our editor, it should look something like this:

image

These spaces, which are invisible in the normal view of the e-mail, ensure that the visible part of the e-mail is not displayed in the preview. Technically, we "push" the visible text out of the area that an email client uses for the preview.

This way we avoid that potentially unsuitable text is displayed in the preview, as happened in this example:

image

Do you have any questions? We are happy to help you via πŸ“§ email, ☎️ phone and πŸ‘©β€πŸ’» video calls.

Click here to go back to the main help page:

Friendly AutomateFriendly Automate