Remove the Preview Text From Emails
How to Remove the Preview Text From Emails
Background
Though we like to think of email as a form of communication that has been standardized across the entire internet, in some cases (particularly around richly formatted emails) different inbox providers render emails completely differently from one another. These difference are the MOST pronounced in Microsoft Outlook, which tends to have the most unexpected renderings of emails. These differences primarily occur because each inbox provider has their own set of standards of how they decode and render HTML emails.
One major difference across many inbox providers is how different clients manage showing the preview text for the content of the email. Gmail for example, will show the "defined" preview text from our email template editor, and then immediately after will start pulling in text from the body of the email. See below as an example:
You will notice that Gmail automatically starts pulling in text from the body of the email, after showing the defined preview text. Unfortunately, the ability to turn this sort of preview on and off is not in the hands of the email sender, but rather in the hands of the email receiver.
However, there is a workaround to achieve the intended effect!
Solution
The workaround to effectively remove the preview of the body of the email from different inbox providers is to basically add invisible characters at the top of the email that don't take up any space! This ensures that the email will look just how you intend, but also makes sure that if the inbox is trying to show a preview, it will only sho blank characters. See image below for how it appears in Gmail:
In order to achieve this effect, there are two simple steps we need to take to any email template that you're working on:
Add an HTML block to the very top of your email template
Fill the HTML block with code that specifies the invisible characters that don't take up any space
Step 1: Adding the HTML Block to the top of the Email Template
Step 2: Adding Code within the HTML Block
Make sure to replace the HTML code block COMPLETELY with the snippet below:
<div style="display: none; max-height: 0px; overflow: hidden;">
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>And You're Done!
Your Gmail and other providers will still "show" the preview of the body, but the preview of the body is now all invisible characters that do not take up space and as a result don't affect anything else in your email.
Pro Tip: If you have any questions, please don't hesitate to reach out to our live chat team and they'll be happy to assist you and get this setup for you!
Updated on: 19/10/2022
Thank you!