# AI Chatbot: Make assistant replies easier to recognize with an avatar

**URL:** <https://community.elfsight.com/t/ai-chatbot-make-assistant-replies-easier-to-recognize-with-an-avatar/166436>\
**Category:** Pro Tips\
**Tags:** css, ai-chatbot\
**Created:** [July 5, 2026, 9:00pm UTC](https://community.elfsight.com/t/ai-chatbot-make-assistant-replies-easier-to-recognize-with-an-avatar/166436 "2026-07-05T21:00:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 5, 2026, 9:00pm UTC](https://community.elfsight.com/t/ai-chatbot-make-assistant-replies-easier-to-recognize-with-an-avatar/166436/1 "2026-07-05T21:00:00Z")

</div>

By default, messages from the user and the **[AI Chatbot](https://elfsight.com/ai-chatbot-widget/)** 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:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/d/bd46c25b10faecb6f8069d7af49ce6095c8b56f5.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/8/a8d0fc74a0baa2807e690bf946decd4b7aedff5e.png)

  

## **How to implement it**

* * *

> **Add a CSS code to the widget**
>
> Go to your [AI Chatbot](https://elfsight.com/ai-chatbot-widget/) widget settings → **Settings** tab → **Custom CSS** field, and add this code:
> 
> ```auto
> .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;
> }
> 
> ```
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/8/68a7a455e4c55f1f4605a9af6e7649ba37db995e.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/1/1128f816a37c42de33d0b3c76cd5c029d3ef098a.png)

  

> **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
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/5/85d9ee48bf2c68e2d30be780ab9a71185184494c.png)

  

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 👇

---

<div class="post-metadata">

**Author:** ![Helga](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/helga/32/1155_2.png) [@Helga](https://community.elfsight.com/u/Helga)\
**Post date:** [July 6, 2026, 10:03am UTC](https://community.elfsight.com/t/ai-chatbot-make-assistant-replies-easier-to-recognize-with-an-avatar/166436/4 "2026-07-06T10:03:58Z")

</div>

We have a great catalog of CSS snippets in the #CSS Codes category - feel free to explore it to find smart customization ideas for your widgets!