> For the complete documentation index, see [llms.txt](https://support.mailagent.email/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.mailagent.email/widget/styling-and-theming.md).

# Styling & Theming

The widget runs inside a sandboxed iframe, so it won't conflict with your page styles. You can customize its appearance through configuration options.

## Primary Color

Set the primary background color using the `data-color-background-primary` attribute:

```html
<script
  src="https://widget.mailagent.email/connect/connect.js"
  data-user-id="YOUR_USER_ID"
  data-color-background-primary="#2c7df6"
></script>
```

This color is applied to:

* The header background
* Primary buttons
* Active state indicators
* Message accent elements

## Transparent Header

Make the header blend with the chat background:

```html
<script
  src="https://widget.mailagent.email/connect/connect.js"
  data-user-id="YOUR_USER_ID"
  data-header-transparent="true"
></script>
```

This is useful when embedding the widget in a context where you want a cleaner, more integrated look.

## Positioning

Control where the widget appears on screen via CSS position properties:

```javascript
// Bottom-right corner (common for support widgets)
await MailAgent.open({
  bottom: "20px",
  right: "20px",
  width: "400px",
  height: "600px"
});

// Centered on page
await MailAgent.open({
  top: "50%",
  left: "50%",
  width: "500px",
  height: "700px"
});

// Full sidebar
await MailAgent.open({
  top: "0",
  right: "0",
  width: "400px",
  height: "100vh"
});
```

The widget is rendered with `position: fixed` and `z-index: 9999`, so it will float above your page content.

## Iframe Styling

The widget iframe has the following default styles:

* No border
* Transparent background
* Hidden overflow
* Fade-in animation on load (200ms ease)

Since it's an iframe, you cannot inject CSS into the widget from your page. All theming must go through the configuration options described above.


---

# 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 dynamically by asking a question.

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

```
GET https://support.mailagent.email/widget/styling-and-theming.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.