Add emoji support to any Html input

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?

          We have used an open source Github repo. Please read it’s Readme.md file. It is self-explanatory. And the respective issues pull request is here

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

         Solution!

          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)

Screen Shot 2016-04-03 at 11.54.04 AM.png

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.

Solution!

             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.

12
In-app Notification to engage users based on their actions and inactions

Screen Shot 2016-04-02 at 8.51.18 PM
Push Notification to engage users based on their actions and inactions

Thank-You!

Advertisements