Email template is stripping preheader (and other code)

Since this is the only thread I could find on this topic, I figured I’d add my findings in case anyone is still having trouble implementing preheader text into an email template.  Disclaimer: I was able to get this to work, but I’m not well versed with css/html by any means.  My hunch is I got lucky and found a method that worked so I wanted to share .  To my knowledge nothing has been stripped out, but again, I’m no expert.

There are 2 lines of code to add to the email template (listed below with screenshots):

#1:

<style type="text/css">span.preheader {display: none!important;visibility:hidden;opacity:0;color:#ffffff;height:0;width:0;font-size:1px}</style>

The above should go right above the </head> tag:

#2:

<span class="preheader">PREHEADER TEXT HERE</span>

Gotchas:  When previewing this in the Email Template UI, everything displayed correctly.  However, when previewing it from the JO program, I can clearly see the preheader text displayed at the top of the email body.  It doesn’t show when you send it, but it’s odd that the program’s preview doesn’t respect the visibility:hidden or opacity:0 constraints.

Hello!

Happy to announce that your request has been considered. Email Templates are enhanced with a new UI and significant performance improvements. Changes in the feature make it more user-friendly, and also allows admins to customize the email templates to provide the best email template layout that works in various email clients.

You can find the relevant information in Release Notes.

This feature is implemented in both SFDC & NXT version.

Thanks for posting!

@puna thanks for sharing the code workaround -- can I just confirm that what I’m seeing is expected?

Here’s what I’m seeing: I’m seeing the preheader text I configured, but then it immediately goes into the first line of the email. Typically, my preview would end at the end of the preheader. Red is my coded preheader, blue is the first line of my email template. How can this be configured so I do not see the blue?

@sarahmiracle can’t confirm these options right now, but a couple you could try (from my days as an email marketer, some code snippets I had saved). First option is to just add extra spaces after your preheader so it pushes the first line of the email out of the preview line, second is to actually hardcode the preheader text (if Gainsight doesn’t strip that code still).

Option 1

To just insert spaces after the pre-header text:

Paste the following text above the !DOCTYPE HTML PUBLIC tag:

<div style="display: none; max-height: 0px; overflow: hidden;">
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp; 
</div>

Option 2

To hard-code the subject line and preheader text:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"> 
  <head>   
    <title>Insert SL     
    </title> <!--[if !mso]><!-->
  </head>
  <body>    <span class="esd-hidden-preheader" style="display:none !important;font-size:0px;line-height:0;color:#ffffff;visibility:hidden;opacity:0;height:0;width:0;mso-hide:all;">Insert preheader. </span>
    <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
      {{ preview_text|default:'' }}͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj; ͏&zwnj;
    </div>