Skip to main content

Documentation Index

Fetch the complete documentation index at: https://anam.ai/docs/llms.txt

Use this file to discover all available pages before exploring further.

The widget loads its configuration from your published persona settings in Anam Lab. You can override any setting by adding HTML attributes directly to the <anam-agent-widget> element.

​
Layout modes

​
Floating

The default mode. The widget renders as a fixed-position overlay, anchored to a corner of the viewport. Users click to expand it into a conversation panel. 
<anam-agent
  agent-id="your-persona-id"
  layout="floating"
  position="bottom-right"
  initial-state="minimized"
></anam-agent>
The initial-state attribute controls whether the widget starts expanded or minimized:
  • "expanded" (default) the conversation panel is open immediately
  • "minimized" only the floating orb is visible; the user clicks to expand

​
Inline

The widget fills its parent container and becomes part of your page layout. There is no floating orb or expand/collapse behavior. 
<div style="width: 100%; max-width: 720px; aspect-ratio: 3/2;">
  <anam-agent
    agent-id="your-persona-id"
    layout="inline"
  ></anam-agent>
</div>
The inline widget inherits the dimensions of its parent. Make sure the parent has explicit width and height (or aspect-ratio) set.

​
Custom positioning

For floating layout, the position attribute supports both predefined corners and custom CSS values using bracket syntax.

​
Predefined positions

ValueCSS Result
"bottom-right"bottom: 24px; right: 24px
"bottom-left"bottom: 24px; left: 24px
"top-right"top: 24px; right: 24px
"top-left"top: 24px; left: 24px

​
Bracket syntax

For precise control, use bracket syntax to set arbitrary CSS position values: 
{/*  20px from the top, flush to the right edge  */}
<anam-agent
  agent-id="..."
  position="[top-20,right-0]"
></anam-agent>

{/*  100px from the bottom, 40px from the left  */}
<anam-agent
  agent-id="..."
  position="[bottom-100,left-40]"
></anam-agent>
The format is [property-value,property-value,...] where:
  • Allowed properties: top, right, bottom, left, margin, margin-top, margin-right, margin-bottom, margin-left
  • Bare numbers are treated as pixels (e.g., top-20 becomes top: 20px)
  • CSS units can be specified directly (e.g., top-2rem)

​
Attributes reference

agent-id is required. All other attributes are optional and will fall back to your Lab configuration.
AttributeTypeDefaultDescription
agent-idstringPersona ID. Required for fetching config and creating sessions.
api-base-urlstringhttps://api.anam.aiAPI URL override. Only needed for non-production environments.
layout"floating" | "inline""floating"Widget layout mode.
initial-state"expanded" | "minimized""expanded"Initial state when layout is floating. Ignored for inline.
positionstring"bottom-right"Corner position or custom bracket syntax. Only applies to floating layout.
ui-mute-button"true" | "false""true"Show the microphone mute button.
ui-text-input"true" | "false""true"Show the text input field.
call-to-actionstring"Talk to our assistant"Custom text for the start button.
avatar-urlstringOverride avatar thumbnail image URL.
avatar-video-urlstringOverride avatar preview video URL.
agent-namestringOverride persona name displayed in the default CTA.
Last modified on April 14, 2026