Skip to main content
Version: v6

Builder Settings Guide

The builderSettings.ts file defines configuration options for CometChat Builder, giving developers full control over messaging capabilities, AI enhancements, UI layout, styling, and moderation tools.

1. Chat Features​

Core Messaging Experience​

These options enable essential messaging functionalities:

"coreMessagingExperience": {
  "typingIndicator": true,
  "threadConversationAndReplies": true,
  "photosSharing": true,
  "videoSharing": true,
  "audioSharing": true,
  "fileSharing": true,
  "editMessage": true,
  "deleteMessage": true,
  "messageDeliveryAndReadReceipts": true,
  "userAndFriendsPresence": true
}
  • typingIndicator → Displays when a user is typing.
  • threadConversationAndReplies → Enables threaded replies.
  • Media Sharing: photosSharing, videoSharing, audioSharing, fileSharing
  • Editing: editMessage, deleteMessage
  • Status: messageDeliveryAndReadReceipts, userAndFriendsPresence

Deeper User Engagement​

Enhance user interaction with richer messaging options:

"deeperUserEngagement": {
  "mentions": true,
  "reactions": true,
  "messageTranslation": true,
  "polls": true,
  "collaborativeWhiteboard": false,
  "collaborativeDocument": false,
  "voiceNotes": false,
  "emojis": true,
  "stickers": true,
  "userInfo": true,
  "groupInfo": true
}
  • mentions → Tag users using @mention.
  • reactions → Emoji reactions to messages.
  • messageTranslation → Instant translation of messages.
  • polls → Create and vote on polls.
  • collaborativeWhiteboard, collaborativeDocument → Real-time co-creation (currently disabled).
  • voiceNotes → Send recorded voice messages (currently disabled).
  • emojis, stickers → Express with visual elements.
  • userInfo, groupInfo → Enable viewing detailed user and group profiles.

AI User Copilot​

AI-powered tools to boost communication efficiency:

"aiUserCopilot": {
  "conversationStarter": true,
  "conversationSummary": true,
  "smartReply": true
}
  • conversationStarter → AI-suggested chat openers.
  • conversationSummary → Summarize long threads automatically.
  • smartReply → AI-generated quick replies.

Group Management​

Enable users to manage groups and members:

"groupManagement": {
  "createGroup": true,
  "addMembersToGroups": true,
  "joinLeaveGroup": true,
  "deleteGroup": true,
  "viewGroupMembers": true
}
  • Create, join, leave, or delete groups.
  • View members and add new ones.

Moderator Controls​

Give moderators the tools to manage group integrity:

"moderatorControls": {
  "kickUsers": true,
  "banUsers": true,
  "promoteDemoteMembers": true
}
  • Kick or ban misbehaving users.
  • Change user roles (admin/member).

Private Messaging within Groups​

One-on-one messaging inside group chats:

"privateMessagingWithinGroups": {
  "sendPrivateMessageToGroupMembers": true
}
  • Allows sending private DMs to group participants directly from the group context.

2. Call Features​

Control real-time voice and video communication:

"callFeatures": {
  "voiceAndVideoCalling": {
    "oneOnOneVoiceCalling": true,
    "oneOnOneVideoCalling": true,
    "groupVideoConference": true,
    "groupVoiceConference": true
  }
}
  • One-on-One: Voice and video calling.
  • Group: Video conferencing and voice-only calls.

3. Layout Customization​

Customize how the chat UI looks and navigates:

"layout": {
  "withSideBar": true,
  "tabs": ["chats", "groups", "users", "calls"],
  "chatType": "user"
}
  • withSideBar → Show/hide the sidebar.
  • tabs → Define which sections (and order) are present in navigation.
  • chatType → Default view: "user" or "group" chat.

4. Styling & Theme Customization​

Manage the look & feel of the chat experience.

"style": {
  "theme": "system",
  "color": {
    "brandColor": "#df4343",
    "primaryTextLight": "#df4343",
    "primaryTextDark": "#FFFFFF",
    "secondaryTextLight": "#727272",
    "secondaryTextDark": "#989898"
  },
  "typography": {
    "font": "Sans-serif",
    "size": "Default"
  }
}

Theme​

  • theme: "system" (inherits from OS), "light", or "dark".

Colors​

  • brandColor → Accent color used throughout UI.
  • Text Colors: Separate values for light and dark mode (primaryText*, secondaryText*).

Typography​

  • font → Global font family.
  • size → "Default", "Compact", or "Comfortable".

Summary​

The builderSettings.ts file gives you end-to-end configuration of your CometChat-powered app—from feature toggles to layout and theming.

Use this guide as your go-to reference when:

  • Customizing chat or call functionality
  • Enabling AI features
  • Managing group or user interactions
  • Personalizing the UI for your brand