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

# Appearance

> Customize the widget's look

Adapt the widget's appearance to your brand guidelines.

## Primary color

The primary color applies to the button, bot messages, and interactive elements.

```html theme={null}
<script
  src="https://animam.ai/widget.js"
  data-tenant="your-slug"
  data-primary-color="#6366f1"
></script>
```

### Examples

| Color            | Code      | Usage         |
| ---------------- | --------- | ------------- |
| Indigo (default) | `#6366f1` | Tech, SaaS    |
| Green            | `#10b981` | Eco, Health   |
| Blue             | `#3b82f6` | Corporate     |
| Red              | `#ef4444` | Urgent, Promo |
| Orange           | `#f97316` | E-commerce    |
| Purple           | `#8b5cf6` | Creative      |

## Position

```html theme={null}
data-position="bottom-right"
```

| Position       | Description            |
| -------------- | ---------------------- |
| `bottom-right` | Bottom right (default) |
| `bottom-left`  | Bottom left            |

## Bot avatar

Configure the avatar in **Dashboard > Settings > Appearance**.

Accepted formats:

* PNG, JPG, SVG
* Recommended size: 128x128px
* Max weight: 500 KB

## Welcome message

```html theme={null}
data-welcome-message="Hello! How can I help you?"
```

Or via the dashboard for finer control (different messages based on time, segment, etc.).

## Advanced theming (Enterprise)

For Enterprise customers, complete CSS customization:

```css theme={null}
/* Exposed CSS variables */
:root {
  --animam-primary: #6366f1;
  --animam-primary-hover: #4f46e5;
  --animam-bg: #ffffff;
  --animam-text: #1f2937;
  --animam-border: #e5e7eb;
  --animam-radius: 12px;
  --animam-font: 'Inter', sans-serif;
}
```

### Example: Dark mode

```css theme={null}
[data-theme="dark"] {
  --animam-bg: #1f2937;
  --animam-text: #f9fafb;
  --animam-border: #374151;
}
```

## White Label (Enterprise)

Remove all Animam mentions:

* Animam logo hidden
* "Powered by" link removed
* Custom domain possible

Contact us to enable white label.

## Responsive

The widget adapts automatically:

| Screen  | Behavior               |
| ------- | ---------------------- |
| Desktop | Bubble in bottom right |
| Tablet  | Same as desktop        |
| Mobile  | Full screen when open  |

## Accessibility

The widget respects WCAG 2.1 standards:

* Keyboard navigation (Tab, Enter, Escape)
* ARIA labels
* Sufficient contrast
* Visible focus

<Tip>
  Test your primary color with a contrast tool to ensure readability.
</Tip>