> For the complete documentation index, see [llms.txt](https://docs.taptalk.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-ios/customized-chat-message-bubble.md).

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

![](/files/-MHRDV7BYNyzqjV_fDFk)

{% 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](/powertalk-chat-sdk-documentation/powertalk-ios/message-type.md).
{% 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:`](broken://pages/-MHQ4Ar3wB0t7lYmfk0u#construct-taptalk-io-message-model) method, then sending the constructed message to the chat room with [`sendCustomMessage:`](broken://pages/-MHQ4Ar3wB0t7lYmfk0u#send-a-custom-message). 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:`](broken://pages/-MHQ4Ar3wB0t7lYmfk0u#get-personal-chat-room-with-recipient-user) or [`getGroupChatRoom:`](/powertalk-chat-sdk-documentation/powertalk-ios/group-chat/group-chat-tapcore.md#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 %}