Emoji reactions

Users can react to messages with emojis:

You can enable or disable emoji reactions for different user roles. In the Chat UI section of the TalkJS dashboard, select the role you want to edit in the dropdown at the top. In the Built-in message actions section, choose to either disable emoji reactions, enable them for the user's own messages, or enable them for all messages:

Custom emojis

You can add custom emoji images to your chat UI with the customEmojis option. You can use custom emojis in your messages, or as reactions to messages:

Note: If you have edited your UserMessage theme component before 9th September 2024, you will have to update it for custom emoji reactions to display correctly. See our upgrade guide for how to do this.

Every emoji name must start and end with a colon. The following example adds three custom emoji, with the names :lol:, :roomba-cat: and :alert::


1await Talk.ready;
2
3const me = new Talk.User({
4  id: 'emoji_user_alice',
5  name: 'Alice',
6  role: 'default',
7});
8const session = new Talk.Session({ appId: '<APP_ID>', me });
9
10const conversation = session.getOrCreateConversation('emoji_conversation');
11conversation.setParticipant(me);
12
13const chatbox = session.createChatbox({
14  customEmojis: {
15    ':lol:': { url: 'https://example.com/images/emoji-lol.svg' },
16    ':roomba-cat:': { url: 'https://example.com/images/roomba-cat.gif' },
17    ':alert:': { url: 'https://example.com/images/alert.gif', hidden: true },
18  },
19});
20chatbox.select(conversation);

For each emoji, you must specify a url. This must be a fully-qualified URL of an image file, such as an SVG, GIF or PNG. The image must be square (same width and height). TalkJS will scale this image down to the size of an emoji.

You can also specify a hidden option. Hidden emojis can't be sent in new messages, or used in new emoji reactions, but they still display properly in existing messages and reactions. This lets you safely remove previously used custom emoji from the chat UI.

Make sure you always specify a consistent, backward-compatible set of custom emojis. If an existing message contains a custom emoji that is not specified in customEmojis, then the emoji cannot be displayed and the textual name will be displayed instead (including colons).