Starter Deal! First 3 month from only  $9.9 /month!
Starter Deal! First 3 month from only  $9.9 /month!
Grab It Now 
Chat
  • Web
    • TUIKit
      • Overview
      • Installaton
        • TUIKit
          • Vue
          • React
        • TUIChat Only
          • Vue
      • Features
        • Reactions
        • Read Receipt
        • Typing Status
        • User Online Status
      • Themes
        • Setting UI Styles
          • Web
          • Mobile
      • Customization
        • Customize Messages
      • Localization
    • SDK
      • Install Chat SDK
      • Initialize Chat SDK
      • Login and Logout
      • Client APIs
      • Message
        • Overview
        • Send a Message
        • Receive a Message
        • Historical Message
        • Forward Messages
        • Modify a Message
        • Delete Messages
        • Clear History Message
        • Recall a Message
        • Send an Online Message
        • Message Read Receipt
        • Query Messages
        • Targeted Group Message
        • Do not Notify
        • Key-Value Extensions
        • Translation
      • Conversation
        • Overview
        • Conversation List
        • Get Conversations
        • Unread Count
        • Pin Conversations
        • Delete Conversations
        • Mark
        • Conversation Group
      • Group
        • Overview
        • Group Management
        • Group Profile
        • Group Member Management
        • Group Member Profile
        • Custom Group Attribute
        • Group Counter
      • Community Topic
        • Community Management
      • User Profile and Relationship Chain
        • User Profile
        • User Status
        • Friend Management
        • Friend List
        • Block List
  • Android
    • Run Demo
    • UIKit
      • Overview
      • Getting Started
      • Installation
        • TUIKit
        • TUIChat Only
      • Features
        • Reactions
        • Read Receipt
        • User Online Status
        • Search Messages
      • Customization
        • Customize Messages
        • Customize Emojis and Stickers
      • Localization
    • SDK
      • Install Chat SDK
      • Initialize Chat SDK
      • Login and Logout
      • Message
        • Overview
        • Send a Message
        • Receive a Message
        • Retrieve Messages
        • Forward Messages
        • Modify a Message
        • Insert a Message
        • Delete Messages
        • Clear History Messages
        • Recall a Message
        • Send an Online Message
        • Message Read Receipt
        • Query Messages
        • Metions
        • Targeted Group Message
        • Do not Notify
        • Key-Value Extensions
        • Reactions
        • Translation
        • Pin Messages
      • Conversation
        • Overview
        • Conversation List
        • Get Conversations
        • Unread Count
        • Pin Conversations
        • Delete Conversations
        • Draft
        • Mark
        • Conversation Group
      • Group
        • Overview
        • Manage Group
        • Profile
        • Manage Members
        • Member Profile
        • Attribute
        • Counter
      • Community and Topic
        • Manage Community
        • Permission Group
      • User
        • User Profile
        • User Status
        • Manage Friends
        • Friend Group
        • Block Lists
      • Local Search
        • Search Messages
        • Search Friends
        • Search Groups
        • Search Group Members
      • Signaling
      • API Reference
        • Java
  • iOS and macOS
    • Run Demo
    • UIKit
      • Overview
      • Getting Started
      • Installation
        • TUIKit
        • TUIChat Only
      • Features
        • Reactions
        • Read Receipt
        • User Online Status
        • Search Messages
      • Customization
        • Customize Messages
        • Customize Emojis and Stickers
      • Localization
    • SDK
      • Installation
        • iOS
        • macOS
      • Initialize Chat SDK
      • Login and Logout
      • Message
        • Overview
        • Send a Message
        • Receive a Message
        • Retrieve Messages
        • Forward Messages
        • Modify a Message
        • Insert a Message
        • Delete Messages
        • Clear History Messages
        • Recall a Message
        • Send an Online Message
        • Message Read Receipt
        • Query Messages
        • Metions
        • Targeted Group Messages
        • Do not Notify
        • Key-Value Extensions
        • Reactions
        • Translation
        • Pin Messages
      • Conversation
        • Overview
        • Conversation List
        • Get Conversations
        • Unread Count
        • Pin Conversations
        • Delete Conversations
        • Draft
        • Mark
        • Conversation Group
      • Group
        • Overview
        • Manage Group
        • Profile
        • Manage Members
        • Member Profile
        • Attribute
        • Counter
      • Community and Topic
        • Manage Community
        • Permission Group
      • User
        • User Profile
        • User Status
        • Manage Friends
        • Friend Group
        • Block Lists
      • Local Search
        • Search Messages
        • Search Friends
        • Search Groups
        • Search Group Members
      • Signaling
      • API Reference
        • Swift
        • Objective-C
  • Windows
    • SDK
      • Install Chat SDK
      • Initialize Chat SDK
      • Login and Logout
      • Message
        • Overview
        • Send a Message
        • Receive a Message
        • Retrieve Messages
        • Forward Messages
        • Modify a Message
        • Insert a Message
        • Delete Messages
        • Clear History Messages
        • Recall a Message
        • Send an Online Message
        • Message Read Receipt
        • Query Messages
        • Metions
        • Targeted Group Messages
        • Do not Notify
        • Key-Value Extensions
        • Reactions
        • Translation
        • Pin Messages
      • Conversation
        • Overview
        • Conversation List
        • Get Conversations
        • Unread Count
        • Pin Conversations
        • Delete Conversations
        • Draft
        • Mark
        • Conversation Group
      • Group
        • Overview
        • Manage Group
        • Profile
        • Manage Members
        • Member Profile
        • Attribute
        • Counter
      • Community and Topic
        • Manage Community
        • Permission Group
      • User
        • User Profile
        • User Status
        • Manage Friends
        • Friend Group
        • Block Lists
      • Local Search
        • Search Messages
        • Search Friends
        • Search Groups
        • Search Group Members
      • Signaling
      • API Reference
        • C++
        • C
  • Flutter
    • Run Demo
    • UIKIT
      • Overview
      • Installation
        • integrated
      • Features
        • Local Search
        • Offline Push
        • Online Status
        • Typing Status
        • Message Read Receipt
        • Message Reactions
        • Internationalization
        • Adding Custom Messages
        • Emoji & Stickers
      • Customization
        • Modifying UI Themes
        • Setting UI Styles
    • SDK
      • Install Chat SDK
        • Install
      • Initialize Chat SDK
        • Initialize
      • Login And Logout
        • Login and Logout
      • Message
        • Message Overview
        • Sending Message
        • Receiving Message
        • Historical Message
        • Forwarding Message
        • Modifying Message
        • Message Inserting
        • Deleting Message
        • Clearing Messages
        • Recalling Message
        • Online Message
        • Read Receipt
        • Querying Message
        • Group @ Message
        • Targeted Group Message
        • Notification Muting
        • Message Extension
      • Conversation
        • Conversation Overview
        • Conversation List
        • Getting Conversation
        • Conversation Unread Count
        • Pinning Conversation to the Top
        • Deleting Conversation
        • Conversation Draft
        • Conversation Group
      • Group
        • Group Overview
        • Group Management
        • Group Profile
        • Group Member Management
        • Group Member Profile
        • Custom Group Attribute
      • User
        • User Profile
        • Friend Management
        • Friend List
        • Blocklist
      • Offline Push
        • Offline Push
      • Signaling
        • Signaling Management
      • Local Search
        • Searching for Message
        • Searching for Friend
        • Searching Group
        • Searching for Group Member
      • API Reference
        • Client APIs
  • React Native
    • Run Demo
    • SDK
      • SDK Integration
      • Initialization
      • Login and Logout
      • Message
        • Message Overview
        • Sending Message
        • Receiving Message
        • Historical Message
        • Forwarding Message
        • Modifying Message
        • Message Inserting
        • Deleting Message
        • Clearing Messages
        • Recalling Message
        • Online Message
        • Read Receipt
        • Querying Message
        • Group @ Message
        • Targeted Group Message
        • Notification Muting
        • Message Extension
      • Group
        • Overview
        • Group Management
        • Group Profile
        • Group Member Management
        • Group Member Profile
        • Custom Group Attribute
        • Community Management
      • User
        • User Profile
        • Friend Management
        • Friend List
        • Blocklist
      • Offline Push
        • Offline Push
      • Local Search
        • Searching for Message
        • Searching for Friend
        • Searching Group
        • Searching for Group Member
      • Signaling
        • Signaling Management
  • Unity(Game Solution)
    • Run Demo
    • SDK
      • SDK Integration
      • Initialization
      • Login and Logout
      • Message
        • Message Overview
        • Sending Message
        • Receiving Message
        • Historical Message
        • Forwarding Message
        • Modifying Message
        • Deleting Message
        • Clearing Messages
        • Recalling Message
        • Online Message
        • Read Receipt
        • Querying Message
        • Group @ Message
        • Targeted Group Message
        • Notification Muting
        • Message Extension
      • Conversation
        • Conversation Overview
        • Conversation List
        • Getting Conversation
        • Conversation Unread Count
        • Pinning Conversation to the Top
        • Deleting Conversation
        • Conversation Draft
        • Conversation Mark
        • Conversation Group
      • Group
        • Group Overview
        • Group Management
        • Group Profile
        • Group Member Management
        • Group Member Profile
        • Custom Group Attribute
        • Group Counter
      • User
        • User Profile
        • User Status
        • Friend Management
        • Friend List
        • Blocklist
  • Unreal Engine(Game Solution)
    • SDK
      • SDK Integration
  • Free Demos
  • Server APIs
    • Generating UserSig
    • RESTful APIs
      • RESTful API Overview
      • RESTful API List
      • Message Related
        • Send Message
          • Sending One-to-One Messages to One User
          • Sending One-to-One Messages to Multiple Users
          • Sending Ordinary Messages in a Group
          • Sending System Messages in a Group
          • Broadcast Message of Audio-Video Group
          • Importing One-to-One Messages
          • Importing Group Messages
        • Historical Message
          • Modifying Historical One-to-one Messages
          • Modifying Historical Group Messages
          • Pulling Historical One-to-one Messages
          • Pulling Historical Group Messages
        • Delete Message
          • Deleting Messages Sent by a Specified User
        • Withdraw Message
          • Recalling One-to-One Messages
          • Recalling Group Messages
        • Read Receipt
          • Marking One-to-One Messages as Read
          • Pulling Group Message Read Receipt Details
          • Pulling Read Receipts for Group Messages
        • Message Extension
          • Pulling the Message Extension of a One-to-One Message
          • Configuring Message Extension for a One-to-One Message
          • Pulling Message Extension of a Group Message
          • Configuring Message Extension for a Group Message
        • Pushing to All Users
          • API for Pushing to All Users
          • Pushing to All Users
          • Setting Application Attribute Names
          • Getting Application Attribute Names
          • Getting User Attributes
          • Setting User Attributes
          • Deleting User Attributes
          • Getting User Tags
          • Adding User Tags
          • Deleting User Tags
          • Deleting All Tags of a User
      • Session Related
        • Conversation List
          • Pulling a conversation list
        • Session Unread Count
          • Setting the Unread Message Count of a Member
          • Querying Unread One-to-One Message Count
        • Delete Session
          • Deleting a conversation
        • Session Grouping Tag
          • Creating Conversation Group Data
          • Updating Conversation Group Data
          • Deleting Conversation Group Data
          • Creating or Updating Conversation Mark Data
          • Searching for Conversation Group Marks
          • Pulling Conversation Group Mark Data
      • Group Related
        • Group Management
          • Getting All Groups in an App
          • Creating a Group
          • Disbanding a Group
          • Getting the Groups a User Has Joined
        • Group Information
          • Getting Group Profiles
          • Modifying the Profile of a Group
          • Importing a Group Profile
        • Group Member Management
          • Adding Group Members
          • Deleting Group Members
          • Banning Group Members
          • Unbanning Group Members
          • Bulk Muting and Unmuting
          • Getting the List of Muted Group Members
          • Changing Group Owner
          • Querying the Roles of Users in a Group
          • Importing Group Members
        • Group Member Information
          • Getting Group Member Profiles
          • Modifying the Profile of a Group Member
        • Group Custom Attributes
          • Getting Group Custom Attributes
          • Modifying Group Custom Attributes
          • Clearing Group Custom Attributes
          • Resetting Group Custom Attributes
          • Deleting Group Custom Attributes
        • Live Group Management
          • Getting the Number of Online Users in an Audio-Video Group
          • Getting the List of Online Members in Audio-Video Group
          • Setting Audio-Video Group Member Marks
          • Getting the List of Banned Group Members.
        • Community Management
          • Creating Topic
          • Deleting Topic
          • Getting Topic Profile
          • Modifying Topic Profile
          • Importing Topic Profiles
        • Group Counter
          • Getting Group Counters
          • Updating Group Counters
          • Deleting Group Counters
      • User Management
        • Account Management
          • Importing a Single Account
          • Importing Multiple Accounts
          • Deleting Accounts
          • Querying Accounts
        • User Information
          • Setting Profiles
          • Pulling Profiles
        • User Status
          • Invalidating Account Login States
          • Querying Account Online Status
        • Friend Management
          • Adding Friends
          • Importing Friends
          • Updating Friends
          • Deleting Friends
          • Deleting All Friends
          • Verifying Friends
          • Pulling Friends
          • Pulling Specified Friends
        • Friend Lists
          • Adding Lists
          • Deleting Lists
          • Pulling Lists
        • Blocklist
          • Blocklisting Users
          • Unblocklisting Users
          • Pulling a Blacklist
          • Verifying Users on a Blocklist
      • Global Mute Management
        • Setting Global Mute
        • Querying Global Mute
      • Operations Management
        • Pulling Operations Data
        • Downloading Recent Messages
        • Getting Server IP Addresses
      • Chatbots
        • Pulling Chatbot Accounts
        • Creating Chatbot Accounts
        • Deleting Chatbot Accounts
    • Webhooks
      • Webhook Overview
      • Webhook Command List
      • Operations Management Callbacks
        • API Overclocking Alarm Callbacks
      • Online Status Webhooks
        • Status Change Webhooks
      • Relationship Chain Webhooks
        • After a Profile Is Updated
        • Before a Friend Is Added
        • Before a Friend Request Is Responded
        • After a Friend Is Added
        • After a Friend Is Deleted
        • After a User Is Added to Blocklist
        • After a User Is Removed from Blocklist
      • One-to-One Message Webhooks
        • Before a One-to-One Message Is Sent
        • After a One-to-One Message Is Sent
        • After a One-to-One message Is Marked as Read
        • After A One-to-One Message Is Recalled
      • Group Webhooks
        • Before a Group Is Created
        • After a Group Is Created
        • Before Applying to Join a Group
        • Before Inviting a User to a Group
        • After a User Joins a Group
        • After a User Leaves a Group
        • Before Group Message Is Sent
        • After a Group Message Is Sent
        • After a Group Is Full
        • After a Group Is Disbanded
        • After Group Profile Is Modified
        • Callback After Recalling Group Messages
        • Webhook for Online and Offline Status of Audio-Video Group Members
        • Webhook for Exceptions When Group Messages Are Sent
        • Before a Topic Is Created
        • After a Topic Is Created
        • After a Topic Is Deleted
        • Topic Profile Change Webhook
        • Callback After Group Member Profile Changed
        • Callback After Group Attribute Changed
        • Callback After Read Receipt
        • Callback After the Group Owner Changed
      • Webhook Mutual Authentication Configuration Guide
        • Apache Mutual Authentication Configuration
        • Nginx Mutual Authentication Configuration
      • Chatbot webhooks
        • Chatbot Passthrough Message Callback
  • Console Guide
    • Creating and Upgrading an Application
    • Basic Configuration
    • Feature Configuration
    • Account Management
    • Group Management
    • Webhook Configuration
  • Product Introduction
    • Message Management
      • One-to-One Message
      • Message Storage
      • Offline Push
      • Group Message
      • Message Formats
    • Account System
      • Login Authentication
      • Online Status Management
    • Group Related
      • Group System
      • Group Management
    • User Profile and Relationship Chain
      • Profile Management
      • Relationship Chain Management
  • Purchase Guide
    • Billing Overview
    • Pricing
  • Error Codes
