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.
- 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