Emoji/Emoticons feature

CLive Agent SDK supports Unicode emoticons in text messages. The library also offers a picker control highly customizable ready for use in third-party applications.

Initialize the Picker control

To use a picker control in your code first, you'll need a trigger element. This is typically a button, and is used to toggle the emoji picker.

<button id="btnEmoji">Emoji</button>

Once you've added the trigger, you will need to create a new instance of EmojiButton object class.

LIVECHATSDK.SDK.getEmojiPicker().then (
  function(emojiClass) { 
    window.emoji_picker = new emojiClass.EmojiButton(
      {
        "position": "auto",
        "showPreview": false,
        "recentsCount": 6,
        "autoHide": false,
        "showVariants": false,
        "autoFocusSearch": true,
        "emojiSize": "1.2em",
        "emojisPerRow": 6,
        "emojiVersion": "11.0",
        "categories": ["smileys", "people", "animals", "food", "activities", "travel", "objects", "symbols"],
        "zIndex": 10000,
        "showAnimation": true
      }
    );  
  }
);

After constructing a picker, it can be shown by calling showPicker or togglePicker methods. These functions expect a reference element as a parameter. The picker is positioned relative to this reference element according the “position” parameter.

You can also use a static positioning by specifying x/y coordinates in the constructor options parameters.

jQuery("#btnEmoji").off().on("click", function() {
  if ( window.emoji_picker.pickerVisible == true) {
    window.emoji_picker.hidePicker();
  } else {
    window.emoji_picker.showPicker( jQuery("#btnEmoji").get() );
  }
});

When an emoji is selected, the picker will emit an emoji event, passing an object containing data about the emoji that was selected. There also a “hidden” event to notify when the picker has been closed.

The CTLive Emoji Picker control in Enghouse AgentDesktop client application

Customize Picker Control

Relative Positioning

The picker accepts an option specifying where the picker should be positioned, relative to the reference element passed to showPicker or togglePicker. This property can be any of the following values:

auto, auto-start, auto-end, top, top-start, top-end, bottom, bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end

Fixed Positioning

A fixed position can also be given for the position option. In this case, position is an object with top, bottom, left, and/or right properties.

Comprehensive options list

Name	Type (default value)	Description

Name	Type (default value)	Description
autoHide	Boolean (true)	Whether or not the picker should be automatically hidden when an emoji is selected.
categories	String Array (all categories)	An array of the emoji categories to include in the picker. Valid values are: `smileys, people, animals, food, activities, travel, objects, symbols, flags`
emojiSize	String (“1.8em”)	The CSS size to use for the emoji icons.
emojiVersion	String (“12.1”)	The Unicode version of the Emoji specification to use. Valid values are: `1.0, 2.0, 3.0, 4.0, 5.0, 11.0, 12.0, 12.1`
initialCategory	String (“smileys”)	The ID of the category to show initially when the picker is shown.
recentsCount	Number (50)	The number of recent emojis to save.
rootElement	HTML DOM Element	The root DOM node to attach the picker element to.
rows	Number (6)	The number of visible rows in the picker.
showCategoryButtons	Boolean (true)	Whether or not to show the category buttons.
showSearch	Boolean (true)	Whether or not to show the search field.
showRecents	Boolean (true)	Whether or not to show (and save) recently selected emojis.
showVariants	Boolean (true)	Whether or not to support emoji skin tone variants.
zIndex	Number	If specified, sets the Z-index for the emoji picker element.

APIs

Method	Params	Description

Method	Params	Description
destroyPicker	-	Destroys the picker and removes it from the DOM. You will no longer be able to show the picker after it is destroyed.
hidePicker	-	Hides the picker.
isPickerVisible	-	Returns true if the picker is currently visible, false if not.
off	String event, function callback	Removes the given listener for the given event.
on	String event, function callback	Adds a listener for the given event.
showPicker	HTML DOM Reference Element	Shows the picker, positioning it relative to the given reference element.
togglePicker	HTML DOM Reference Element	If it is hidden it shows the picker, otherwise hides it if it is visible.