Emoticons

BlaB! WS Pro supports two types of emoticons - native emoji and a list of emoticons. Native emoji can be inserted in a message directly from the display keyboard of IOS and Android devices and there are emoji extensions for the desktop browsers.

A list of emoticons is displayed when users click on the yellow icon on the left of the text box. This list of emoticons can be found as a PHP array in the file emocodes.php. There are no image files, all emoticons in SVG format are base64 encoded entries in emoticons.css. A single emoticon from emocodes.php looks like this:

$emoticons[]=':code: css_selector 1';

There are three parameters separated by a blank space: [1] an emoticon code to post with, [2] a CSS selector from emoticons.css, [3] visibility - (1 or 0) which determines if the emoticon is displayed in the list of emoticons. If 0 the code would be processed and the emoticon posted in chat but neither code nor image would be visible in the list of emoticons. We call this an alias.

emocodes.php

$emoticons[]=':anguished: svg_emo_anguished 1';
$emoticons[]=':astonished: svg_emo_astonished 1';
$emoticons[]=':bandage: svg_emo_bandage 1';
$emoticons[]=':coldsweat: svg_emo_coldsweat 1';
// etc etc

emoticons.css

.svg_emo_anguished    {background-image: url("data:image/svg+xml;base64,...")}
.svg_emo_astonished   {background-image: url("data:image/svg+xml;base64,...")}
.svg_emo_bandage      {background-image: url("data:image/svg+xml;base64,...")}
.svg_emo_coldsweat    {background-image: url("data:image/svg+xml;base64,...")}
/* etc etc */

You can download 2 sets of emoticons from the product page - EmojiOne and NotoEmoji. To replace EmojiOne with NotoEmoji download NotoEmoji, unzip and replace emocodes.php & emoticons.css. Uncache with the pink button from AdminCP » Settings.

Why SVG in a single CSS file and not multiple image files? Unlike PNG, GIF & JPG SVG is a vector format and vector images look better and sharper on Hi-Res displays and a different size (see Tricks & Tips) will not blur the images. With this method all 80 emoticons are downloaded and cached on the user device with a single HTTP request which greatly reduces the load time.

Unicode emoji

As of version 21.11, you can enable a list of Unicode (native) emojis in chat instead of SVG emoticons. Unlike the emoticons, which being SVG images are included in the chat files, Unicode emoji are 4-byte characters from the Unicode table, supposed to be preinstalled and available on the operating system of the end user.

• Emoji support is widespread but not yet perfect, and emoji fonts are available preinstalled on all recently released operating system versions - Windows, MacOS, IOS, Android, Linux: browsers and operating systems that support color emoji.
• We have included the set Emoji 1.1 from 2015 omitting the country flags. 700 symbols
• Newer emoji that are not present in the list will be displayed in chat if inserted from an emoji keyboard.
• Old operating systems and browsers that do not support emoji fall back to a list of SVG emoticons (processed in chat as well). On such old systems emoji posted by other users will be displayed either as black/white pictographs or empty squares.
• The RegularExpression that enlarges the emojis in chat catches almost all 3500+ emojis, including most emoji modifiers - male, female, weather icons and skin tones. It doesn't catch some old emojis that are outside the Unicode range {Emoji_Presentation} of the JavaScript engine and also some weird modifiers.

Enable Unicode emoji
AdminCP » Settings » General: Replace the emoticons with native emoji and enlarge the native emoji in the chat area