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.
Configure the widget’s appearance and behavior via HTML attributes.
Available attributes
<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
<!-- 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:
// 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
<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>
<script
src="https://animam.ai/widget.js"
data-tenant="your-slug"
data-open="true"
></script>
