Product Update: Call Screen Customization - CometChat

We're excited to announce and introduce custom CSS for the Call Screen. It will let you make simple customizations to the CometChat call screen.

Harsha Patil • Apr 27, 2021

We're excited to announce and introduce you to custom CSS, which means you'll be able to make simple customizations to the CometChat call screen, such as changing

  • The background color of the call screen

  • The font and size of the participant's name in the call

  • The background color and shape of the provided default buttons

  • The size of the participant screen in tile and spotlight mode

Technically custom CSS, allows you to add or replace CSS of the existing call screen. It provides flexibility to change the user interface of your web application programmatically.

Let's get started to know more and see how the screens look on making changes using custom CSS.

Changes in Call Screen Using Custom CSS

In the Tile mode: you can move the participant's window anywhere in the call screen i.e aligned left, top, or to the bottom depending on your design or requirement.

tile mode default

Default Tile mode of CometChat Call Screen

tile mode top

Customized Tile: Showing participants at the top

tile mode bottom

Customized Tile: Showing participants at the bottom

Options to change the background color, font of the participants name or size of participants screen etc.

default screen

Default CometChat Call Screen

customized screen

Customized call screen with different background color and font

If that sounds exciting, please try it out and send us feedback to know on how Custom CSS is helping you.

Support for Customization of Call Screen

You may this feature only for the web platforms i.e. using CometChat Javascript SDK, Angular, Vue, React UI Kits or Web Chat Widgets.

We provide an option to set custom CSS property for the SDKs and UI Kits. Please go through the custom CSS documentation.

For the Chat widgets, you have an option on the CometChat dashboard under customize settings of chat widgets to update Custom CSS.


Custom CSS settings for Chat widgets

Feature availability

Please note, Customization of Call Screen is available with all CometChat plans

Sign in to your CometChat dashboard to check out these new features. New to CometChat? Get Started for Free

About the Author

Harsha Patil



Share it with everyone!

Try out CometChat in action

Experience CometChat's messaging with this interactive demo built with CometChat's UI kits and SDKs.