---
title: "Style Chat"
slug: "style-chat"
description: "Customize the Glad App's look with CSS for a unique user experience, ensuring seamless integration with your website's branding and design elements."
updated: 2025-10-02T21:34:31Z
published: 2025-10-02T21:34:31Z
canonical: "help.gladly.com/style-chat"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://help.gladly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Style Chat

Style the look and feel of Chat to customize how it looks on your website, allowing you to create a unique and personalized experience for your Customers. By adjusting various design elements, you can ensure that the Chat seamlessly integrates with your site's overall aesthetic and branding.

## Widget icon

The Chat [code samples](https://github.com/gladly/gladapp-examples) provide web developers with examples of how to style it as it appears on a web page.

## CSS

You can manage the colors and font of Chat, as well as its left-right positioning on the Chat [configuration](https://help.gladly.com/docs/create-and-configure-glad-app#style) page, which provides a user-friendly interface for customization. While applying additional, custom CSS to the Chat is not officially supported, an experienced web developer may attempt to use custom CSS to achieve a more personalized look and feel. However, Gladly cannot support any issues or undesired results arising from these customizations, as they fall outside the scope of the official support provided. Proceed with caution and understand that any modifications made through custom CSS could lead to unexpected behavior or conflicts within the application.

Understanding the above, adding custom CSS to a Chat can require a trial-and-error approach. The Chat is designed to avoid unintended styles being applied from the pages on which it is embedded, and many of its constituent elements are dynamically generated. However, most elements and attributes *can* be styled with the right selector.

Most selectors should start with `#gladlyChat_container`. For example":

```css
#gladlyChat_container {
    top: 10%;
}

#gladlyChat_container .message_customer:first-child {
        color: magenta !important;
}
```

Note that this can require some creativity! For example, one can’t style `bottom` because it is already styled by default with `!important` on a Chat — so instead use the inverse value with `top`.

> [!NOTE]
> Chat API
> 
> Check out [Chat API](https://developer.gladly.com/glad-app/) for information about events, JavaScript, and more.