Expand my Community achievements bar.

SOLVED

How to add Pre Header in email using Adobe classic Campaign

Avatar

Community Advisor
Community Advisor
9/28/23 7:01:29 AM

Hi,

 

We have a requirement to add preheader in our Emails. Could you Please let me know how to add it?

 

Below is the Sample email with and without preheader

 

 
 
 

LakshmiPravallika_3-1695909637811.png

 

Regards,

Pravallika.

 

Views

885

Replies

6
Sign in to like this content

Total Likes

Translate
Translate
1 Accepted Solution

Avatar

Correct answer by
Community Advisor
Community Advisor
9/28/23 9:23:26 AM

Hi @LakshmiPravallika 

The idea is to put text content directly in the body of our email first (just after the opening of <body>). Then, by using some style declarations via CSS, we will hide this preheader text:

 

<body style="margin: 0;" bgcolor="#ffffff">
    <!-- ====================
          <Preheader formatting>
          ===================== -->
    <div> 
        <span style="color: #ffffff; font-family: Arial, sans-serif; font-size: 0px;display: none !important;overflow: hidden;">
          Add 40-100 Characters of Preheader Text Here
            <!-- These HTML entities add 100 white space characters after the preheader.  This prevents unwanted text from elsewhere in the email from cluttering the preheader text space. -->
      &#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;&#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;&#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;&#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;&#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;
      &#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;&#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;&#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;&#847; &zwnj; &nbsp;&#847; &zwnj; &nbsp;&#847; &zwnj; &nbsp;&#847; &zwnj; &nbsp; 
    </span> 

  </div>
      

    <!-- ====================
          </ Preheader formatting>
          ===================== -->
    <table width="1" height="1" cellpadding="0" cellspacing="0" border="0">

Thanks,

David



David Kangni

View solution in original post

Views

876

Replies

1
Sign in to like this content

Total Likes

Translate
Translate
Jump to reply
6 Replies

Avatar

Correct answer by
Community Advisor
Community Advisor
9/28/23 9:23:26 AM

Hi @LakshmiPravallika 

The idea is to put text content directly in the body of our email first (just after the opening of <body>). Then, by using some style declarations via CSS, we will hide this preheader text:

 

<body style="margin: 0;" bgcolor="#ffffff">
    <!-- ====================
          <Preheader formatting>
          ===================== -->
    <div> 
        <span style="color: #ffffff; font-family: Arial, sans-serif; font-size: 0px;display: none !important;overflow: hidden;">
          Add 40-100 Characters of Preheader Text Here
            <!-- These HTML entities add 100 white space characters after the preheader.  This prevents unwanted text from elsewhere in the email from cluttering the preheader text space. -->
      &#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;&#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;&#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;&#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;&#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;
      &#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;&#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;&#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;&#847; &zwnj; &nbsp;&#847; &zwnj; &nbsp;&#847; &zwnj; &nbsp;&#847; &zwnj; &nbsp; 
    </span> 

  </div>
      

    <!-- ====================
          </ Preheader formatting>
          ===================== -->
    <table width="1" height="1" cellpadding="0" cellspacing="0" border="0">

Thanks,

David



David Kangni

Views

877

Replies

1
Sign in to like this content

Total Likes

Translate
Translate
Jump to reply

Avatar

Community Advisor
Community Advisor
9/28/23 11:38:46 PM
In response to DavidKangni

Hi @DavidKangni ,

 

The solution given worked fine

in both Outlook and gmail.

 

Regards,

Pravallika.

Views

842

Replies

0
Sign in to like this content

Total Likes

Translate
Translate

Avatar

Community Advisor
Community Advisor
9/28/23 9:48:43 AM

Hi @LakshmiPravallika ,

You can use the below script,

 

<head>
<style type="text/css">
.preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: transparent;
height: 0;
width: 0;
}
</style>
</head>

<body>
<table>
<tr>
<td>

<div><span class="preheader" style="color:transparent; display:none !important; height:0; opacity:0; visibility:hidden; width:0">

Enter your preheader here

</span></div>

</td>
</tr>

Inside Body content, This preheader script should be given in the top of all other contents.

How preheader works: This preheader text will be hidden in mail html rendering and this preheader you can be seen below subject line in your inbox as in your screenshot.

 

 
~  ParthaSarathy S

Views

874

Replies

1
Sign in to like this content

Total Likes

Translate
Translate

Avatar

Community Advisor
Community Advisor
9/28/23 11:36:55 PM
In response to ParthaSarathy

Hi @ParthaSarathy ,

 

When tried this html code, I am getting the next text along with Pre header in the email, need to check further why its coming.

 

Regards,

Pravallika.

Views

847

Replies

0
Sign in to like this content

Total Likes

Translate
Translate

Avatar

Community Advisor
Community Advisor
9/28/23 11:38:06 PM
In response to ravitejagundu

Hi @ravitejagundu ,

 

The given code was not working for me, and no text was displayed inside preheader in email. Not sure, why it wasn't coming.

 

Regards,

Pravallika.

Views

845

Replies

0
Sign in to like this content

Total Likes

Translate
Translate
Related Conversations
How to delete an operator?

Views

42

Likes

0

Replies

1
Typology rule based on Recipient Dimension + Delivery Dimension - Expert advise required - Adobe campaign v7

Views

80

Likes

0

Replies

1
JSON API Calls to Message Center in Campaign v8

Views

122

Likes

0

Replies

2
Use enumeration label instead of value in email delivery

Views

143

Likes

0

Replies

3
Need to add filters at Schema level in Schema Edit Tab in Adobe Campaign Classic

Views

138

Likes

0

Replies

1