One small but very interesting capability which we provide to our customer is the ability to create a campaign ( Push, in-app, email, web) with Emoji support.
Emoji though a very small feature but makes app developers and marketers connect with their users in an unique and fun way.(technically its called Visual-first strategy).
Coming to technical aspect now.
1.What have we used?
2.Few Issues which had to be tackled
- First issue is a very famous Chrome Browser issue! Some Emojis Don’t render well in the input box
We just skipped those emojis while rendering! Later, when chrome updates we can remove this particular snippet.
Note : Different browser renders emojis differently!
Here is a small snippet of code which does this…(you will find this in <repo>/lib/js/jquery.emojiarea.js in Emojimenu.prototype.load function)
2. Second issue is that while rendering emoji when you use h1 tag, b tag
or apply <“style= font-weight : bold”> to the element where
you have added class = emoji-container-picker , emoji is rendered invisible.
One fix we got is, you can wrap each emoji in with style= font-weight: normal .
Else you can separately render text in bold and emoji normally that also helps.
Thats it! Thanks for reading.
Some of the examples which some our customers use via CleverTap.