By default, messages from the user and the AI Chatbot are mainly separated by color.
A simple way to make chatbot replies easier to recognize is to add a small avatar next to assistant messages. It helps visitors spot chatbot replies faster and follow the conversation more easily.
Here’s the difference before and after adding the avatar:
How to implement it
Add a CSS code to the widget
Go to your AI Chatbot widget settings → Settings tab → Custom CSS field, and add this code:
.es-message-assistant {
padding-left: 45px;
box-sizing: border-box;
}
.es-message-assistant:last-child::before {
content: '';
background: url('https://files.elfsightcdn.com/eafe4a4d-3436-495d-b748-5bdce62d911d/bcc00d80-e5e8-446a-88d8-02bbd1900adf/images-14-.jpg');
position: absolute;
left: 0;
bottom: 0;
width: 36px;
height: 36px;
border-radius: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Get your avatar URL
To use your own avatar, you’ll need a direct image URL.
Use the URL of the image you want to display next to the assistant’s replies. It can be your logo, a support agent photo, or any other avatar image that matches your brand. The image just needs to be hosted online.
If you want to use the same avatar as in the chat header, you can copy its URL right from the widget configurator. Just right-click the avatar, choose Inspect, and copy the image URL from DevTools.
Replace default avatar URL with your own
Once you have your avatar URL, you can add it to the CSS code.
To do this, replace the sample image link in the background: url(...) line with your own direct image URL
That’s it! Your chatbot replies will stand out more clearly, and the chat will be easier to follow 
Did you try this customization? Feel free to share your results or questions in the comments
