# 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)](https://storage.googleapis.com/9a3048-taptalk-prd-public/docs/TAPMyChatBubbleTableViewCell.xib) and [left chat bubble cell (recipient)](https://storage.googleapis.com/9a3048-taptalk-prd-public/docs/TAPYourChatBubbleTableViewCell.xib) by clicking the link.

![](https://4266585843-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfVupFSqh_qZAY9OiCO%2F-MHRD9Kk57-PHcQzZmXU%2F-MHRDV7BYNyzqjV_fDFk%2Fimage.png?alt=media\&token=bfb662e5-3e7c-43f8-befb-f99f1e236428)

{% hint style="warning" %}
**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.
{% endhint %}

### 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:`.

{% tabs %}
{% tab title="Objective-C" %}

```csharp
#import <TapTalk/TapUI.h>

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

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**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](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-ios/message-type).
{% endhint %}

### Showing Your Custom Bubble in Chat

You can use your customized chat bubble in a chat room by constructing a custom **TAPMessageModel** with [`constructTapTalkMessageModel:`](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-ios/broken-reference) method, then sending the constructed message to the chat room with [`sendCustomMessage:`](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-ios/broken-reference). 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:`](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-ios/broken-reference) or [`getGroupChatRoom:`](https://docs.taptalk.io/powertalk-chat-sdk-documentation/group-chat/group-chat-tapcore#get-group-chat-room) method in **TapCoreChatRoomManager** class to obtain a chat room model.

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

{% tabs %}
{% tab title="Objective-C" %}

```csharp
#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
}];
```

{% endtab %}
{% endtabs %}