# 7. Viewing/Editing the Colors of the Message 'Bubbles'

The color of the messaging bubbles can be changed by modifying the HEX codes within the HTML elements that are labeled:

`"HTML Scrollbar Styling/Chat Bubbles (can delete once on Personal Plan or higher)"`

If your app is on the hobby plan, please keep these three HTML elements within your app to ensure that the scrollbar and chat bubbles are styled correctly at all times. If your app is on the personal plan or higher, you do not need all of those HTML elements, and can instead paste one of the HTML element's code into the page HTML header section (and then, delete the page-level HTML elements after)

![](/files/-M5zXVkfS3tgMcrE_i1j)

In order to change the color of the "from me" chat bubble (i.e., the chat bubble that displays on the right side of the messenger), this part of the HTML elements (or page HTML header) can be modified with any hex color codes:

![](/files/-M5zYus78XRDIfMkIHkl)

Similarly, the "from them" chat bubble (.e., the chat bubble that displays on the left side of the messenger) can be modified by editing this part of the HTML elements (or page HTML header) with any hex color codes:

![](/files/-M5zZsq-9mBnjrsObVAn)

{% hint style="info" %}
Note: If your app is on the hobby plan and you are modifying the colors within the "HTML Scrollbar Styling/Chat Bubbles (can delete once on Personal Plan or higher)" elements, all three of those HTML elements' colors need to be changed in order for the colors to be the same throughout the different messaging page repeating groups. 
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/messages/design/7.-change-the-color-of-the-message-bubbles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.