# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-ios/customized-chat-message-bubble.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.