Skip to main content
/* Key CSS classes for call UI customization */
.cc-main-container { }           /* Outermost call container */
.cc-bottom-buttons-container { } /* Bottom action buttons bar */
.cc-name-label { }               /* User name text */
.cc-video-container { }          /* Video feed container */
.cc-end-call-icon-container { }  /* End call button */
.cc-audio-icon-container { }     /* Audio toggle button */
.cc-video-icon-container { }     /* Video toggle button */
.cc-screen-share-icon-container { } /* Screen share button */
Modes: DEFAULT | TILE | SPOTLIGHT
Style the calling UI with custom CSS to match your application’s design.

​
Common CSS Classes

These classes are available across all call modes:
ClassDescription
cc-main-containerOutermost container for the calling component
cc-bottom-buttons-containerBottom bar containing action buttons (mute, end call, etc.)
cc-name-labelUser name text container
cc-video-containerVideo feed container

​
Bottom Buttons

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

​
Individual Button Classes

  • cc-audio-icon-container — Audio toggle button
  • cc-audio-icon-container-muted — Audio button (muted state)
  • cc-video-icon-container — Video toggle button
  • cc-video-icon-container-muted — Video button (muted state)
  • cc-screen-share-icon-container — Screen share button
  • cc-switch-video-icon-container — Switch camera button
  • cc-end-call-icon-container — End call button

​
Example

.cc-end-call-icon-container {
  background-color: green;
}
.cc-audio-icon-container {
  background-color: blue;
}
.cc-video-icon-container {
  background-color: blue;
}
.cc-audio-icon-container-muted {
  background-color: orange;
}
.cc-video-icon-container-muted {
  background-color: orange;
}
.cc-switch-video-icon-container {
  background-color: blue;
}
.cc-screen-share-icon-container {
  background-color: blue;
}
.cc-main-container {
  border: 2px dotted white;
}
.cc-video-container {
  border: 2px dotted orange;
}
.cc-bottom-buttons-container {
  border: 2px dotted red;
}
.cc-name-label {
  border: 2px dotted green;
}
The above example results in the below output:- Mode: DEFAULT
Mode: TILE
Mode: SPOTLIGHT 
.cc-bottom-buttons-icon-container {
  height: 50px !important;
  width: 50px !important;
}

.cc-audio-icon-container {
  background-color: #0073ff !important;
  border-radius: 4px !important;
}

.cc-video-icon-container {
  background-color: #0073ff !important;
  border-radius: 4px !important;
}

.cc-screen-share-icon-container {
  background-color: #0073ff !important;
  border-radius: 4px !important;
}

.cc-end-call-icon-container {
  background-color: #ab0090 !important;
  border-radius: 4px !important;
  margin-left: 50px !important;
}

.cc-bottom-buttons.cc-bottom-buttons-container {
  gap: 25px !important;
}

.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;
}

.cc-name-label {
  background-color: #0073ff !important;
}

.bottom-buttons-other-options {
  gap: 20px !important;
}
The above example results in the below output:-

​
Guidelines

  • Only use CSS classes documented here — custom classes may cause UI issues
  • Avoid resizing the grid container to prevent layout distortions

​
Next Steps

Video View Customization

Customize video call layout and participant tiles

Virtual Background

Apply blur or custom image backgrounds during calls

Presenter Mode

Enable screen sharing and presentation mode

Calling Overview

Overview of all calling features and approaches