Email Preview / Preheader Text

Development
22

Hi, it should work.
Did you add it to the head?

23

Is there a way to build a widget to set this? Is this on any roadmap?

1 Like
24

I thought it would work as well. Basically I did is this :

2022-04-06_09h14_29
2022-04-06_09h14_291216×344 38.7 KB

I put the code I saw on Documentation for MJML - The Responsive Email Framework and I also watched the video from Robm.

25
  1. You need to move out the preview outside of my-style. (Switch line 8 and 9)
  2. What are the 2 divs on the top?
26
  1. It works now but it is disturbing to have this white line displaying of the top of the email, it looks like it’s a bug. I feel it would be more intuitive under the object in the editing so it would be clear and not needing some code.
    2022-04-06_16h00_23
  2. the div was related to a content in the email, unfortunately I lost it, will have to redo the content (not sure if this is suppose to delete content like in the body).
27
  1. Yes
  2. Don’t add div to an mjml content since div is not valid mjml.
1 Like
28

Ok, noted.

Thank you !

29

Not really working for me.

I see the preview text but the 1st lime of the email appears aswell right after the preview text.

How to stop the email body from showing along with the preview text?

<mjml>
  <mj-head>
	<mj-preview>Preview Text goes here
	</mj-preview>
  </mj-head>
  <mj-body background-color="#ffffff" font-size="13px">
	<mj-section background-color="#ffffff" padding-bottom="0px" padding-top="0">
	  <mj-column width="100%">
	  </mj-column>
	</mj-section>
	<mj-section background-color="#009FE3" vertical-align="top" padding-bottom="0px" padding-top="0">
	  <mj-column width="100%">
		<mj-text color="#ffffff" font-size="24px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-bottom="30px" padding-top="50px" line-height="49px" height="auto">
		  <p>Welcome to the our App {ownerfield=firstname}
		  </p>
		</mj-text>
	  </mj-column>
	</mj-section>
1 Like