Skip to main content

Custom Emojis

Emoji Stickers​

Global IM UIKit provides a basic list of Emoji stickers, including characters from u+1f601 to u+1f64f and u+1f910 to u+1f92f, totaling 111 Emoji characters.

tip

The image above is a reference design and not the default implementation of Global IM UIKit. Components such as the conversation list filter, extended function items in the top-right corner of the chat UI, and some items in the menu need to be implemented by the application.

You can retrieve the Emoji sticker list using the cloneChatEmojiLibrary method for custom modifications. Once modified, update it using the setChatEmojiLibrary method.

const library = kitApp.cloneChatEmojiLibrary();

// Modify the Emoji sticker panel icon, preferably using SVG image resources
library.icon = '';
// Modify the Emoji character list
library.chats.push('📚');

// This method is only effective before `kitApp.ready()` is called
kitApp.setChatEmojiLibrary(library);
tip

The setChatEmojiLibrary method is only effective before kitApp.ready() is called.

Image Stickers​

Global IM UIKit currently does not provide any built-in image sticker packs, but you can configure custom image sticker packs using the setImageEmojiLibraries method. When a user clicks on an image sticker, Global IM UIKit will send it as an image message or GIF message.

tip

The setImageEmojiLibraries method is only effective before kitApp.ready() is called.

Parameter List

ParameterTypeRequiredDescription
idStringYesSticker pack ID, defined by the business layer
iconStringYesSticker pack icon, preferably using SVG image resources, displayed on the sticker panel for switching between different sticker packs
orderNumberYesThe display order of the icon in the sticker panel; the smaller the order value, the earlier it is displayed
itemWidthNumberYesThe display width of a single sticker in the sticker panel
itemHeightNumberYesThe display height of a single sticker in the sticker panel
itemsArray of IRCKitImageEmojiYesList of sticker elements in the sticker pack; refer to the APIDoc IRCKitImageEmoji for the element structure

Code Example

// Define an image sticker pack
const library1 = {
  id: 'library1',
  icon: '', // Sticker pack icon, preferably using SVG image resources, displayed on the sticker panel for switching
  itemWidth: 100, // The display width of a single sticker in the sticker panel
  itemHeight: 80, // The display height of a single sticker in the sticker panel
  order: 0, // The display order of the sticker pack in the sticker panel; the smaller the order value, the earlier it is displayed
  items: [
    // Static image sticker
    {
      url: 'https://xxxxx', // Hosted network resource address, ensure accessibility across all network environments
      thumbnail: '', // Thumbnail data, should be a base64 string, also used for display in the sticker panel to avoid excessive traffic from requesting the original image
    },
    // GIF sticker
    {
      url: 'https://xxxxx',
      thumbnail: '',
      // If the image resource is a GIF and you want to send it as a GIF message, provide additional GIF image information
      // Otherwise, the SDK will default to sending it as a regular image message
      gif: {
        size: 100, // Image size in bytes
        width: 100,
        height: 100,
      }
    },
    // ...
  ],
}
const library2 = { /* ... */ }
// The SDK supports configuring multiple image sticker packs simultaneously
kitApp.setImageEmojiLibraries([ library1, library2 ]);
Last updated on