Customizing Your UI Kit Builder

The cometchat-builder-settings.json file handles basic feature toggles. For deeper customizations, use the component inputs or modify the exported source directly.

App-Level Customizations

These inputs on the <cometchat-app /> component let you adjust what the chat opens on, without modifying any internal components.

Input	Type	Default	What it does
`user`	`CometChat.User`	`undefined`	Opens a one-to-one conversation with this user on load
`group`	`CometChat.Group`	`undefined`	Opens this group on load
`defaultActiveTab`	`'chats' \| 'calls' \| 'users' \| 'groups'`	`'chats'`	Which tab the sidebar starts on

Start on a Specific Tab

<cometchat-app [defaultActiveTab]="'groups'" />

Open a Specific Conversation

src/app/app.component.ts

import { Component, signal } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatAppComponent } from './cometchat-app.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CometChatAppComponent],
  template: `
    <div class="chat-container">
      <cometchat-app [user]="supportAgent()" />
    </div>
  `,
  styles: [`.chat-container { height: 100vh; }`],
})
export class AppComponent {
  readonly supportAgent = signal<CometChat.User | undefined>(undefined);

  constructor() {
    CometChat.getUser('cometchat-uid-2').then((u) => this.supportAgent.set(u));
  }
}

Rebinding user or group switches conversation without remounting, so you can move the chat between conversations by changing the bound value rather than destroying and recreating the component.

When both user and group are bound, the Builder’s chatType setting decides which one wins. Set it to "user" or "group" in your settings file.

Component-Level Customizations

For more advanced customizations, you can modify the UI Kit components used inside the exported code.

How to Customize

Find the component in the UI Kit Components Overview
Check available inputs and customization options
Update inputs in the exported templates, or edit the component source

Angular’s UI Kit takes custom views as TemplateRef inputs — you declare an <ng-template> and pass it in, rather than passing a render function. Below are some examples to help you get started.

Custom Date Format

Customize how sticky date headers appear in the message list. Component: Message List → stickyDateTimeFormat

import { Component, Input } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatMessageListComponent } from '@cometchat/chat-uikit-angular';
import type { CalendarObject } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-dates',
  standalone: true,
  imports: [CometChatMessageListComponent],
  template: `
    <cometchat-message-list
      [user]="chatUser"
      [stickyDateTimeFormat]="dateFormat"
    />
  `,
})
export class CustomDatesComponent {
  @Input() chatUser?: CometChat.User;

  // CalendarObject is an interface, so pass a plain object rather than `new`.
  dateFormat: CalendarObject = {
    today: 'hh:mm A',        // "10:30 AM"
    yesterday: '[Yesterday]',
    otherDays: 'DD/MM/YYYY', // "25/05/2025"
  };
}

Default format (for reference):

const defaultFormat: CalendarObject = {
  today: 'Today',
  yesterday: 'Yesterday',
  otherDays: 'DD MMM, YYYY', // "25 Jan, 2025"
};

The message list also accepts separatorDateTimeFormat, messageSentAtDateTimeFormat and messageInfoDateTimeFormat. See Date & Time Formatting.

Custom Conversation Subtitle

Show online status or member count instead of the default last message preview. Component: Conversations → subtitleView

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatConversationsComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-subtitle',
  standalone: true,
  imports: [CommonModule, CometChatConversationsComponent],
  template: `
    <cometchat-conversations [subtitleView]="customSubtitle">
      <ng-template #customSubtitle let-conversation>
        <span>{{ describe(conversation) }}</span>
      </ng-template>
    </cometchat-conversations>
  `,
})
export class CustomSubtitleComponent {
  describe(conversation: CometChat.Conversation): string {
    const with_ = conversation.getConversationWith();

    if (conversation.getConversationType() === 'user') {
      const user = with_ as CometChat.User;
      return user.getStatus() === 'online' ? '🟢 Online' : '⚫ Offline';
    }

    const group = with_ as CometChat.Group;
    return `${group.getMembersCount()} members`;
  }
}

To change a single element — just the avatar, or just the timestamp — use the slots input instead of replacing the whole subtitle section.

Custom Send Button

Replace the default send button with your brand’s icon. Component: Message Composer → sendButtonView

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatMessageComposerComponent } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-custom-send',
  standalone: true,
  imports: [CommonModule, CometChatMessageComposerComponent],
  template: `
    <cometchat-message-composer
      [user]="chatUser"
      [sendButtonView]="customSendButton"
    >
      <ng-template #customSendButton>
        <button class="custom-send-btn" aria-label="Send message">
          <span class="send-icon">➤</span>
        </button>
      </ng-template>
    </cometchat-message-composer>
  `,
  styles: [`
    .custom-send-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: var(--cometchat-primary-color);
      color: var(--cometchat-static-white);
      border: none;
      border-radius: 50%;
      cursor: pointer;
    }
  `],
})
export class CustomSendComponent {
  @Input() chatUser?: CometChat.User;
}

Use the UI Kit’s CSS variables (--cometchat-primary-color and friends) in your own styles rather than hard-coded hex values. Your Builder brand color then flows through automatically, and it keeps working when the theme switches between light and dark.

Styling with CSS Variables

The quickest way to restyle without touching components is to override the UI Kit’s CSS variables. Your Builder theme already writes these — you can narrow or extend them.

/* Applies everywhere the chat renders */
cometchat-app {
  --cometchat-primary-color: #6852d6;
  --cometchat-text-color-primary: #141414;
  --cometchat-text-color-secondary: #727272;
}

/* Or scope to one component */
cometchat-app .cometchat-message-composer {
  --cometchat-background-color-02: #f5f5f5;
}

The export applies your Builder colors as inline variables on the document element. Overrides scoped to cometchat-app or a component class will win over those for the elements they cover.

See Theming for the full variable reference, and Message Bubble Styling for bubble-specific options.

Next Steps

UI Kit Builder Settings

Configure feature toggles and behavior

Components Overview

Explore all available UI components

Theming

Customize colors, typography, and styling

Localization

Add multi-language support

​App-Level Customizations

​Start on a Specific Tab

​Open a Specific Conversation

​Component-Level Customizations

​How to Customize

​Custom Date Format

​Custom Conversation Subtitle

​Custom Send Button

​Styling with CSS Variables

​Next Steps

UI Kit Builder Settings

Components Overview

Theming

Localization

App-Level Customizations

Start on a Specific Tab

Open a Specific Conversation

Component-Level Customizations

How to Customize

Custom Date Format

Custom Conversation Subtitle

Custom Send Button

Styling with CSS Variables

Next Steps