Skip to main content
Quick Reference for AI Agents & Developers
/* Key CSS classes for call UI customization */
.cc-main-container { }              /* Outer container */
.cc-video-container { }             /* Video stream container */
.cc-bottom-buttons-container { }    /* Button bar */
.cc-name-label { }                  /* Participant name */

/* Button classes */
.cc-audio-icon-container { }        /* Mute button */
.cc-audio-icon-container-muted { }  /* Muted state */
.cc-video-icon-container { }        /* Video button */
.cc-end-call-icon-container { }     /* End call button */
Customize the appearance of the call screen using CSS classes to match your application’s branding and design system.

​
Overview

CometChat’s calling UI exposes CSS classes that you can override to customize colors, sizes, positions, and other visual properties.
Only use CSS classes documented here. Using undocumented classes may cause unexpected UI issues in future updates.

​
Common CSS Classes

These classes are available across all call modes (Default, Tile, Spotlight):
ClassDescription
.cc-main-containerOutermost container wrapping the entire call UI
.cc-bottom-buttons-containerContainer for action buttons at the bottom
.cc-name-labelParticipant name label overlay
.cc-video-containerIndividual video stream container

​
Button Classes

​
Container Classes

ClassDescription
.cc-bottom-buttons-containerContainer for all bottom buttons
.cc-bottom-buttons-icon-containerIndividual button wrapper

​
Individual Button Classes

ClassDescription
.cc-audio-icon-containerMute/unmute audio button
.cc-audio-icon-container-mutedAudio button when muted
.cc-video-icon-containerPause/resume video button
.cc-video-icon-container-mutedVideo button when paused
.cc-screen-share-icon-containerScreen share button
.cc-switch-video-icon-containerSwitch camera button
.cc-end-call-icon-containerEnd call button

​
Basic Example

/* Main container border */
.cc-main-container {
  border: 2px solid #333;
  border-radius: 12px;
}

/* Video container styling */
.cc-video-container {
  border-radius: 8px;
  overflow: hidden;
}

/* Name label styling */
.cc-name-label {
  background-color: rgba(0, 0, 0, 0.6) !important;
  border-radius: 4px;
  padding: 4px 8px;
}

/* Button container */
.cc-bottom-buttons-container {
  background-color: rgba(0, 0, 0, 0.8) !important;
  border-radius: 12px;
  padding: 12px 24px;
}

​
Button Styling Example

Customize button colors and states: 
/* All buttons - base size */
.cc-bottom-buttons-icon-container {
  height: 48px !important;
  width: 48px !important;
  border-radius: 50% !important;
}

/* Audio button - active state */
.cc-audio-icon-container {
  background-color: #0073ff !important;
}

/* Audio button - muted state */
.cc-audio-icon-container-muted {
  background-color: #ff4444 !important;
}

/* Video button - active state */
.cc-video-icon-container {
  background-color: #0073ff !important;
}

/* Video button - muted state */
.cc-video-icon-container-muted {
  background-color: #ff4444 !important;
}

/* Screen share button */
.cc-screen-share-icon-container {
  background-color: #0073ff !important;
}

/* End call button - make it stand out */
.cc-end-call-icon-container {
  background-color: #ff0000 !important;
  margin-left: 24px !important;
}

/* Button spacing */
.cc-bottom-buttons.cc-bottom-buttons-container {
  gap: 16px !important;
}

​
Mode-Specific Styling

The call UI supports different layout modes. Here’s how they look with custom styling:

​
Default Mode

Grid layout showing all participants equally:

​
Tile Mode

Tiled layout with flexible arrangement:

​
Spotlight Mode

Focus on active speaker with thumbnails:

​
Complete Branding Example

/* Brand colors */
:root {
  --brand-primary: #0073ff;
  --brand-danger: #ff4444;
  --brand-dark: rgba(0, 0, 0, 0.8);
}

/* Button sizing */
.cc-bottom-buttons-icon-container {
  height: 50px !important;
  width: 50px !important;
}

/* Active state buttons */
.cc-audio-icon-container,
.cc-video-icon-container,
.cc-screen-share-icon-container {
  background-color: var(--brand-primary) !important;
  border-radius: 4px !important;
}

/* Muted state buttons */
.cc-audio-icon-container-muted,
.cc-video-icon-container-muted {
  background-color: orange !important;
}

/* End call button */
.cc-end-call-icon-container {
  background-color: var(--brand-danger) !important;
  border-radius: 4px !important;
  margin-left: 50px !important;
}

/* Button container spacing */
.cc-bottom-buttons.cc-bottom-buttons-container {
  gap: 25px !important;
}

/* Video placeholder pattern */
.side-bar-main-user-video video {
  background-color: black !important;
  background-image: repeating-conic-gradient(
    #0073ff2a 0% 25%,
    #00000031 0% 50%
  ) !important;
  background-position: 0 0, 10px 10px !important;
  background-size: 20px 20px !important;
}

/* Name label */
.cc-name-label {
  background-color: var(--brand-primary) !important;
}

/* Other options spacing */
.bottom-buttons-other-options {
  gap: 20px !important;
}
Result:

​
Best Practices

CometChat’s styles have specificity. Use !important only when necessary to override default styles.
Avoid changing the grid container’s dimensions as it can break the layout algorithm.
Test your CSS changes in Default, Tile, and Spotlight modes to ensure consistency.
Define brand colors as CSS variables for easier maintenance and consistency.

​
Next Steps

Video Customization

Customize video container settings

Virtual Background

Add blur or custom backgrounds