Search code examples
sendgrid

Sendgrid ~ where to set preheader when sending HTML Dynamic Template via Web Api?

There are two options to build a Dynamic Template: Via the 'Design Editor' or the 'Code Editor'
When choosing the 'Design Editor' the 'DYNAMIC VERSION SETTINGS' have a field for

  • Version Name
  • Subject
  • Preheader
    enter image description here

When choosing the 'Code Editor', Preheader is missing.

enter image description here

So how to set the preheader with a self-coded Dynamic Template sending via the Web Api?

const msg = {
        to: '***',
        from: '***',
        templateId: '***',
        dynamic_template_data: {
            subject: 'Subject can be set via dynamic variable',
            preheader: 'But how to set me..?!?',
        },
    }
Solution

  • My understanding is that a preheader is the first bit of text content in the HTML <body> of the email. So while that can be placed in the design editor for you, when you have control over the code of an email, you will need to do that yourself.

    The important thing is that the preheader text is the first content, so place it right after you open the <body> tag. You also likely want to hide it, this snippet should achieve that for you:

    <body>
  <span class="preheader" 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;">
    But how to set me..?!?
  </span>
  <!-- rest of your email -->

    If you want to then set the text for the preheader dynamically in your API call, you can use handlebars.

    <body>
  <span class="preheader" 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;">
    {{ preheader }}
  </span>
  <!-- rest of your email -->

    And then send the preheader as part of your dynamic_template_data as you showed in your question:

    const msg = {
        to: '***',
        from: '***',
        templateId: '***',
        dynamic_template_data: {
            subject: 'Subject can be set via dynamic variable',
            preheader: 'Now I appear in the email',
        },
    }