# Using Custom CSS to style your chatbot

For users on the **Turbo** plan and above, you can use your own custom CSS to style your chatbot. To get started, you can go to **Embed Chatbot** and turn on **Advanced CSS Customization.**

<figure><img src="/files/u9XWcg3fS9RCWH9uaDGR" alt=""><figcaption><p>Advanced CSS Customization when embedding your chatbot</p></figcaption></figure>

\
We currently support using custom CSS to style two key components of the chatbot. Any valid CSS properties supported by modern web browsers can be added to the input fields.

1. Chat Container
   1. Styles applied here will affect the entire chat container, including its layout, background, and overall appearance.
2. Chat Header
   1. Styles added here will modify the header section of the chat interface, which includes the chatbot's picture, name, and tagline.

If there are any other specific areas of the chatbot that you would like to use custom CSS to style, please reach out to us at <support@wonderchat.io>!


---

# 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.wonderchat.io/setup-guides/styling-your-chatbot/using-custom-css-to-style-your-chatbot.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.