Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for Preview Text? #119

Open
spaquet opened this issue Jul 2, 2024 · 11 comments
Open

Support for Preview Text? #119

spaquet opened this issue Jul 2, 2024 · 11 comments
Labels
good first issue Good for newcomers

Comments

@spaquet
Copy link

spaquet commented Jul 2, 2024

Does the current version support Preview Text?
@jordanisip
Copy link
Contributor

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

@spaquet
Copy link
Author

spaquet commented Jul 3, 2024

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
Copy link
Author

spaquet commented Jul 17, 2024

Do you need more information about this topic?

@JoaoOliveiraRocha
Copy link

JoaoOliveiraRocha commented Jul 26, 2024 •
edited
Loading

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)

@jordanisip jordanisip added the good first issue Good for newcomers label Aug 10, 2024
@dariomrk
Copy link

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
Copy link
Contributor

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

@spaquet
Copy link
Author

spaquet commented Aug 15, 2024

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.

dariomrk added a commit to dariomrk/email-builder-js that referenced this issue Aug 16, 2024
@dariomrk
feat: add email preview text
934177a 
- closes usewaypoint#119
@WardenCommander
Copy link

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

@dariomrk
Copy link

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

@WardenCommander
Copy link

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

@dariomrk dariomrk mentioned this issue Oct 30, 2024
Open
@mez
Copy link

mez commented Dec 3, 2024

Any ideas when this will be merged?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@jordanisip @mez @spaquet @dariomrk @JoaoOliveiraRocha @WardenCommander