Increasing size of chat box, font, and chat icon

Ask the Community Customization
1

Hello!

Hoping to get some CSS help with customizing the sizing of all of these elements? This might be a good idea to add to widget customizations as well :slight_smile:

4

Hi there, @lwaterskatz :waving_hand:

Could you please specify what you mean under the chat icon? It is a bubble icon (1) or icons of the chat sources (2)?

image
image431×484 32.5 KB

5

Hey there @Max! Number 1 and the entire popup :slight_smile:

6

Got it, thanks!

  1. Here is the code to change the size of the bubble icon:
[class*='FloatingButton__FloatingButtonContainer-sc'] [class*='Icon__IconContainer-sc'],
[class*='FloatingButton__FloatingButtonContainer-sc'] img{
  width: 30px!important;
  height: 30px!important;
}

  1. These codes will help you change the size of the text elements in the widget:

Button Text


[class*="ButtonBase__Overlay-sc"] {
  font-size: 30px;
}

Welcome Message

[class*='ChatLayout__Text-sc'] {
  font-size: 20px;
}

Name in the Header

[class*="Header__Name-sc"] {
  font-size: 20px;
}
  1. This code will increase the size of the chat window:
.global-styles, [class^="Window__Content-sc"] {
transform: scale(1.1)
}

  1. After increasing the size of the chat window, it may cover the chat bubble. To avoid, you can move up the chat window, using this code:
[class*='FloatingWindow__Container-sc'] {
  bottom: 180px!important;
}

Check it out and let me know if it helped :slightly_smiling_face:

7

Thank you so much!! is there a way to shrink the font in the buttons all while keeping the font in the chat different. Also increasing the image size, time stamp, and closing X? These codes are amazing!

Screenshot 2025-05-08 at 1.23.21 AM
Screenshot 2025-05-08 at 1.23.21 AM858×1304 119 KB

9

Hi there, @lwaterskatz :waving_hand:

Sure! To adjust the text size, please remove this code from the widget:

[class*="ButtonBase__Overlay-sc"] {
  font-size: 30px;
}

And here is the code to independently change the font size in the chat bubble and chat buttons:

[class*="ChatButton__DefaultButtonComponent-sc"]
[class*="ButtonBase__Ellipsis-sc"] {
  font-size: 12px;
}

[class*="FloatingButton__FloatingButtonContainer-sc"]
[class*="ButtonBase__Ellipsis-sc"] {
  font-size: 29px;
}

Change size of avatar:

[class*="Avatar__Container-sc-"] {
  scale: 1.5;
}

Change size of Close button

[class*="Close__Component-sc"] {
  scale: 1.5;
}

Change size of time stamp

[class*="ChatLayout__Time-sc"] {
  scale:1.5;
}

Please try it out and let me know how it worked :slightly_smiling_face: