Change ai-chat Bubble Icon Size

Ask the Community Customization
1

I would like to be able to make the icon larger so you can see the image I uploaded.
Currently you are only able to make the bubble surrounding the icon larger.

3 Likes
2

Hi @Sean_Piscitelli welcome to community :clap:

add this code to the Custom CSS field on the General tab of your AI-Chatbot widget’s settings:

[class*="ButtonBase__Overlay-sc"]{
  transform: scale(1.4);
}
5 Likes
4

Hi there, @Sean_Piscitelli and welcome to the Community :wave:

@Sina, thank you so much for your help! Your code works, but it enlarges the notification badge as well.

I’ll discuss with the devs if it’s possible to change the size of the icon separately and update you tomorrow :slightly_smiling_face:

3 Likes
5

Hi, the icon separately

[class*="injected-svg"]{
  transform: scale(1.4);
}
3 Likes
6

@Sina, Unfortunately, this code didn’t work, but I’ve found the solution:

[class*="ButtonBase__ButtonIcon-sc"] {
 scale: 1.4;
}

@Sean_Piscitelli Could you please test it?

3 Likes
7

Hey @Sina :wave:
Thanks for this script :slight_smile:
It works for me soo… thank you so much! :wink:

2 Likes
8

Thank you @Max. The code worked.
I appreciate you helping as well @Sina

3 Likes
9

Great, you’re always welcome :wink:

2 Likes
10

Hey there @Max and @Sina,

I have a related question which I think belongs to this topic too. I’ve matched size with a fellow bubble on desktop:

Schermafbeelding 2025-07-16 081625
Schermafbeelding 2025-07-16 081625765Ă—240 30 KB

But the size relation is different on mobile devices:

Screenshot_20250716-081702~2
Screenshot_20250716-081702~2820Ă—226 39.6 KB

How can I use the solution you guys provided but only have it applied to the bubble shown on mobile devices so I can match height there too? Ideally, the resizing will have the bubbles right down corner as the fixed point.

Thanks in advance!

3 Likes
11

Hi @fcweesp.nl

For mobile view, simply enter the code in the media instruction.

@media (max-width: 500px) {
your css code
}

@media (max-width: 500px) {
  [class*="ButtonBase__ButtonIcon-sc"] {
  scale: 1.4;
  }
}
3 Likes
12

Hi @fcweesp.nl :waving_hand:

And if you need to change the size of the whole bubble (not just the icon) on mobile, this code will work great for you :slightly_smiling_face:

@media (max-width: 500px) {
[class*="ButtonBase__ButtonContainer"] {
  scale: 1.4;
}
}
3 Likes
13

Thanks for the code snippets! I made it into this:

@media (max-width: 500px) {
[class*=“ButtonBase__ButtonContainer”] {
scale: 1.37;
bottom: 8px;
right: 10px;
}
}

It worked for the whole bubble except for the ripple effect. So, I’ve tried to apply the exact same values on the ripple class (“AnimationFrame__Frame-sc”) but only the scale got applied. Not the positional values. What needs to be done in order to also move the ripple effect with/around the button?

2 Likes
14

Hi there, @fcweesp.nl :waving_hand:

Here is the code for changing the scale and position of the bubble and its animation on mobile:

@media (max-width: 500px) {
  [class*="ButtonBase__ButtonContainer"] {
    scale: 1.37;
  }
  [class*="AnimationFrame__Frame-sc"] {
    scale: 1.37;
  }
  [class*='FloatingButton__FloatingButtonContainer-sc'] {
    margin: 16px 20px !important;
  }
}

The 1st margin value is vertical offset, and the 2nd one - horizontal.

Please check it out and let me know how it worked :wink:

2 Likes
15

Worked perfectly, thanks!

3 Likes
16

It’s my pleasure!

We’re always here to help if anything comes up :wink:

1 Like