Sendgrid ~ where to set preheader when sending HTML Dynamic Template via Web Api?
Question
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
When choosing the 'Code Editor', Preheader is missing .
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..?!?',
},
}
1 answers
solution1
1 ACCPTED 2022-04-08 01:46:46
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 from responsivehtmlemail.com should achieve that for you:
<body>
<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;">
But how to set me..?!?
</div>
<!-- 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>
<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;">
{{ preheader }}
</div>
<!-- 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',
},
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.