Chatbot Avatar Attaches Itself to Collect Contacts Bubble

Ask the Community General Questions
1

Hi Team,

When the ‘Collect Contacts’ skill is enabled, the chatbot Avatar attaches itself to the chatbot’s "Collect Contacts’ bubble instead of the chatbot’s answer bubble. See below. This makes the UI look awkward and out of place.

Can you guys look into that and advise? Fix appreciated.

Thank you!

ai-chatbot-avatar-position-skills-enabled
ai-chatbot-avatar-position-skills-enabled986×884 53 KB

3

Hi there, @Petar_Dietrich :waving_hand:

In this case, we’ll need to adjust the CSS code that adds an avatar to the messages. Just to clarify, do you want to display an avatar only next tp the message above the form or should the message with the form include the avatar too?

4

Hi @Max,

What was the intent of the feature you provided below? Attach an Avatar to every single chatbot response (including ‘Collect Contacts’)?

Please review and advise. We’re using the CSS rules noted below (modified to align the Avatar next to the top of the bubble).

Thank you!

/* Add Avatar to Chatbot Response Bubble and Align to Top */

.es-message-assistant {
  padding-left: 45px;
  box-sizing: border-box;
  position: relative;
}

.es-message-assistant:last-child::before {
  content: '';
  background: url('https://files.elfsightcdn.com/myicon'); // dummy URL
  position: absolute;
  left: 0;
  top: 4px;
  transform: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
5

The intent was to show an avatar for all bot messages and I see it’s currently missing from the first message.

The first message and the form message are considered two separate bot messages, so based on the current logic, the avatar should appear next to both of them.

Does this behavior work for you? I’m asking because you mentioned that you’d prefer the avatar only on the first message and not next to the form.

6

Note: In response to your question, it would be great if the Avatar attached itself to all bubbles generated by the chatbot. :slight_smile:

7

Got it, thanks! I’ve passed it on to the devs and will let you know once the code is adjusted :slightly_smiling_face:

8

Here is the adjusted CSS code:

.es-message-assistant {
  padding-left: 45px;
  box-sizing: border-box;
  position: relative;
}

.es-message-assistant::before {
  content: '';
  background: url('Your_URL');
  position: absolute;
  left: 0;
  top: 4px;
  transform: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

If you’d like to display an avatar next to the message tail, please set top value to 0px

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

9

Thank you, @Max! That worked. May I ask you a favor? Can you sanitize (obfuscate) the URL inside the adjusted CSS rule you provided? Also, please consider updating your official post to reflect your adjusted CSS rules. Again, thank you!

10

Sure, I’ve removed the URL and will update the post. Thanks for the feedback!