# Customization of the AI Chatbot text

**URL:** <https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422>\
**Category:** Customization\
**Tags:** ai-chatbot\
**Created:** [August 6, 2025, 1:14pm UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422 "2025-08-06T13:14:18Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![paintproductions](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/paintproductions/32/3231_2.png) [@paintproductions](https://community.elfsight.com/u/paintproductions)\
**Post date:** [August 6, 2025, 1:14pm UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422/1 "2025-08-06T13:14:18Z")

</div>

I want to change the text color of the assistant it self. Its now black i want it to be #667079

---

<div class="post-metadata">

**Author:** ![paintproductions](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/paintproductions/32/3231_2.png) [@paintproductions](https://community.elfsight.com/u/paintproductions)\
**Post date:** [August 6, 2025, 1:19pm UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422/2 "2025-08-06T13:19:29Z")

</div>

And maybe the overal fontsize a bit smaller

---

<div class="post-metadata">

**Author:** ![PeterC](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@PeterC](https://community.elfsight.com/u/PeterC)\
**Post date:** [August 6, 2025, 3:50pm UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422/3 "2025-08-06T15:50:32Z")

</div>

> [@paintproductions](#):
>
> #667079

Try adding this CSS:

/\* Style assistant’s message text \*/  
.es-message-assistant .es-message-content-container p {  
color: #667079 !important;  
font-size: 80% !important;  
}

The 80% means 80% of the default font size. Change that to your preference. 👍

---

<div class="post-metadata">

**Author:** ![paintproductions](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/paintproductions/32/3231_2.png) [@paintproductions](https://community.elfsight.com/u/paintproductions)\
**Post date:** [August 7, 2025, 9:15am UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422/4 "2025-08-07T09:15:48Z")

</div>

> [@PeterC](#):
>
> /\* Style assistant’s message text \*/  
> .es-message-assistant .es-message-content-container p {  
> color: #667079 !important;  
> font-size: 80% !important;  
> }

Yeah great thats working fine. Aldo i have a problem that the Chat bot is not working this morning. I already have a chat with you guys and there is a problem at you site with the app. Hopefully it will be fix soon. I put mine off for now because the customer gets no result when ask a question

---

<div class="post-metadata">

**Author:** ![paintproductions](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/paintproductions/32/3231_2.png) [@paintproductions](https://community.elfsight.com/u/paintproductions)\
**Post date:** [August 7, 2025, 9:19am UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422/5 "2025-08-07T09:19:54Z")

</div>

Now the assistant is oke but can it be also done for the iput block were customer write there text in that also black and bigger? My whole site have these textcolor #667079 and some smaller size.  
Perhaps a overal tex size also for the customer balloons (aldo that font is white)

---

<div class="post-metadata">

**Author:** ![paintproductions](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/paintproductions/32/3231_2.png) [@paintproductions](https://community.elfsight.com/u/paintproductions)\
**Post date:** [August 7, 2025, 9:22am UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422/6 "2025-08-07T09:22:04Z")

</div>

> [@Change color of user message text](https://community.elfsight.com/t/change-color-of-user-message-text/113302/1):
>
> ```auto
> /* Change font color of user's message text */
> .es-message-user .es-message-content-container p {
> color: #ffffff !important;
> }
> 
> ```

the customer balloon text size i made it my self thats done exept die input must be smaller and not black

---

<div class="post-metadata">

**Author:** ![paintproductions](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/paintproductions/32/3231_2.png) [@paintproductions](https://community.elfsight.com/u/paintproductions)\
**Post date:** [August 8, 2025, 10:32am UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422/7 "2025-08-08T10:32:15Z")

</div>

> [@Change color of user message text](https://community.elfsight.com/t/change-color-of-user-message-text/113302/1):
>
> ```auto
> /* Change font color of user's message text */
> .es-message-user .es-message-content-container p {
> color: #ffffff !important;
> }
> 
> ```

I mean the window were you type your message in before sending. Thats also black and biger size like i want to

---

<div class="post-metadata">

**Author:** ![PeterC](https://avatars.discourse-cdn.com/v4/letter/p/f9ae1b/32.png) [@PeterC](https://community.elfsight.com/u/PeterC)\
**Post date:** [August 8, 2025, 1:41pm UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422/8 "2025-08-08T13:41:47Z")

</div>

In your Chatbot App, there is a ‘Theme’ tab where you can change the colors of the box. I also posted about changing the size of the box for Mobile here: [https://community.elfsight.com/t/change-the-size-of-ai-chatbots-window-size-mobile-only/109347/](https://community.elfsight.com/t/change-the-size-of-ai-chatbots-window-size-mobile-only/109347)

---

<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:** [August 18, 2025, 3:03pm UTC](https://community.elfsight.com/t/customization-of-the-ai-chatbot-text/138422/9 "2025-08-18T15:03:55Z")

</div>

Hi there, @paintproductions 👋

Do you mean the placeholder text in the input field?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/1/9121120cb3cbd42704e6b42da182e1e362c27405.png)

If this is the case, here is a CSS code to change its size and color 🙂

```auto
[class*="TextControlBase__TextControlBasePlaceholder-sc"] {
  color: black!important;
  font-size: 15px;
}

```