usewaypoint/email-builder-js

Support for Preview Text?

Opened this issue · 11 comments

spaquet commented

Does the current version support Preview Text?

jordanisip commented

Hi, do you mind expanding on or providing an example on what you mean by 'Preview Text'?

spaquet commented

sure.
When opening a mail client (such as Outlook, Gmail, iOS mail, ....) the subject is displayed and there is also a text right under that can be different from the first lines of the email.
It is sometimes called an email pre-header.

Here are 2 articles showing how it looks like:

and here is a more technical article about it: https://stackoverflow.com/questions/32888872/how-to-define-html-email-preheader

spaquet commented

Do you need more information about this topic?

JoaoOliveiraRocha commented

Preview text is "just" text with display: "none" before all the content.

Some email providers / builers / CRM allow you to manually set the preview text, independently from the body. I've tested quickly that feature and it renders the text in the <body> inside a <div> with "display: none; max-height: 0px; overflow: hidden; mso-hide:all;"

(more info: that preview text is followed by

<div style="display: none; max-height: 0px; overflow: hidden; mso-hide:all;">=C2=A0=E2=80=8C=C2=A0=E2=80=8C=C2=A0=E2=80=8C=C2=A0</div>

it appears to be some encoded characters (zero-width non-joiner and non-breaking space) to space out the preview text from the body's content? )

ref: https://www.litmus.com/blog/the-ultimate-guide-to-preview-text-support

EDIT:

@spaquet currently this tool doesn't appear to support preview-text.

Luckily it's not difficult to DYI, just:

  1. "export" the HTML in here:

Screenshot 2024-07-26 at 10 16 12

  1. in a text-editor and just add this below the <body>
<div style="display: none; max-height: 0px; overflow: hidden; mso-hide:all;"> 
  you preview text here
</div>

And this is what showns up in Gmail
image

(i've used the OTP example)

  • 👍3
dariomrk commented

Hi, I'd love to contribute and this seems like a good starting point (considering it's labeled with good first issue).
Would it be alright if I worked on it?

@jordanisip

  • ❤️1
jordanisip commented

@dariomrk That'd be fantastic! @JoaoOliveiraRocha's comment above would be a good starting point.

  • 👍1
  • ❤️1
spaquet commented

I might have misinterpreted the tool behavior, but you have the feature right. It's an important one when it comes to reading emails from your phone (event on computer) as this is, in addition to the subject, the eye catching part to be presented to the recipient.
Defaulting to the first line of the email is what many email clients are doing, but I think that controlling your narrative is key so having the option to specify the text and make it more attractive is an important feature to have.

WardenCommander commented

What is the situation with this? Over 2 months since @dariomrk made commit

dariomrk commented

I just updated my PR as per the last suggestion of @JoaoOliveiraRocha.
The repo maintainers have to step in now 😄.

WardenCommander commented

@dariomrk i saw you PR and it looks good, i will try it in few days.

  • 👍1
mez commented

Any ideas when this will be merged?

  • 👍1