Skip to main content

How to reference a subject line or preheader in your EDS

Preheaders​

What is an email preheader?​

An email preheader is a short summary of the email content that follows the subject line when an email is viewed in the inbox. It is often used to provide additional context to the subject line and entice the recipient to open the email.

Where does the preheader come from?​

The preheader gets set automatically by email clients by taking the first few lines of text in the email. If you don't set a preheader, the email client will automatically set one for you.

Why is setting a preheader important?​

The preheader is an opportunity to provide additional context to the subject line and entice the recipient to open the email. If you don't set a preheader, the email client will automatically set one for you based on the first few lines of text in the email. This can result in a preheader that doesn't provide any additional context or enticement to open the email.

How to set a preheader in HTML​

The best practice is to make your preheader the first thing in your email after the opening <body> tag. Generally you don't want that text to actually appear in the email, so you can hide it using CSS but it will still be picked up by email clients as the preheader to display.

Example:

<div style="font-size:0px;line-height:1px;mso-line-height-rule:exactly;display:none;max-width:0px;max-height:0px;opacity:0;overflow:hidden;mso-hide:all;">
  <!-- Your preheader text goes here -->
</div>

How to set a preheader in EmailShepherd​

In the EmailShepherd editor, email builders set the preheader in the email settings tab.

If the ESP connector you use supports preheaders, EmailShepherd sets this on export. Your ESP connector will typically inject this into the HTML for you before sending the email.

What if my ESP connector doesn't support preheaders?​

Many ESP connectors do not support preheaders, they just send the email HTML as it is. The good news is you can still set a preheader from within EmailShepherd directly by making use of the Render Context object.

In your EDS HTML, you can reference the preheader like this:

<html>
  <body>
    <!-- always make the preheader the first piece of content within the body tag -->
    <div style="font-size:0px;line-height:1px;mso-line-height-rule:exactly;display:none;max-width:0px;max-height:0px;opacity:0;overflow:hidden;mso-hide:all;">
      {{render_context.email.content.preheader}}
    </div>

  ...

Subject line​

The subject line can be referenced in a similar way as the preheader:

<html>
  <head>
    <title>{{render_context.email.content.subject}}</title>
  </head>