# Email Preview / Preheader Text

**URL:** <https://forum.mautic.org/t/email-preview-preheader-text/7717>\
**Category:** Development\
**Created:** [February 28, 2017, 12:45pm UTC](https://forum.mautic.org/t/email-preview-preheader-text/7717 "2017-02-28T12:45:40Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [April 5, 2022, 2:33pm UTC](https://forum.mautic.org/t/email-preview-preheader-text/7717/22 "2022-04-05T14:33:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![msmith01](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/msmith01/32/600_2.png) [@msmith01](https://forum.mautic.org/u/msmith01)\
**Post date:** [April 5, 2022, 5:56pm UTC](https://forum.mautic.org/t/email-preview-preheader-text/7717/23 "2022-04-05T17:56:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zwf](https://avatars.discourse-cdn.com/v4/letter/z/f475e1/32.png) [@zwf](https://forum.mautic.org/u/zwf)\
**Post date:** [April 6, 2022, 7:16am UTC](https://forum.mautic.org/t/email-preview-preheader-text/7717/24 "2022-04-06T07:16:27Z")

</div>

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

 ![2022-04-06_09h14_29](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/3/3f1bbc15d57396c2da6841517338f507b41ec241.png)

I put the code I saw on [Documentation for MJML - The Responsive Email Framework](https://documentation.mjml.io/#mj-preview) and I also watched the video from Robm.

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [April 6, 2022, 12:57pm UTC](https://forum.mautic.org/t/email-preview-preheader-text/7717/25 "2022-04-06T12:57:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![zwf](https://avatars.discourse-cdn.com/v4/letter/z/f475e1/32.png) [@zwf](https://forum.mautic.org/u/zwf)\
**Post date:** [April 6, 2022, 2:06pm UTC](https://forum.mautic.org/t/email-preview-preheader-text/7717/26 "2022-04-06T14:06:42Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/e/ea19d410c5679d82a6d006da5213291b4754d7d5.png)
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).

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [April 6, 2022, 3:03pm UTC](https://forum.mautic.org/t/email-preview-preheader-text/7717/27 "2022-04-06T15:03:20Z")

</div>

1. Yes
2. Don’t add div to an mjml content since div is not valid mjml.

---

<div class="post-metadata">

**Author:** ![zwf](https://avatars.discourse-cdn.com/v4/letter/z/f475e1/32.png) [@zwf](https://forum.mautic.org/u/zwf)\
**Post date:** [April 6, 2022, 3:29pm UTC](https://forum.mautic.org/t/email-preview-preheader-text/7717/28 "2022-04-06T15:29:41Z")

</div>

Ok, noted.

Thank you !

---

<div class="post-metadata">

**Author:** ![robm](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/robm/32/260_2.png) [@robm](https://forum.mautic.org/u/robm)\
**Post date:** [September 27, 2022, 5:48am UTC](https://forum.mautic.org/t/email-preview-preheader-text/7717/29 "2022-09-27T05:48:59Z")

</div>

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?

```auto
<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>

```

[Previous page](https://forum.mautic.org/t/email-preview-preheader-text/7717.md?page=1)