Customize color of user's messages

Ask the Community Customization
1

[class*=“dialog-message__Background-sc”] changes only the chatbot bubbles.
How can the user’s bubble background be changed?
Just tell the class name.
Thanks

2 Likes
2

Greetings and welcome aboard, @Giorgio_Fiorini :wave:

This code should do the trick:

[class*="ButtonBase__ButtonContainer-sc"] {
  background-color: red!important;
}

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

1 Like
3

You got it ALL wrong.
I was mentioning the background of user’s dialog message.

bubble2
bubble2732×370 39.9 KB

2 Likes
4

Oh, sorry for misunderstanding!

The thing is that the container of the user’s and bot’s message have the same static class, so the only solution is to use dynamic classes, which will be different for each widget. Here is the code for your Chatbot milanolinfedema.it:

.jSXuMJ [class*="dialog-message__Background-sc"] {
    background-color: red !important;
}

.jSXuMJ [class*="dialog-message__Background-sc"] svg {
    fill: red !important;
}

If you’d like to apply this code to another widgets, you should replace the dynamic class at the beginning of the codes:

image
image605×124 14.7 KB

To find the needed dynamic class, right-click the widget and choose Inspect. After that, press Ctrl+F and type dialog-message into the Search field:

image
image1037×692 190 KB

You’ll see 2 elements with the dialog-message__Container class. You should choose the 2nd one and copy the part before user-render-messages.

Please let me know if it helped or if you have any questions left :slightly_smiling_face:

1 Like
5

Thank you, but how can I change the font color?
Using the command color #something doesn’t work

2 Likes
6

This code will work:

.jSXuMJ [class*="dialog-message__Background-sc"] p {
    color: red;
}
1 Like
7

It works like a charm, thank you very much.
Is there a method to change che left or right position of the [class^=‘FloatingButton__FloatingButtonContainer-sc’], according to @media query?
I have a respionsive layout and I’d like to change the margin position of the AI button according to my @media queries.
Thanks again

2 Likes
8

You’re always welcome :wink:

Sure, this code will help you adjust the position of the bubble based on @media query

@media screen and (max-width: 768px) {
  [class*="FloatingButton__FloatingButtonContainer-sc"] {
    left: 100px;
  }
}
1 Like
9

Thanks a bunch Max, works like a charm :slight_smile:

1 Like
10

One last question if I can ask: what’s the class for the footer, cause I’d like to change the b or strong color. Thanks again.

1 Like
11

Found it: you forato to mention a user message has to be sent in the dialog box, or the dialog-message related to the user won’t show up.
All solved, thanks.

2 Likes
12

Great, you’re welcome :wink:

1 Like
13

One last question: can I change the color of the for of the footer? Thanks

2 Likes
14

Here is the code to change the footer background color and the color of the footer text:

  [class*="footer__Container-sc"] {
    background-color: red;
    color: white;
  }
1 Like
15

Perfect, thank you again!

2 Likes
17

No sweat :wink:

1 Like
18

Thanks weird: suddenly all the dynamic classes changed, in all of the scripts.
I had to replace them manually, one by one.

Was it normal, and will it happen again?

2 Likes
19

Hi @Giorgio_Fiorini :wave:

Yeah, since these are the dynamic classes, they can be changed sometimes. Unfortunately, the elements you’ve customized don’t have constant classes and the only solution is to use the dynamic classes.

2 Likes
20

Thank you max

2 Likes
21

You’re always welcome!

In the meantime, we’d like to invite you to join our new challenge, where you can win 3 FREE months for your subscription. Check the details and participate :wink: - March Challenge: Share your results with Elfsight & win 3 FREE months!:rocket:

2 Likes