Chat

Customize Emojis and Stickers

TUIChat allows for adding custom emojis.
Note:
TUIChat accommodates the inclusion of images in these formats as custom emoticons: JPEG, JPG, PNG, BMP. GIF format is also supported, which starts from version 7.8.

Adding a Custom Emoji

TUIChat allows for adding custom emojis from the sandbox, assets directory, and network paths. The following takes adding the programmer emoji from the assets directory as an example.

Preparing sticker resources

Create the assets folder in the src/main folder of the app and put the emoji folder in the assets directory:




Adding a sticker

When the application starts, call the API to add a custom emoji to FaceManager: Each sticker has a unique faceGroupID, and each emoji in the sticker has a faceKey. After the sticker is added to FaceManager, stickers will be sorted by faceGroupID on the More emojis input UI.
public class DemoApplication extends Application {
@Override
public void onCreate() {
FaceGroup programmerGroup = new FaceGroup();
// The number of emojis displayed per row on the **More emojis** input UI
programmerGroup.setPageColumnCount(5);
// The thumbnail of the sticker
programmerGroup.setFaceGroupIconUrl("file:///android_asset/programmer/programmer00@2x.png");
// The name of the sticker
programmerGroup.setGroupName("programmer");
for (int i = 0; i < 16; i++) {
CustomFace customFace = new CustomFace();
String index = "" + i;
if (i < 10) {
index = "0" + i;
}
// Put emojis in the `assets` directory. If the sandbox path or network path is used, the `setFaceUrl` method can be used.
customFace.setAssetPath("programmer/programmer" + index + "@2x.png");
// The `key` of the emoji
String faceKey = "programmer" + index;
customFace.setFaceKey(faceKey);
// The width of the emoji on the **More emojis** input UI
customFace.setWidth(170);
// The height of the emoji on the **More emojis** input UI
customFace.setHeight(170);
programmerGroup.addFace(faceKey, customFace);
}
// Register the sticker in `FaceManager`. `FaceGroupID` is `1`.
FaceManager.addFaceGroup(1, programmerGroup);
}
}

