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

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

Customize Picker Control

Relative Positioning

The picker accepts a “position” 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

See the Javascript Popper library documentation for a list of valid relative position values.

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.

  position: {
    top: '0',
    right: '0'
  }

Comprehensive options list