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, no scrollbar appears.
• When 9-16 emoji are configured, the menu is two rows tall, no scrollbar appears.
• When 17-24 emoji are configured, the menu is three rows tall, no scrollbar appears.
• 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.

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 emoji so their name will appear when you hover over them. To add names to emojis, you simple add a colon and a name, and separate each instance with semicolons.

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 = "🤩: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;";

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 = "🤩🤪🤭🤫🤨₿🤮🤯🧐🤬🧡🤟;🤲:Palms Up Together;🧠🧒🧑🧔🧓🧕🤱₿🧙🧚🧛🧜🧝🧞🧟🧖🧗🧘🦓🦒🦔🦕🦖🦗🥥🥦🥨🥩🇦🇺🇫🇷🎂;🛍:Black Friday;🇨🇦🇧🇷🐉🎅🇲🇽🕯🇨🇳🐰🎥🍂👨💪🎓🔥🎃🕎💕🕉🇺🇸👩🎊🏊🏳️‍🌈👑☪🌱☘☀🏈🦃💘👰;⛄:Snowman;🎿⚽🌎";

Localization

Emoji can be localized so that each language has a preferred set of emoji 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": "🤩:Star-Struck;🤪:Zany Face;🤭:Face With Hand Over Mouth;🤫:Shushing Face;"
        }
    }
}

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