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.
