Customize Chat Message Bubble

When TapTalk.io framework is integrated to your app with the UI implementation method, you can add customized chat message bubbles to be used in chat.

Adding a Custom Chat Bubble

You can check the following example to add a custom bubble to your chat.

1. Create your own table view cell

TapTalk.io custom chat bubble is created based on TAPBaseGeneralBubbleTableViewCell subclass of UITableViewCell class. To add custom chat bubble, you have to create your own table view cell class subclass of TAPBaseGeneralBubbleTableViewCell class and check also create XIB file.

You can download the sample xib file for right chat bubble cell (sender) and left chat bubble cell (recipient) by clicking the link.

Note: Your table view cell needs to have height constraint or top & bottom constraint to able to display the cell because TapTalk.io implements automatic row height.

2. Add your custom bubble class

To add your custom bubble to TapTalk.io, use the TapUI class and call the addCustomBubbleWithClassName method. This is typically done in your AppDelegate class in method application:didFinishLaunchingWithOptions:.

Objective-C

[[TapUI sharedInstance] addCustomBubbleWithClassName:@"CustomTableViewCell" type:3001 delegate:self bundle:[NSBundle mainBundle]];

Note: Please note that the message type for custom bubbles should start with 3 as the prefix. For more information, check the message type page.

Showing Your Custom Bubble in Chat

You can use your customized chat bubble in a chat room by constructing a custom TAPMessageModel with constructTapTalkMessageModel: method, then sending the constructed message to the chat room with sendCustomMessage:. Both methods can be accessed from the TapCoreMessageManager class.

To construct a message, you are required to have a TAPRoomModel as a parameter. You can use getPersonalChatRoom: or getGroupChatRoom: method in TapCoreChatRoomManager class to obtain a chat room model.

Below is an example to send a custom message with the steps mentioned above.

Objective-C

//Obtain TapTalk Room with Recipient User ID
//This Room model will be use to construct TapTalk Message Model
[TapCoreChatRoomManager sharedManager] getPersonalChatRoomWithRecipientUserID:RECIPIENT_USER_ID success:^(TAPRoomModel *room) {
   //Success block
} failure:^(NSError * _Nonnull error) {
   //Failure block
}];

//Construct TAPMessageModel
TAPMessageModel *messageModel = [[TAPCoreMessageManager sharedManager] constructTapTalkMessageModelWithRoom:ROOM messageBody:MESSAGE_BODY messageType:MESSAGE_TYPE messageData:MESSAGE_DATA];

//Send Custom Message
[[TAPCoreMessageManager sharedManager] sendCustomMessageWithMessageModel:messageModel start:^(TAPMessageModel * _Nonnull message) {
   //Start block      
} success:^(TAPMessageModel * _Nonnull message) {
   //Success block
} failure:^(NSError * _Nonnull error) {
   //Failure block
}];