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 LIVECHATSDK.LIVECHAT.emojiPicker object class.

window.emoji_picker = new LIVECHATSDK.LIVECHAT.emojiPicker(
  {
    "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 on it. 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.

window.emoji_picker.on("emoji", function (event) {
  // Append Unicode Emoji to a textarea
  jQuery("#textareaChat").val( jQuery("#textareaChat").val() + event.emoji);
});