tencent cloud

Feedback

Web & H5 & Uniapp

Last updated: 2024-11-04 17:22:40
    Note:
    The usage of custom emoji capabilities described in this article is applicable to @tencentcloud/chat-uikit-vue ≥ 2.2.0 or @tencentcloud/chat-uikit-uniapp ≥ 2.2.0.
    In our TUIChat component, we support sending and receiving two types of emojis:
    Emoji Types
    Sending Format
    Text Mixed Layout
    Sending Content
    TUIKit comes with by default
    Small Emoji
    Text Message MSG_TEXT
    Yes
    Emoji Image Key
    Default Inclusion
    Large Sticker
    Face Message MSG_FACE
    No
    index: emojiGroupID
    data: Emoji Image Key
    Default Inclusion
    The specific effects are as follows:
    
    
    

    Customized Large Stickers

    TUIChat supports loading customized large emoticons from Network Path. The following will use adding a set of Cat Emoji Pack as an example to explain how to add a set of your customized large emoticons.

    Step 1: Prepare Large Sticker Resources

    1. Please name each emoji pack resource file with a filename that includes the @custom format identifier: TUIKit requires matching @custom to parse the customized emoji resources.
    2. Since the parsing method for emoji packs is URL + Emoji Image Key, make sure to upload your new emoji pack resources to a unified network path URL.
    
    
    

    Step 2: Add Large Sticker Pack

    After all your emoji pack resources have been uploaded to the web, it's necessary to add declarations for the new emoji pack resources in the TUIKit source code.
    The TUIKit/components/TUIChat/emoji-config/custom-emoji.ts file is the declaration file for customized emojis.
    Note:
    If you have multi-platform interconnection needs, please ensure that the emojiGroupID of each custom emoji group and the key of each emoji within the group are consistent across all platforms.
    import { EMOJI_TYPE } from '../../../constant';
    
    // Fill in your custom large emoji network path, example as below
    export const CUSTOM_BIG_EMOJI_URL = 'https://web.sdk.qcloud.com/im/test/emoji-test/';
    
    // Declare your custom large emoji group list, example as below
    export const CUSTOM_BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [
    {
    emojiGroupID: 4, // Emoji Group ID
    type: EMOJI_TYPE.CUSTOM, // Emoji Group Type: CUSTOM Custom Emoji Group
    url: CUSTOM_BIG_EMOJI_URL, // Emoji Group Public URL Prefix
    // Declaration of the emoji list, formatted as Key + Emoji File Type Suffix, every Key in the list must be unique
    list: ['@custom_cat32.png', '@custom_cat33.png', '@custom_cat34.png', '@custom_cat35.png', '@custom_cat36.png', '@custom_cat37.png', '@custom_cat38.png', '@custom_cat39.png',
    '@custom_cat40.png', '@custom_cat45.png', '@custom_cat46.png', '@custom_cat47.png', '@custom_cat49.png', '@custom_cat50.png', '@custom_cat51.png'],
    },
    ];

    Step 3: Render Custom Large Sticker

    TUIKit internally supports the Custom Large Sticker Parsing feature. Following the steps above, you will achieve the following effect:
    
    
    

    Custom Small Emoji

    Built-in Small Emoji Resources

    TUIKit by default includes a set of Yellow Face emoji resources. The copyright of Yellow Face emojis is owned by Tencent Cloud. For licensing, please contact us. A comparison of Yellow Face emoji images and their meanings is as follows:
    
    
    

    Step 1: Prepare Small Emoji Resources

    Since the parsing method for emoji packs is baseURL + Emoji Image Key, please make sure to upload your new emoji pack resources to a unified network path baseURL.
    
    
    

    Step 2: Replace Small Emoji Resources

    2.1 Add Custom Small Emoji Declaration

    As TUIKit requires matching @custom to parse custom emoji resources, each custom small emoji resource key must include the @custom format identifier.
    Target file directory: TUIKit/components/TUIChat/emoji-config/custom-emoji.ts
    Note:
    If you have multi-platform interconnection needs, please ensure the key of every custom small emoji is consistently defined across all platforms.
    // Fill in your custom small emoji network path, example as below
    // export const CUSTOM_BASIC_EMOJI_URL = 'https://web.sdk.qcloud.com/im/assets/emoji/';
    export const CUSTOM_BASIC_EMOJI_URL = '';
    
    // Configure CUSTOM_BASIC_EMOJI_URL_MAPPING:
    // CUSTOM_BASIC_EMOJI_URL_MAPPING records the mapping relationship between each emojiKey and its corresponding emoji image URL, including the file suffix in the URL
    // Each emojiKey must contain the @custom identifier to be parsed, example as below
    export const CUSTOM_BASIC_EMOJI_URL_MAPPING = {
    '[@custom_Expect]': 'emoji_0@2x.png',
    '[@custom_Blink]': 'emoji_1@2x.png',
    '[@custom_Guffaw]': 'emoji_2@2x.png',
    '[@custom_KindSmile]': 'emoji_3@2x.png',
    ...
    }

    2.2 Add Internationalized Text Statement for Custom Small Emojis

    Add key-value pairs for English meanings declaration
    Target file directory: TUIKit/components/TUIChat/emoji-config/locales/en.ts
    // Rewriting English Entry key-value Assertion, example as below
    const Emoji = {
    '[@custom_Expect]': '[Expect]',
    '[@custom_Blink]': '[Blink]',
    '[@custom_Guffaw]': '[Guffaw]',
    ...
    }
    Add key-value pairs for Chinese meanings declaration
    Target file directory:TUIKit/components/TUIChat/emoji-config/locales/zh_cn.ts
    // Rewriting Chinese Entry key-value Assertion, example as below
    const Emoji = {
    '[@custom_Expect]': '[Expect]',
    '[@custom_Blink]': '[Blink]',
    '[@custom_Guffaw]': '[Guffaw]',
    ...
    }

    Step 3: Render Custom Small Emojis

    TUIKit internally supports the custom small emojis parsing feature. After completing the above steps to replace emoticons, they can be automatically parsed and displayed within TUIChat. The effect is as follows:
    
    
    

    Remove system-provided emojis

    The system-provided emojis' emojiGroupID corresponds to the following meme packs:
    emojiGroupID = 0
    emojiGroupID = 1
    emojiGroupID = 2
    emojiGroupID = 3
    
    
    
    
    
    
    
    
    
    
    
    
    If you do not need some of the above emoji groups, you can delete the Definition for that group in TUIKit/components/TUIChat/emoji-config/default-emoji.ts:
    Note:
    If you have multi-platform interconnection needs, please ensure that the same emoji groups are deleted across all platforms and that the emoji group configurations remain consistent after deletion.
    // For example, to delete the large emoji group with emojiGroupID = 1
    export const BIG_EMOJI_GROUP_LIST: IEmojiGroupList = [
    // {
    // emojiGroupID: 1,
    // type: EMOJI_TYPE.BIG,
    // url: DEFAULT_BIG_EMOJI_URL,
    // list: ['yz00', 'yz01', 'yz02', 'yz03', 'yz04', 'yz05', 'yz06', 'yz07', 'yz08',
    // 'yz09', 'yz10', 'yz11', 'yz12', 'yz13', 'yz14', 'yz15', 'yz16', 'yz17'],
    // },
    ...
    ];
    
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support