TapTalk.io Documentation
  • Introduction
  • OneTalk Omnichannel Documentation
    • Getting Started with OneTalk
      • Team Members
      • Add Topic
      • Assign Agent to Topic
      • Paid Proactive Chat
    • Channel Integration
      • Telegram Integration
      • WhatsApp SME Integration
      • Instagram DM Integration
      • Facebook Messenger Integration
      • Live Chat Integration (iOS, Android, Web)
        • OneTalk Live Chat for Android
          • Get Started
          • Event Listener
          • Authentication
          • Case & Topic
          • Navigate Live Chat UI
          • Customize UI Appearance
        • OneTalk Live Chat for iOS
          • Get Started
          • Background Process in TapTalk.io Omnichannel iOS
          • Event Delegate
          • Authentication
          • Case & Topic
          • Navigate Live Chat UI
          • Customize UI Appearance
        • OneTalk Live Chat for Web
          • Get Started
          • Callback
          • Method
        • OneTalk Live Chat for React Native
          • Get Started - Android
          • Authentication - Android
          • Get Started - iOS
          • Authentication - iOS
        • OneTalk Live Chat for Flutter
          • Get Started - Android
          • Get Started - iOS
      • Google Business Messages Integration
      • Google Business Profile Integration
      • Tokopedia Integration
    • Integration API
      • Inbox API
      • User/Contact API
    • Live Chat Widget Callback Function
    • Social Channel Button
    • Custom Chatbot Integration
      • Get Started
      • Edit or Delete Chatbot
      • Development
    • QnA via API
    • Webhook
  • PowerTalk Chat SDK Documentation
    • Getting Started with PowerTalk
    • PowerTalk Android
      • Get Started
      • Enable Chat Features
      • Authentication
      • TapUI and TapCore
      • Background Process in TapTalk.io
      • Connection
      • Event Listener
      • Push Notification
      • General
      • User
      • Room List
        • Room List - TapUI
        • Room List - TapCore
      • Chat Room and Messages
        • Chat Room and Messages - TapUI
        • Chat Room and Messages - TapCore
      • Contact
      • Message Type
      • Customize UI Appearance
      • Customize Chat Features
      • Customize Chat Message Bubble
      • Customize Navigation Bar
      • Deep Linking
      • Error Codes
    • PowerTalk iOS
      • Get Started
      • TapUI and TapCore
      • Background Process in TapTalk.io
      • Implement Application Delegate
      • Authentication
      • Connection
      • Event Delegate
      • Push Notification
      • General
      • User
      • Room List
        • Room List - TapUI
        • Room List - TapCore
      • Chat Room and Messages
        • Chat Room and Messages - TapUI
        • Chat Room and Messages - TapCore
      • Contact
      • Message Type
      • Customize UI Appearance
      • Customize Chat Features
      • Customize Chat Message Bubble
      • Customize Navigation Bar
      • Deep Linking
      • Error Codes
    • PowerTalk React Native
      • Get Started - Android
      • Get Started - iOS
    • PowerTalk Flutter
      • Get Started - Android
      • Get Started - iOS
    • Javascript SDK
      • Get Started
      • Authentication
      • Connection
      • General
      • Event Listener
      • User
      • Room List
      • Chat Room
      • Messages
      • Contact
      • Message Type
    • Server API
      • Get Started
      • Base URL
      • Authentication
      • User
      • Contact
      • Message
      • Room
    • Webhook
      • Get Started
      • Webhook Payload
  • MeetTalk SDK Documentation
    • Getting Started with MeetTalk
    • MeetTalk Android
      • Get Started
      • Event Listener
    • MeetTalk iOS
      • Get Started
      • Implement Application Delegate
      • Event Delegate
  • SendTalk API Documentation
    • Introduction
    • Whatsapp Verification
Powered by GitBook
On this page
  • Adding a Custom Chat Bubble
  • 1. Create your own table view cell
  • 2. Add your custom bubble class
  • Showing Your Custom Bubble in Chat

Was this helpful?

  1. PowerTalk Chat SDK Documentation
  2. PowerTalk iOS

Customize Chat Message Bubble

PreviousCustomize Chat FeaturesNextCustomize Navigation Bar

Last updated 1 month ago

Was this helpful?

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 and 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:.

#import <TapTalk/TapUI.h>

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

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.

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

#import <TapTalk/TapCoreChatRoomManager .h>

// 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) {
    //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) {
        
    }
    success:^(TAPMessageModel * _Nonnull message) {
       // Successfully sent custom message
    }
    failure:^(NSError * _Nonnull error) {
       // Failed to send custom message
    }];
}
failure:^(NSError * _Nonnull error) {
    // Failed to get room data
}];

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

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

message type page
right chat bubble cell (sender)
left chat bubble cell (recipient)
getGroupChatRoom: