> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Custom Message Types
> Register custom message bubble types, override conversation subtitles, and include custom messages in fetching.
| Field | Value |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Package | `@cometchat/chat-uikit-angular` |
| Key services | `MessageBubbleConfigService`, `ConversationSubtitleService`, `MessageListService` |
| Required setup | `CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")` |
| Purpose | Add custom message types with custom bubble templates, subtitle overrides, and fetch inclusion |
| Features | Custom bubble rendering, subtitle formatting, icon overrides, message type fetching |
| Related | [Message Bubble](/ui-kit/angular/components/cometchat-message-bubble) \| [Conversations](/ui-kit/angular/components/cometchat-conversations) \| [Message List](/ui-kit/angular/components/cometchat-message-list) |
The CometChat Angular UIKit supports extending the message system with custom message types. You can register custom bubble templates, override how messages appear in the conversation list, and include custom types in message fetching — all without modifying UIKit source code.
| Capability | Description |
| ------------------------------ | --------------------------------------------------- |
| Custom bubble templates | Register `ng-template` views for new message types |
| Conversation subtitle override | Control last message text per message type |
| Icon overrides | Set custom icons for conversation list items |
| Fetch inclusion | Include custom types in the message request builder |
***
## Custom Message Bubble
Use `MessageBubbleConfigService` to register templates for custom message types. The message type key format is `{type}_{category}` (e.g., `location_custom`).
### Register a Custom Content View
```typescript expandable theme={null}
import { Component, ViewChild, TemplateRef, AfterViewInit, inject } from '@angular/core';
import { MessageBubbleConfigService } from '@cometchat/chat-uikit-angular';
@Component({
selector: 'app-chat',
template: `
{{ getLocationLabel(message) }}
`
})
export class ChatComponent implements AfterViewInit {
@ViewChild('locationBubble') locationBubble!: TemplateRef;
private bubbleConfig = inject(MessageBubbleConfigService);
ngAfterViewInit() {
this.bubbleConfig.setBubbleView('location_custom', {
contentView: this.locationBubble
});
}
getMapUrl(message: any): string {
const data = message.getCustomData();
return `https://maps.example.com/static?lat=${data.latitude}&lng=${data.longitude}`;
}
getLocationLabel(message: any): string {
return message.getCustomData()?.label || 'Shared location';
}
}
```
The template receives the message object as `$implicit` context, so `let-message` gives you full access to the `CometChat.BaseMessage`.
### Full Bubble Override
To replace the entire bubble structure (header, content, footer, status), register a `bubbleView`:
```typescript theme={null}
this.bubbleConfig.setBubbleView('location_custom', {
bubbleView: this.fullLocationBubble
});
```
The `bubbleView` template context includes `$implicit` (message), `alignment`, and `group`.
### Partial Override
Register only the parts you want to customize. Unregistered parts use defaults:
```typescript theme={null}
this.bubbleConfig.setBubbleView('location_custom', {
contentView: this.locationContent,
footerView: this.locationFooter
// headerView, statusInfoView, etc. use defaults
});
```
***
## Conversation Subtitle Override
Use `ConversationSubtitleService` to control the last message text shown in the conversation list for specific message types.
### Register a Subtitle Formatter
```typescript expandable theme={null}
import { inject } from '@angular/core';
import { ConversationSubtitleService } from '@cometchat/chat-uikit-angular';
export class AppComponent {
private subtitleService = inject(ConversationSubtitleService);
ngOnInit() {
// Override subtitle for location messages
this.subtitleService.registerSubtitleFormatter('location_custom', (message) => {
return '📍 Shared a location';
});
// Override subtitle for payment messages
this.subtitleService.registerSubtitleFormatter('payment_custom', (message) => {
const data = (message as any).getCustomData();
return `💰 Payment: $${data.amount}`;
});
}
}
```
### Override Subtitle Icon
```typescript theme={null}
this.subtitleService.registerSubtitleIconOverride('location_custom', 'location-pin');
```
### Unregister
```typescript theme={null}
this.subtitleService.unregisterSubtitleFormatter('location_custom');
```
***
## Custom Message Fetching
By default, the message list fetches these types and categories:
**Default Types:** `text`, `file`, `image`, `audio`, `video`, `groupMember`, `form`, `scheduler`, `card`, `assistant`, `extension_sticker`, `extension_poll`, `extension_whiteboard`, `extension_document`, `meeting`
**Default Categories:** `message`, `custom`, `call`, `interactive`, `agentic`, `action` (action is excluded when `hideGroupActionMessages` is true)
### Inspect Current Defaults
```typescript expandable theme={null}
import { inject } from '@angular/core';
import { MessageListService } from '@cometchat/chat-uikit-angular';
export class AppComponent {
private messageListService = inject(MessageListService);
ngOnInit() {
console.log(this.messageListService.getAllMessageTypes());
console.log(this.messageListService.getAllMessageCategories());
}
}
```
### Add Custom Types and Categories
Append to the existing defaults:
```typescript theme={null}
// Add custom message types alongside defaults
this.messageListService.addCustomMessageTypes(['location', 'payment']);
// Add custom categories alongside defaults
this.messageListService.addCustomMessageCategories(['custom']);
```
### Replace Types and Categories Entirely
Fully replace the defaults with your own list:
```typescript theme={null}
// Only fetch text and image messages
this.messageListService.setMessageTypes(['text', 'image', 'location']);
// Only fetch message and custom categories
this.messageListService.setMessageCategories(['message', 'custom']);
```
Pass `null` to revert to the built-in defaults:
```typescript theme={null}
this.messageListService.setMessageTypes(null);
this.messageListService.setMessageCategories(null);
```
### Remove Custom Types
```typescript theme={null}
this.messageListService.removeCustomMessageTypes(['location']);
this.messageListService.removeCustomMessageCategories(['custom']);
```
If you provide a custom `MessagesRequestBuilder` via `setMessagesRequestBuilder`, custom types/categories registered via `addCustomMessageTypes`/`addCustomMessageCategories` are not appended. The custom builder is used as-is.
***
## End-to-End Example: Location Sharing
A complete example showing a custom "location" message type with bubble template, subtitle override, and fetch inclusion.
```typescript expandable theme={null}
import {
Component, ViewChild, TemplateRef, AfterViewInit, inject, OnInit
} from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
MessageBubbleConfigService,
ConversationSubtitleService,
MessageListService,
CometChatMessageListComponent,
CometChatConversationsComponent
} from '@cometchat/chat-uikit-angular';
@Component({
selector: 'app-location-demo',
standalone: true,
imports: [CometChatMessageListComponent, CometChatConversationsComponent],
template: `