Effect after successful addition

The sticker added successfully is displayed on the More emojis input UI on the chat UI.



Caution
faceGroupID is an integer greater than 0 and must be unique.

Sending a Custom Emoji

After a custom emoji is added, it will be displayed on the More emojis input UI and can be sent with a click.
An emoji message can also be generated by using the code and then sent, for example:
V2TIMMessage v2TIMMessage = V2TIMManager.getMessageManager()
.createFaceMessage(faceGroupID, faceKey.getBytes());
V2TIMManager.getMessageManager().sendMessage(v2TIMMessage,
userID,
null,
V2TIMMessage.V2TIM_PRIORITY_DEFAULT,
false,
null,
new V2TIMSendCallback<V2TIMMessage>() {...}

Parsing a Custom Emoji

After a custom emoji message is received, TUIKit will parse the V2TIMMessage of the IM SDK as the FaceMessageBean type. FaceMessageBean can be used to get the faceGroupID and faceKey of the custom emoji.
TUIMessageBean messageBean = ChatMessageParser.parseMessage(v2TIMMessage);
FaceMessageBean faceMessageBean = null;
if (messageBean instanceof FaceMessageBean) {
faceMessageBean = (FaceMessageBean) messageBean;
}
if (faceMessageBean != null) {
int faceGroupID = faceMessageBean.getIndex();
String faceKey = null;
if (faceMessageBean.getData() != null) {
faceKey = new String(faceMessageBean.getData());
}
}

Rendering a Custom Emoji

Calling an existing API for rendering

After the faceGroupID and faceKey of a custom emoji are obtained, the loadFace method of FaceManager can be called to load them to the imageView passed in:
FaceManager.loadFace(faceGroupID, faceKey, imageView);

Custom rendering

Also, the faceGroupID and faceKey of an emoji can be used to get the real URL of the emoji from FaceManager for custom rendering, for example:
String faceUrl = "";
List<FaceGroup> faceGroupList = FaceManager.getFaceGroupList();
for(FaceGroup faceGroup : faceGroupList) {
if (faceGroup.getGroupID() == faceGroupID) {
ChatFace face = faceGroup.getFace(faceKey);
if (face != null) {
faceUrl = face.getFaceUrl();
}
}
}

// load faceUrl into view

Rendering effect

The rendering effect is as shown below: