> For the complete documentation index, see [llms.txt](https://docs.usepylon.com/pylon-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usepylon.com/pylon-docs/chat-widget/styling.md).

# Styling

Customize your Chat Widget to look how you want

Open a widget in **Settings > Communications > Chat widget** and go to the **Styling** tab. A preview shows what the widget will look like to your customers.

## Styling

You can customize the:

* **Header background**: **Default**, or a **Custom color**
* **Custom org logo** shown on the home screen. It defaults to the square logo in your Brand center.
* **Custom chat bubble icon** (Enterprise plan)
* **Primary color**, used for buttons and highlights. It defaults to your Brand center primary color. Available on the Enterprise plan.
* **Chat bubble color**
* **Welcome message** on the home screen
* **Module order** of the home screen modules

Online and offline messages, the chat title, and the initial message when opening a chat are set on the **Modules** tab. See [Functionality](/pylon-docs/chat-widget/functionality.md#chat-module).

The widget also uses the body and headline fonts from **Settings > Workspace > Brand center**.

<div data-full-width="true"><figure><img src="https://982123570-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9hXBoCTTNw5flARlUVJf%2Fuploads%2FYuMB3Y7TvuFrT9vKubVo%2Fimage.png?alt=media&amp;token=448b5dd7-65d9-43c7-8b4a-c636701f8451" alt=""><figcaption></figcaption></figure> <figure><img src="https://982123570-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9hXBoCTTNw5flARlUVJf%2Fuploads%2F65tJlWvlceCsMM8GVzAE%2FScreenshot%202025-03-31%20at%207.37.35%E2%80%AFPM.png?alt=media&amp;token=4136e19f-935a-493b-a161-b09b9f0126f9" alt=""><figcaption></figcaption></figure> <figure><img src="https://982123570-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9hXBoCTTNw5flARlUVJf%2Fuploads%2FBJOlIRNwpLVPHNrNndIe%2FScreenshot%202025-03-31%20at%207.33.39%E2%80%AFPM.png?alt=media&amp;token=f7dd3ea0-193e-4b3d-9b32-712210379b5c" alt=""><figcaption></figcaption></figure></div>

## Dark Mode

Use the **Light Mode** / **Dark Mode** switcher next to the Styling heading to set a separate header background, logo, bubble icon, primary color, and bubble color for each theme. Dark mode values you leave empty fall back to a default, such as your light mode value or your Brand center's dark mode logo and colors.

The widget shows the light theme by default. Switch it from your app with [`setTheme`](/pylon-docs/chat-widget/javascript-api.md#window-pylon-settheme), for example to follow your app's own theme.

## Position

The bubble sits in the bottom-right corner of the page, and the chat window opens above it. To move them, override their position with CSS on your page:

```css
.PylonChat-bubbleFrameContainer {
  bottom: 24px !important;
  right: 24px !important;
}

.PylonChat-chatWindowFrameContainer {
  bottom: 88px !important;
  right: 24px !important;
}
```

To show or hide the widget from code, see the [JavaScript API](/pylon-docs/chat-widget/javascript-api.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.usepylon.com/pylon-docs/chat-widget/styling.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.