AI Chatbot bubble: Match with message bubble?

[Priscilla_OConnor]

Looking for advice or solution:

I have a need for both the all in one chat widget and the ai chatbot widget on my website: https://thechronichaven.com. I like the ability for people to either send a quick message or to use the chatbot to answer questions, but I can’t find a way to get both bubbles to match in styling, and maybe add “Ask a question” in the chatbot bubble, similar to “Send a message” in the bubble above it on the website now.

I found that you provided a custom JS code for another user at the following link, but the custom code does not work on my website.
* Link to the page with the widget in question:

Thanks for any help or advice!

[Max]

Hi there, @Priscilla_OConnor

Please try to use this code in the Custom CSS field on the General tab of your widget’s settings and let me know if you like the result:

.global-styles,
.eapps-ai-chatbot-e7ac1058-6f63-4b11-8dc3-0d7d5df64ccd-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"] button {
  width: 200px !important;
  height: 50px !important;

}

.global-styles,
.eapps-ai-chatbot-e7ac1058-6f63-4b11-8dc3-0d7d5df64ccd-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"] button > span {
  gap: 4px !important;
}

.global-styles,
.eapps-ai-chatbot-e7ac1058-6f63-4b11-8dc3-0d7d5df64ccd-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"] [class*="ButtonBase__Overlay-sc"]:after {
  content: 'Ask a question';
  font-size: 16px;
}

.global-styles,
.eapps-ai-chatbot-e7ac1058-6f63-4b11-8dc3-0d7d5df64ccd-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"] [class*="bubble__BadgeSlot-sc"] {
  transform: translate(85px, -22.6274px) !important;
}

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

[Norton]

@Max this is awesome! Priscilla’s button label buzzes with chat bubble love that, need that for mine. Her “send a message” idea is awesome. Just an observation, when I went to @Priscilla_OConnor website is kinda weird confusing to have 2 chatlogs or 2 chat windows overlapping (See image left screenshot) Also the Messenger is not a real messenger it will be frustrating for a client with a fake messenger, and the icons are external shortcuts for external apps(See image middle screenshot.) The Text message icon only works in a smartphone, desktop version does not work. This will be my suggestion: on the main chat log window(See image screenshot on the right) Move AI disclaimer to the top near the Chatbot name, in its place on the bottom, add “send a quick message” section. In the admin page settings NATIVELY list and add each service shortcut so we can rearrange in the order we want. My pitch “the button label” should be native and allow us to choose on top-of-bubble or side-of-bubble,the text, the color, like the one for @Priscilla_OConnor website theme, or any other color to catch people attention. Also if the button label is on top and the chat is opened, the button label should disappear. Think about it, this will be an immediate solution for Move from AI to Human and WhatsApp Integration instead of asking AI for representative, live agent, or customer service and wasting time with repeated “I am here to assist you repeat and repeat” this shortcuts will be awesome, and efficient, and better than nothing. I know that ideally people want to click in the icon and the chat log gets transfer chat to live agent, WhatsApp Messenger, FB Insta Messenger, but think the links/ icons for the specific external apps on a smartphone makes sense, instead of a live agent icon, that will connect to a live person. In a desktop will be nice to connect the chat to the provider directly without leaving the chat or website, and for that you need to add a Pre-Chat Survey( Client Intake Form)

[Max]

Hi there, @Norton

Thank you so much for such a thorough feedback!

I agree that it would be cool to combine the functionalities of the AI Chatbot and All-in-One Chat in one widget. I’ve added this idea as a separate Wishlist request on your behalf - Combine AI Chatbot with All-in-One Chat

[Priscilla_OConnor]

This worked pretty well, thank you! It’s not quite a match as far as styling (padding, font), but this will work and looks better than it did!

[Priscilla_OConnor]

I was thinking the same thing - to combine the two would be great, or have the AI chatbot ask if the visitor would like to leave a message, as an option.

[Max]

Hi there, @Priscilla_OConnor

I’ve adjusted the font-weight and height values, so the Chatbot bubble looks more similar to the All-in-One Chat bubble:

I’d like to note that if you wish, you can use another icon for the bubble:

Regarding the bubble icon and paddings, I’ll contact our devs and they’ll provide a solution. I’ll get back to you tomorrow

[Max]

Hi there, @Priscilla_OConnor

We’ve adjusted the appearance of the chatbot bubble. Here is the final code:

.global-styles,
.eapps-ai-chatbot-e7ac1058-6f63-4b11-8dc3-0d7d5df64ccd-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"] button {
  width: 200px !important;
  height: 41.1125px !important;
}

.global-styles,
.eapps-ai-chatbot-e7ac1058-6f63-4b11-8dc3-0d7d5df64ccd-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"] button > span {
  justify-content: flex-start !important;
}

.global-styles,
.eapps-ai-chatbot-e7ac1058-6f63-4b11-8dc3-0d7d5df64ccd-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"] [class*="ButtonBase__Overlay-sc"]:after {
  content: 'Ask a question';
  font-size: 16px;
  font-weight: 700;
}

.global-styles,
.eapps-ai-chatbot-e7ac1058-6f63-4b11-8dc3-0d7d5df64ccd-custom-css-root [class*="FloatingButton__FloatingButtonContainer-sc"] [class*="bubble__BadgeSlot-sc"] {
  transform: translate(85px, -22.6274px) !important;
}

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

[class*='ButtonBase__ButtonIcon-sc'] {
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px;
  margin-left: -4px;
}

[class*='ButtonBase__ButtonIcon-sc']
  svg {
  width: 20px !important;
  height: 20px !important;
}

[class*='ButtonBase__Overlay-sc'] {
  padding: 10px 25px !important;
}

Please check your website and let me know if you like the result

[Priscilla_OConnor]

This looks great! Check it out.