Re: What is the best way to customize pre-headers for each email?

Anonymous · ‎03-07-2014

I'm looking to customize the text that displays at the very top of my emails. It is typically the 'view as a webpage' content. However, I want to be able to change it out for each email based on my subject matter. With more mobile viewers, we're aware that this text may also display just below the subject line in a mobile inbox, so I want to give it the attention it deserves!

Josh_Hill13 · ‎03-07-2014

You can remove that by clicking Edit Settings and turning off View as Webpage.

You can then use the View as Web Page token anywhere else in your email. Just look for the token link on the Community.

Anonymous · ‎03-07-2014

I wouldn't want to remove the 'view as a webpage' copy and link.. just add to it with different copy for each email

Anonymous · ‎08-12-2014

Since pre-headers are important for those reading emails on mobile devices, it seems to me that Marketo should build in an easy way to set your pre-header copy.

Kerri - did you ever figure out a way to do this?

Anonymous · ‎10-23-2014

I'm trying to figure this out as well - it would really be ideal if this was editable in Marketo and did not require a token.

Randy_Davis · ‎04-23-2015

Kerri, here's what has worked for me. You can either edit the email template html, or edit the html in an individual email... but it does use a my.token.

In the html for the template or the email, add the line in bold after <body>:

<body><div style="display:none !important; mso-hide:all;">{{my.EmailPreHeader}}</div>
.....
</body>

{{my.EmailPreHeader}} is the my.token reference; the my.token contains the text value you want displayed. If no my.token value exists, then nothing will be displayed in the pre-header.

Caveats:

Remember that tokens can be inherited, so make sure for each email program that the my.token contains whatever pre-header text is required for the email.

And, if you use multiple emails in a program, they will all inherit the same my.token value.

You can overcome this by editing the html in each email of the program and adding the code above, but replace {{my.EmailPreHeader}} with whatever text you want to use so it would look like this:

<div style="display:none !important; mso-hide:all;">Hello world! A test of the pre-header</div>

Editing the email does, however, break the link with the original template.

And you are right... Marketo should make this easy.

I hope this helps.

Anonymous · ‎07-08-2015

Any ideas on how to make the preheader text appears before "view as a web page" ?

Thank you,

Timothy.

Harish_Gupta6 · ‎07-09-2015

Hi Timothy,

I have used below approach for preheaders in my emails:

created one editable div in email template

</div>

Now open any email(who has same template) in editable mode. Check the email content section and right click on edit_preheader and select "Edit".

Now click on Html and paste it "<p style="font-size: 0;">your preheader text here</p>"

Harish Gupta

Anonymous · ‎07-09-2015

Hi Harish,

This approach is good, but when you use the "View as webpage" link on your email, it goes before the Pre-header.

The solution i found is to use that on the template level : {{system.viewAsWebpageLink}} to replace the "View as Webpage" option in the edit mode and put it directly in your template, so you can manage which sentence appears first.

<span class="preheader mktEditable" id="edit_preHeader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Will you believe this Pre-Header? Because I can't.</span>

<p>View as Webpage <a href="{{system.viewAsWebpageLink}}">here</a></p>

And add this to your CSS :

.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }

Thanks to you again,

I hope this will help someone at some point.

Timothy.