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 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.
position: {
top: '0',
right: '0'
}
Comprehensive options list
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: |
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: |
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 |
|---|---|---|
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. |