Skip to main content
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

AttributeTypeDescriptionDefault
data-tenantstringTenant slug (required)-
data-segmentstringContextual segmentdefault
data-primary-colorstringPrimary color (hex)#6366f1
data-positionstringWidget positionbottom-right
data-welcome-messagestringWelcome messageTenant config
data-openbooleanOpen by defaultfalse
data-hide-launcherbooleanHide the buttonfalse

​
Positions

ValueDescription
bottom-rightBottom right (default)
bottom-leftBottom left
top-rightTop right
top-leftTop 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

​
Discrete widget (no button)

<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

<script
  src="https://animam.ai/widget.js"
  data-tenant="your-slug"
  data-open="true"
></script>