IL
0
How to add the background color / highlight the Promo code in the preheader of HTML email on Gmail
Hi All,
I am working with a client who is interested in putting the promo code to be highlighted in the preheader text of email.
Please refer this screenshot => http://fuseedms.weareirissg.com/sample%20image.png.
I am not familiar with this method and was wondering if anyone can provide some insight on how to make this possible.
Are there a method recommended for this?
Thank you!
You could try creating a span style for the coloured part (the grey in your example). You can either create a CSS style in the head and use a class name or use inline styling. The example I have added uses both methods, it's really up to you.
<html>
<head>
<style type="text/css">
.redbackground {
background-color: red;
padding: 2px 4px 2px 4px;
color: #ffffff;
}
</style>
</head>
<body>
<p>this is a <span class="redbackground">span class with background colour</span> calling the class name from the style in the head</p>
<p>this is an <span style="background-color:red; padding:2px 4px 2px 4px; color:#ffffff">inline span style with background colour</span> using inline styling</p>
</body>
</html>
Hi Gary, Thanks for your kind help. I want to show the highlighted text in pre-header of Gmail to make user eyes catching. This is the example of how it should look http://fuseedms.weareirissg.com/sample%20image.png. I have tried the ways you advised, but it doesn't work. Thank you so much.
I used the unicode text converter like below code.
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: Arial, sans-serif;">Code <span class="y2" style="background-color: #b2b2b2; color: #474747;">🅴🅼🅻🆂🆄🅼🅼🅴🆁🆃🅸🅼🅴</span>
</div>
It is not showing exactly what the client wanted like http://fuseedms.weareirissg.com/sample%20image.png.
Because it has white spacing in each text "EMLSUMMERTIME".
http://fuseedms.weareirissg.com/sg/a-series-always-on/consideration-display/images/desktop-view.PNG
http://fuseedms.weareirissg.com/sg/a-series-always-on/consideration-display/images/mobile-view.png
I tried putting image in the span but Gmail and Outlook removed the image and it only extract text to show as pre-header text in subject line.
Thanks
Yes, I'm sorry, but I think I misinterpreted your initial question. It does seems that there are limitations, and as you say, possibly using unicode is the only way to go. The only other thing that you see in pre-headers is emojis. I hope that someone may be able to answer your question for you. Maybe take a look at emailgeeks on Slack. There is a community there that may have come across this before.