Emoji and Stickers

You can send emoji and stickers through the IMKit input area. Tap the emoji (☺) button in the input bar to expand the emoticon panel, which supports sending both emoji and stickers. These emoticon messages will appear in the message list component of the conversation UI.

tip

By default, the IMKit input panel only includes emoji. The sticker pack shown in the screenshot requires integration of the IMKit plugin RongSticker library. Custom stickers can also be added.

Emoji Symbols

The IMKit input panel displays built-in emoji by default, generated from the Emoji.plist resource file in the RongIMKit bundle. When tapped, these emoji symbols (native Unicode characters) will be inserted into the text input area.

Disabling Built-in Emoji

tip

SDK version 5.2.3+ supports disabling built-in emoji.

You can configure whether to include the built-in emoji tab by setting the disableSystemEmoji property of RCConversationViewController before displaying the conversation UI. The default value is NO (shows emoji). When disabled, the emoji tab won't appear in the panel.

chatVC.disableSystemEmoji = YES;
[self.navigationController pushViewController:chatVC animated:YES];

Stickers

The IMKit emoticon panel supports sticker packs. You can integrate the official RongSticker library or add custom stickers.

Integrating RC Stickers

IMKit can integrate the official sticker library RongSticker, which includes a set of "Hi Leopard" stickers.

tip

The RongSticker plugin supports both source code and Framework integration. Ensure you use the same integration method (either Framework or source) for both IMKit and its plugins.

Example for source integration:

# Plugin version must match the main SDK version.
pod 'RongCloudOpenSource/RongSticker','~> x.y.z'

Replace x.y.z with the actual version number. Check the latest version on the RC SDK Download Page or CocoaPods repository.

After successful integration, the RCStickerModule will add an RC sticker tab to the emoticon panel. First-time users need to download the sticker pack when prompted. Once downloaded, all stickers will be displayed.

When tapping an RC sticker, the RongSticker library automatically sends the message. For implementation details, refer to RCStickerCollectionView.m in the IMKit source code.

Sample Code

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    RCStickerSingle *model = self.stickers[indexPath.row];
    RCStickerMessage *stickerMsg = [RCStickerMessage messageWithPackageId:self.packageId
                                                                stickerId:model.stickerId
                                                                   digest:model.digest
                                                                    width:model.width
                                                                   height:model.height];
    [[RCIM sharedRCIM] sendMessage:[RCStickerModule sharedModule].conversationType
                          targetId:[RCStickerModule sharedModule].currentTargetId
                           content:stickerMsg
                       pushContent:nil
                          pushData:nil
                           success:nil
                             error:nil];
}

Custom Stickers

tip

Custom sticker integration requires IMKit source code.

Custom sticker pages must conform to the RCEmoticonTabSource protocol. The RCStickerModule in IMKit's RongSticker library implements the RongIMKitExtensionModule protocol, using its getEmoticonTabList method to add custom sticker tabs to IMKit.

There are two approaches for adding custom stickers:

• Directly add local images/GIFs via the conversation UI's chatSessionInputBarControl.emojiBoardView property. Stickers added this way won't have a send button in the corner—you'll need to implement message sending manually.
• Build a complete sticker module that conforms to RongIMKitExtensionModule, using getEmoticonTabList to add the sticker page to the panel. This approach requires implementing remote sticker data downloading. Refer to RCStickerModule.m and RCStickerDataManager.m in IMKit's source code.

Below are steps for adding local images/GIFs via chatSessionInputBarControl.emojiBoardView:

1. Implement the RCEmoticonTabSource protocol's loadEmoticonView method to return the sticker tab view. The view size must match contentViewSize (width = screen width, height = 186).

   - (UIView *)loadEmoticonView:(NSString *)identify index:(int)index;

   Parameter	Type	Description
   identify	NSString	Sticker tab identifier
   index	int	Page index of the sticker tab

2. Add sticker packs via the emojiBoardView's addEmojiTab method in the conversation UI (dynamic removal isn't supported). Handle tap gestures and events for individual stickers. For static images, construct RCImageMessage content. For GIFs, use RCGifMessage. See Sending Messages for sending implementation.

   UIImage *icon = [RCKitUtility imageNamed:@"imageName"
                                   ofBundle:@"RongCloud.bundle"];
   RCDCustomerEmoticonTab *emoticonTab1 = [RCDCustomerEmoticonTab new];
   emoticonTab1.identify = @"identifier";
   emoticonTab1.image = icon;
   emoticonTab1.pageCount = pageCount;
   [self.emojiBoardView addEmojiTab:emoticonTab1];

   Custom sticker tabs support pagination. Since the SDK doesn't currently support refreshing pageCount, set the correct page count initially.

Hiding the Emoticon Panel Entry

tip

Available in IMKit SDK 5.3.2+.

When emoticon input functionality isn't needed, you can hide the emoji button in the input bar, preventing users from expanding the emoticon panel. See Input Area.