HipChat KAOMOJI (ノಠ益ಠ)ノ彡┻━┻

May 17, 2016

Kaomoji (顔文字) are text and ASCII based emoticons popularized in Japan. I've always loved the fact that the default Japanese keyboard on iOS had a kaomoji keyboard. I thought that it would be awesome for HipChat to have as well so I decided to build this add-on while learning React.js.

To my surprise, it was insanely popular both internally at Atlassian but also externally to customers when I released it to the Atlassian Marketplace. It has a total of 1300 installations (as of March 2017).

What does it do?

KAOMOJI Demo

The KAOMOJI Connect add-on add a Kaomoji picker to the HipChat sidebar where users can select from a few thousand different faces. Once they select one they like, it will be appended to their current message and the focus will also be set to the chat input field (so that they can just press enter or continue typing).

It also saves marriages...

Saved Fraser's marriage

How does it work?

KAOMOJI Sequence Diagram

The add-on is completely static, meaning that it is just HTML, CSS and JavaScript. It was written in React.js and built with Webpack.

It took me hours to find and sort the kaomojis. 😗

Links