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.
Adapt the widget’s appearance to your brand guidelines.
Primary color
The primary color applies to the button, bot messages, and interactive elements.
<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
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
data-welcome-message="Hello! How can I help you?"
Advanced theming (Enterprise)
For Enterprise customers, complete CSS customization:
/* 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
[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
Test your primary color with a contrast tool to ensure readability.
