# 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.