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

# Configuration

> Customize the Animam widget

Configure the widget's appearance and behavior via HTML attributes.

## Available attributes

```html theme={null}
<script
  src="https://animam.ai/widget.js"
  data-tenant="your-slug"
  data-segment="landing"
  data-primary-color="#6366f1"
  data-position="bottom-right"
  data-welcome-message="Hello! How can I help you?"
></script>
```

## Attribute reference

| Attribute              | Type    | Description            | Default        |
| ---------------------- | ------- | ---------------------- | -------------- |
| `data-tenant`          | string  | Tenant slug (required) | -              |
| `data-segment`         | string  | Contextual segment     | `default`      |
| `data-primary-color`   | string  | Primary color (hex)    | `#6366f1`      |
| `data-position`        | string  | Widget position        | `bottom-right` |
| `data-welcome-message` | string  | Welcome message        | Tenant config  |
| `data-open`            | boolean | Open by default        | `false`        |
| `data-hide-launcher`   | boolean | Hide the button        | `false`        |

## Positions

| Value          | Description            |
| -------------- | ---------------------- |
| `bottom-right` | Bottom right (default) |
| `bottom-left`  | Bottom left            |
| `top-right`    | Top right              |
| `top-left`     | Top left               |

## Colors

The primary color applies to:

* The widget button
* Bot messages
* Links and buttons in the chat

```html theme={null}
<!-- Animam blue (default) -->
data-primary-color="#6366f1"

<!-- Green -->
data-primary-color="#10b981"

<!-- Red -->
data-primary-color="#ef4444"
```

## Advanced JavaScript configuration

For finer control, use the JavaScript API:

```javascript theme={null}
// Wait for widget to load
window.addEventListener('animam:ready', () => {
  // Open the widget
  window.Animam.open()

  // Close the widget
  window.Animam.close()

  // Toggle
  window.Animam.toggle()

  // Send a message programmatically
  window.Animam.sendMessage("Hello!")

  // Change segment dynamically
  window.Animam.setSegment("pricing")
})
```

## Examples

### Discrete widget (no button)

```html theme={null}
<script
  src="https://animam.ai/widget.js"
  data-tenant="your-slug"
  data-hide-launcher="true"
></script>

<!-- Open via your own button -->
<button onclick="window.Animam.open()">
  Need help?
</button>
```

### Widget open by default

```html theme={null}
<script
  src="https://animam.ai/widget.js"
  data-tenant="your-slug"
  data-open="true"
></script>
```