Re: Email Preview Pane

Anonymous · ‎02-24-2015

Hello,

How can I control what is shown in the email preview pane when a person goes through their email? I am looking to control what is shown for mobile devices.

Thanks,
David

Justin_Cooperm2 · ‎02-24-2015

Make the first thing that appears in the Email Template under the <body> a “mktEditable” section. Add whatever other content or “mktEditable” sections you want beneath that first section (it’s irrelevant what else is in the template). Then, when you create an individual Email Asset from this template, double-click the first region in the email. Click the “HTML” button in the TinyMCE rich-text editor. Add a pre-header at the very beginning of the code like this:

<div style="display: none !important;">This is the pre-header. It should be ~100 characters long for best results as different clients will show different amounts of the pre-header…</div>

<div>This is the actual start of the email content here!</div>

When you click “Update” you’ll only see “This is the actual start of the email content here!” in TinyMCE, but the pre-header will be applied.

View solution in original post

Anonymous · ‎10-01-2015

I have noticed that if you use a display none, you will actually remove the preview text in several different email clients.

I find that if you use a color:transparent!important; color:#backgroundcolor; that you will render invisible(because it's blended) and you don't loose preview text in any of the other email clients.

Justin_Cooperm2 · ‎02-24-2016

Which clients? I want to look into this.

Justin_Cooperm2 · ‎02-24-2015

Make the first thing that appears in the Email Template under the <body> a “mktEditable” section. Add whatever other content or “mktEditable” sections you want beneath that first section (it’s irrelevant what else is in the template). Then, when you create an individual Email Asset from this template, double-click the first region in the email. Click the “HTML” button in the TinyMCE rich-text editor. Add a pre-header at the very beginning of the code like this:

<div style="display: none !important;">This is the pre-header. It should be ~100 characters long for best results as different clients will show different amounts of the pre-header…</div>

<div>This is the actual start of the email content here!</div>

When you click “Update” you’ll only see “This is the actual start of the email content here!” in TinyMCE, but the pre-header will be applied.

Anonymous · ‎02-24-2016

Hello. This is my first time using these boards and I'm still new to HTML and email marketing. I followed Justin's recommendation. While testing, it worked perfectly for G-mail and mobile devices. However, the pre-header was being rendered in Microsoft's Outlook WebApp, which looks somewhat awkward. Has anyone come across this? I didn't create our email template and had to modify it in Dreamweaver, so I didn't do exactly as Justin said but I'm perplexed why it would work in the others and not one. I'm stuck between having the preheader render awkwardly on some platforms or having the preheader defaulting to whatever comes next in the code. As suggestions or advice? I appreciate any assistance.

Justin_Cooperm2 · ‎07-08-2016

You should use our "preheader" feature in our new email editor. It should work across all clients for you.

Thanks,

Justin

Chris_Saporito · ‎07-29-2015

Hi Justin, would you care to share some screen grabs of this?

Thanks!

Chris

Justin_Cooperm2 · ‎07-29-2015

Screen grabs of the code? Or what it looks like in an email client? It's just the preview you would see on an iPhone or in Gmail inbox...

Chris_Saporito · ‎07-30-2015

A screen grab of the code would be perfect!

Justin_Cooperm2 · ‎07-30-2015

The code is pasted above. It should be the first thing that comes after the HTML <BODY> element. You can put it in the Email Template itself or insert it using the text editor if the very first thing in the <BODY> is a mktEditable <div>

Anonymous · ‎09-10-2015

How do you get around the View as webpage text when that is added to the EMAIL.

Another way of displaying this text if you are coding without the wyswig is to place a snippet at the beginning of the HTML.

come look at this cool email

</div>

Justin_Cooperm2 · ‎09-11-2015

If you click "Edit Settings" in the Email Editor you will see an option to toggle "Include View As Webpage"

Anonymous · ‎09-16-2015

I found a resolve that works across the board.

The resolve is to place the view as webpage token into place after the snippet. Here is my fully functional code snippet.

Make sure to come visit our cool event

</div>

</td>

</tr>

Anonymous · ‎09-16-2015

Ops, I forgot to mention this table row needs to be the first snippet in the email.