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

Anonymous
Not applicable

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

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! 
Tags (1)
8 REPLIES 8
Josh_Hill13
Level 10 - Champion Alumni

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

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
Not applicable

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

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
Not applicable

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

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
Not applicable

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

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
Level 3

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

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
Not applicable

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

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

Thank you,

Timothy.

Harish_Gupta6
Level 8

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

Hi Timothy,

I have used below approach for preheaders in my emails:

created one editable div in email template

<div class="mktEditable" id="edit_preheader">

</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
Not applicable

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

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.