All-in-One Chat bubble customization

Ask the Community Customization
1

Thank you very much, Max. I didn’t know of the existence of such a page and had a look for it. I guess CSS Codes - Elfsight Community is the page you are referring to?
That will certainly be helpful for people like me who can often find what’s needed by mixing and matching the various instructions found!

Like yesterday, when I found on the platform your reply to someone else’s question to style the all-in-one chat button. So I finally could see the corrects selector. Changing the chat button worked perfectly, BUT… it seems to affect another button (the simple button from the app called ‘Button’), which led to weird effects.

It is the code you published when someone asked to make the chat button smaller:

.global-styles, [class^=‘FloatingButton__FloatingButtonContainer-sc’] {
transform: scale(0.8)
}

My chat button is bigger than my simple Button, and I try to make them identical because they are sitting next to another (see picture). But if I add code to the chat button, the simple Button responds to it too! So I need to find a way to make the selector more specific, so it applies only to the chat button without other buttons responding to it. I would like to reduce the height of the chat button and give the chat button an identical border and shadow that comes as a preset on the other button.
But when I do so using the class
.global-styles, class^=‘FloatingButton__FloatingButtonContainer-sc’],
then the other button also shrinks and gets an extra border too!
I also think that the font-size and the icon inside the chat button should be larger. On the ‘Button’ app, I have the icon customised and the font-size can be set in the presets, but can’t find a way to address either of these in the chat button.
Kind regards,
Ingrid
PS: visible with the URL https://edit-mode-reflections.squarespace.com and using the password ‘elfsight’ :blush: (but only the homepage ready so far. All the rest is just a copy of a previous websites I made/managed).

image
image1920×1005 95.6 KB

1 Like
3

@Ingrid_van_Waard Thank you for the detailed description of your use case!

Your request is with our devs now. I’ll let you know once I receive a response from them :slightly_smiling_face:

4

Thank you, Max. Please note, I also invited support@elfsight.com already a while ago as an Admin, so they can also see how things look in editing mode.
And this is a screenshot of how it looks on mobile. Would be nice to get them identical.

image
image767×961 117 KB

1 Like
5

Hi @Ingrid_van_Waard :wave:

Thank you for waiting!

Here are the solutions provided by our devs:

  1. Change the bubble size:
.global-styles,
[class*="eapps-all-in-one-chat-"]
[class*="FloatingButton__FloatingButtonContainer-sc-"] {
  transform: scale(0.8);
}
  1. Change size of the bubble icon and text:
.global-styles,
[class*="eapps-all-in-one-chat-"]
[class*="FloatingButton__FloatingButtonContainer-sc-"] 
[class*="Icon__IconContainer-sc-"] svg {
  width: 30px;
  height: 30px;
}

.global-styles,
[class*="eapps-all-in-one-chat-"]
[class*="FloatingButton__FloatingButtonContainer-sc-"] 
[class*="BubbleContent__BubbleContentText-sc-"] {
  font-size: 20px;
}
  1. Add shadow and border to the chat bubble:
.global-styles,
[class*="eapps-all-in-one-chat-"]
[class*="Bubble__BubbleComponent-sc-"] {
  border: 2px solid #ee9c1d !important;
  box-shadow: 2px 2px 10px 0px #717171;
}

Please test it out and let me know if you like the results :slightly_smiling_face:

6

Thanks, Max! I’m not at the laptop right now, but can’t wait to try this out!
I can see how you made the selector much better app-specific, so this should indeed prevent the other app from hopping along on this code.

I can see you even filled out all the settings already, not just the framework. I see that my hex-code, icon-size, font-size, box-shadow have already been set to make it identical to the other button that it should resemble! Ready to plop in! What a service!!!

I’m sure I will like it, because now that you gave me the structure of the code, I can always change things around until it looks perfect.

It always leaves me grateful to get such fantastic support, but also feeling a bit embarrassed like… Why did I not think of adding [class*=“eapps-all-in-one-chat-”] in front of the other selector if it had to be more specific? :joy: But then, as an amateur, we never get every bracket and detail 100% correct, and if just one character is wrong, nothing works! So we need you and the devs!
Many thanks,
Ingrid

@jean @Helga Just an example, Jean, to underline what I said in reply to your post on another thread. I tried to make buttons from different apps look identical, and see how far they go to help! Don’t think Wix gives you that kind of support, with a code fully written just for you and received the next working day?

2 Likes
7

@Ingrid_van_Waard Wow, thanks a million for your fantastic feedback! It means the world to us :heart:

Hope the codes will work for you and if anything comes up, I am here to help :wink:

8

Hi Max,
it’s all in there and works a dream!
I only had to change the oval shape of the chat button to a radius 12px, so changed the border code to
border-color: #ee9c1d!important; border-width: 2px !important; border-style: solid !important;
border-radius: 12px!important;
but that was easy peasy! I tinkered a little with both buttons to get all the distances and sizes equal, so one is on scale 0.96 and the other on 0.9, and I had to give the chat-bubble icon a negative margin left and top as it pushed over the text and sat too low. But I think they are now exactly matching (one has 2px more margin-bottom than the other to get the same result). A very neat trio! I’d wish I had everything for my new website for Reflections Webdesign & Marketing as ready as the buttons :joy:
Thanks again!
Ingrid

image
image1541×1506 141 KB