Customizable Emoji Menu

Introduction

WebChat offers a new v2 emoji menu that lets you choose emojis you want to offer.

Differences between v1 and v2

• v1 shows as a tooltip-style overlay; v2 shows as a new block between the transcript and the message input.
• v1 closes when you select an emoji or click outside the menu; v2 lets you choose multiple emojis and only closes if you click the emoji menu button again.
• v1 has three fixed emojis to choose from; v2 can show hundreds of customizable emojis in a grid layout.
• v1 menu appears in mobile mode; v2 menu is not available in mobile mode (when v2 is configured, no emoji menu button is present in mobile mode).
• v1 menu has default emojis; v2 menu does not have default emojis. It must be explicitly configured with a list of emojis.

Usage

Clicking the Emoji menu icon at the bottom-left corner of the WebChat UI will open the v2 emoji menu. The transcript will be resized to fit the emoji menu, which can vary in height depending on the number of emojis configured.

• When 1-8 emojis are configured, the menu is one row tall, and no scrollbar appears.
• When 9-16 emojis are configured, the menu is two rows tall, and no scrollbar appears.
• When 17-24 emojis are configured, the menu is three rows tall, and no scrollbar appears.
• When 25 or more emojis are configured, the menu is three rows tall and a scrollbar appears.

Configuration

The v2 emoji menu can be configured by passing a string containing emoji into the WebChat configuration or through localization.

Important

Note: If you define an emoji list in the WebChat configuration, it will override any emoji lists defined in localization files.

You configure the emoji list by specifying a string of emoji characters, like "😀😑😕😗". WebChat will parse this string and arrange them into the emoji menu.

// Configure a flat list of emoji characters
_genesys.widgets.webchat.emojiList = "😀😑😕😗😙😛😟😦😧😬😮😯😴";

Emoji Display Names

You can also add names to emojis so their name will appear when you hover over them. To add names to emojis, you simply add a colon and a name, and separate each instance with a semicolon.

The format is ;😀:name;

You can only add one name to an emoji. Each emoji:name pair must be separated by a semicolon at each end to separate it from the others. A colon must be used to link the title to the emoji.

// Configure an emoji list with emoji names
_genesys.widgets.webchat.emojiList = "😀:grinning;😑:expressionles;😕:confuse;😗:kissing;😙:kissing_smiling_eyes;😛:stuck_out_tongue;😟:worried;😦:frowning;😧:anguished;😬:grimacing;😮:open_mouth;😯:hushed;😴:sleeping;";

Partially Named Lists

You don't have to add names for every emoji. You can add titles to only a select few.

// Configure an emoji list with only a few emoji names
_genesys.widgets.webchat.emojiList = "😀😑;😕:confuse;😗😙;😛:stuck_out_tongue;😟😦😧😬😮;😯:hushed;😴:sleeping;";

Localization

Emojis can be localized so that each language has a preferred set of emojis and emoji titles.

Important

Note: If you define an emoji list in the WebChat configuration, it will override any emoji lists defined in localization files.

The key name for defining an emoji list is "EmojiList".

Example:

{
    "en": {
        "webchat": {
            "EmojiList": "😀:grinning;😑:expressionles;😕:confuse;😗:kissing;😙:kissing_smiling_eyes;😛:stuck_out_tongue;😟:worried;😦:frowning;😧:anguished;😬:grimacing;😮:open_mouth;😯:hushed;😴:sleeping;"
        }
    }
}

Emoji lists are defined in a localization file using the same syntax as the WebChat configuration.