Introduction
When viewing emails in a mail client, some preview text from the body of the email is typically displayed alongside the subject. This preview text can be controlled when using the Nylas API with HTML emails.
The preview text is known as the "pre-header". It's important to note that Nylas doesn't allow setting this through the "snippet" field because it's a read-only field.
Solution
To set the pre-header, you can use the code snippets provided in the Request or Code Examples section below. These snippets show how to leverage the pre-header and how to keep the body of your email out of the preview by adding extra spacing at the end.
This solution has been personally tested and found to work with Gmail and Outlook. According to additional resources, it also works for Apple and Yahoo.
Important Notes
- The pre-header is only displayed as the preview/snippet and is not part of the body of the email.
- Usually, around 3 lines of pre-header text are displayed after the subject line.
- Users can sometimes control how much pre-header text is displayed. For example, iPhone users can set to display none, one, three, or five lines.
Request or Code Examples
// Pre-header by itself
<module name="preheader" label="Preheader">
<div style="display: none; max-height: 0px; overflow: hidden;">
<editable name="preheader">Preheader text goes here</editable>
</div>
</module>
// Pre-header with extra spacing at the end to keep the body out of the preview
<module name="preheader" label="Preheader">
<div style="display: none; max-height: 0px; overflow: hidden;">
<editable name="preheader">Preheader text goes here</editable>
‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌
</div>
</module>
// Send a message with the pre-header
curl --request POST \
--url https://api.nylas.com/send \
--header 'Authorization: Bearer xxxx' \
--header 'Content-Type: application/json' \
--data '{
"subject": "Pre-header test 1",
"to": [
{
"email": "nick.b@nylas.com"
}
],
"body": "<module name=\"preheader\" label=\"Preheader\"><div style=\"display: none; max-height: 0px; overflow: hidden;\"><editable name=\"preheader\">Preheader text goes here</editable></div></module> ..."
}'
Result
You will be able to see the pre-header text in the preview/snippet of the email in your mail client. If the pre-header is too short, part of the body may appear in the snippet, as illustrated by the "email signature" in the image above. To avoid this, ensure your pre-header text is sufficiently long or add extra invisible characters to keep the body
Updated
Comments
0 comments
Please sign in to leave a comment.