Star rating readonly in html email

user_13760345 0
Viewed 327

I've a data coming from backend source in numeric form which will determine the rating. Numeric value ranges from 0-5 and can be 0.5,1.5,2.5 etc etc.

Number can be 2.5 and 2 and a half stars would be filled with Gold color or any accordingly.

Now I've been trying to do different things but failing constantly. I've tried using that value in data-attr and then applying styles according to the value but email doesn't cater the data-attr IMO (not working for me).Positioning also doesn't work. Background image support is buggy. So, I'm kind of stuck. If there's any workaround please it'll be a great help. I'm only looking for outlook and windows 10 mail right now.

My codepen (but not sure):

https://codepen.io/kenny-kk/pen/eYgMEej

HTML

<ul>
  <li>★</li>
  <li>★</li>
  <li class="active">★</li>
  <li>★</li>
  <li>★</li>
</ul>

Here's a guide for css support in email: https://www.campaignmonitor.com/css/

html-email email html
2 Answers

It'd be better if you use the images instead of these Unicode stars. If your data is coming from backend maybe store it in data-attr and according to the value, show the image. For this you've to keep separate images in your code (I'm afraid that's the only way). Image support is provided by all the mailing platforms.

mso-hide:all;

This will keep your images hidden, be sure to use this on div element. Use this style to unhide the image for that rating star.

[data-star="2.5"]{
mso-hide: unset;
}
user_146344210

Javascript isn't supported in email due to security concerns.

There are potential 'interactive' solutions which utilise form inputs like checkboxes & radio buttons but email client support may be sketchy and I doubt there will be support in Outlook or Windows 10 Mail.

Another solution is to use links with URLs holding the rating value i.e. http://example.com/?rating=5, in which case you'll need a process on your website to catch these values and update the user's rating accordingly.

Some resources:

Ultimately, you won't find a solution which works like website forms.

Admin1
Related