search

usewaypoint / email-builder-js

A free and open-source block-based email template builder.
https://emailbuilderjs.com
MIT License
521 stars 199 forks source link

Support for Preview Text? #119

Open spaquet opened 3 months ago

spaquet commented 3 months ago

Does the current version support Preview Text?

jordanisip commented 3 months ago

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

spaquet commented 3 months ago

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 2 months ago

Do you need more information about this topic?

JoaoOliveiraRocha commented 2 months ago

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

2) 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)

dariomrk commented 1 month ago

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

jordanisip commented 1 month ago

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

spaquet commented 1 month ago

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.