Documentation/GWC/9.0Draft/WidgetsAPI/CustomEmoji

Customizable Emoji Menu

Introduction

WebChat offers a new v2 emoji menu that lets you choose emoji 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 emoji and only closes if you click the emoji menu button again.
• v1 has 3 fixed emoji to choose from. v2 can show hundreds of customizable emoji 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 emoji. v2 menu does not have default emoji. It must be explicitly configured with a list of emoji.

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 dependent on the number of emoji configured.

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

Configuring

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

File:Important.png

You configure the emoji list by specifying a string of emoji characters like so "🤩🤪🤭🤫". WebChat will parse this string and arrange them into the emoji menu.

You can also add titles to emoji so their name will appear when you hover over them. To add a title to emojis, you simple add this extra bit to the string:

"🤩:Star-Struck;🤪:Zany Face;🤭:Face With Hand Over Mouth;🤫:Shushing Face;"

The format is 🤩:name;

When using titles, you must separate each emoji with a semicolon. You must also separate the title from the emoji character with a colon.

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

Examples:

_genesys.widgets.webchat.emoji = true; // enable emoji menu (for both v1 and v2)

// Configure emoji list with emoji titles
_genesys.widgets.webchat.emojiList = "🤩:Star-Struck;🤪:Zany Face;🤭:Face With Hand Over Mouth;🤫:Shushing Face;🤨:Face With Raised Eyebrow;₿:Bitcoin;🤮:Face Vomiting;🤯:Exploding Head;🧐:Face With Monocle;🤬:Face With Symbols on Mouth;🧡:Orange Heart;🤟:Love-You Gesture;🤲:Palms Up Together;🧠:Brain;🧒:Child;🧑:Person;🧔:Man: Beard;🧓:Older Person;🧕:Woman With Headscarf;🤱:Breast-Feeding;₿:Bitcoin;🧙:Mage;🧚:Fairy;🧛:Vampire;🧜:Merperson;🧝:Elf;🧞:Genie;🧟:Zombie;🧖:Person in Steamy Room;🧗:Person Climbing;🧘:Person in Lotus Position;🦓:Zebra;🦒:Giraffe;🦔:Hedgehog;🦕:Sauropod;🦖:T-Rex;🦗:Cricket;🥥:Coconut;🥦:Broccoli;🥨:Pretzel;🥩:Cut of Meat;🇦🇺:Australia Day;🇫🇷:Bastille Day;🎂:Birthday;🛍:Black Friday;🇨🇦:Canada Day;🇧🇷:Carnaval;🐉:Chinese New Year;🎅:Christmas;🇲🇽:Cinco de Mayo;🕯:Diwali;🇨🇳:Dragon Boat Festival;🐰:Easter;🎥:Emoji Movie;🍂:Fall / Autumn;👨:Father’s Day;💪:Festivus;🎓:Graduation;🔥:Guy Fawkes;🎃:Halloween;🕎:Hanukkah;💕:Hearts;🕉:Holi;🇺🇸:Independence Day;👩:Mother’s Day;🎊:New Year’s Eve;🏊:Olympics;🏳️‍🌈:Pride;👑:Queen’s Birthday;☪:Ramadan;🌱:Spring;☘:St Patrick’s Day;☀:Summer;🏈:Super Bowl;🦃:Thanksgiving;💘:Valentine’s Day;👰:Wedding / Marriage;⛄:Winter;🎿:Winter Olympics;⚽:World Cup;🌎:World Emoji Day;";

// Configure emoji list without emoji titles
_genesys.widgets.webchat.emojiList = "🤩🤪🤭🤫🤨₿🤮🤯🧐🤬🧡🤟🤲🧠🧒🧑🧔🧓🧕🤱₿🧙🧚🧛🧜🧝🧞🧟🧖🧗🧘🦓🦒🦔🦕🦖🦗🥥🥦🥨🥩🇦🇺🇫🇷🎂🛍🇨🇦🇧🇷🐉🎅🇲🇽🕯🇨🇳🐰🎥🍂👨💪🎓🔥🎃🕎💕🕉🇺🇸👩🎊🏊🏳️‍🌈👑☪🌱☘☀🏈🦃💘👰⛄🎿⚽🌎";

// Configure emoji list with only a few emoji titles
_genesys.widgets.webchat.emojiList = "🤩🤪🤭🤫🤨₿🤮🤯🧐🤬🧡🤟;🤲:Palms Up Together;🧠🧒🧑🧔🧓🧕🤱₿🧙🧚🧛🧜🧝🧞🧟🧖🧗🧘🦓🦒🦔🦕🦖🦗🥥🥦🥨🥩🇦🇺🇫🇷🎂;🛍:Black Friday;🇨🇦🇧🇷🐉🎅🇲🇽🕯🇨🇳🐰🎥🍂👨💪🎓🔥🎃🕎💕🕉🇺🇸👩🎊🏊🏳️‍🌈👑☪🌱☘☀;🏈:Super Bowl;🦃💘👰⛄🎿⚽🌎";

Localization

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

Note: config overrides localization

Defining emoji inside a localization file is the same as defining it in the webchat configuration. For webchat, the emoji key name is "EmojiList".

Example:

{
    "en": {
        "webchat": {
            "EmojiList": "🤩:Star-Struck;🤪:Zany Face;🤭:Face With Hand Over Mouth;🤫:Shushing Face;"
        }
    }
}

Please see the example emoji definitions in the config section for reference. Emoji lists are defined the same way in a localization file as they are defined in the WebChat configuration.