You may have wondered how you can customize the preview text of your emails:
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.
Often this is the link to the email preview. It can also be any other element that is at the very beginning:
Click on the Code View button in the editor on the right side:
This should look something like this:
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;"> β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β </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:
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:
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:
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 Automate