Widget Tag & Options

Complete reference for all available attributes and configuration options for the Infinity Widget.

HTML Attributes

Connection & Backend

Attribute	Type	Default	Description
backend	String	'websocket'	Backend protocol type
protocol	String	'ws'	WebSocket protocol (ws/wss)
websocket-url	String	Required	WebSocket server URL

Appearance & Theme

Attribute	Type	Default	Description
theme	String	'light'	Widget theme (light, dark, auto)
title	String	'Infinity Bot'	Widget title/header text
no-style	Boolean	false	Disable default styling

Messages & Content

Attribute	Type	Default	Description
welcome-message	String	-	Initial welcome message
user-avatar	String	-	URL for user avatar image
bot-avatar	String	-	URL for bot avatar image
max-messages	Number	100	Maximum messages to display
persistent-history	Boolean	false	Save chat history locally
markdown	Boolean	true	Enable markdown rendering
timestamps	Boolean	true	Show message timestamps

Behavior

Attribute	Type	Default	Description
auto-scroll	Boolean	true	Auto-scroll to new messages
typing-indicator	Boolean	true	Show typing indicator
auto-focus	Boolean	false	Auto-focus input on load
disabled	Boolean	false	Disable widget interactions
fullscreen	Boolean	false	Start in fullscreen mode
debug	Boolean	false	Enable debug logging

Floating Mode

Attribute	Type	Default	Description
display-mode	String	'embedded'	Display mode (embedded, floating)
bubble-position	String	'bottom-right'	Floating bubble position
auto-minimize	Boolean	false	Auto-minimize after timeout
minimize-timeout	Number	30000	Auto-minimize timeout (ms)
bubble-size	String	'medium'	Bubble size (small, medium, large)

Internationalization

Attribute	Type	Default	Description
lang	String	'en'	Language code (ISO 639-1)
language	String	'en'	Alternative language attribute

CSS Custom Properties

Customize the widget appearance using CSS custom properties:

infinity-widget {
  /* Colors */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --background-color: #ffffff;
  --text-color: #333333;
  --border-color: #e9ecef;
  --shadow-color: rgba(0, 0, 0, 0.15);
  
  /* Spacing */
  --padding: 16px;
  --margin: 8px;
  --border-radius: 8px;
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size: 14px;
  --line-height: 1.5;
  
  /* Dimensions */
  --widget-width: 400px;
  --widget-height: 600px;
  --bubble-size: 60px;
}

Examples

Basic Configuration

<infinity-widget 
  websocket-url="wss://api.example.com/ws"
  theme="light"
  welcome-message="Hello! How can I help you today?">
</infinity-widget>

Advanced Configuration

<infinity-widget 
  websocket-url="wss://api.example.com/ws"
  theme="dark"
  display-mode="floating"
  bubble-position="bottom-left"
  auto-minimize="true"
  minimize-timeout="60000"
  user-avatar="/images/user.png"
  bot-avatar="/images/bot.png"
  max-messages="50"
  persistent-history="true"
  lang="es">
</infinity-widget>

Custom Styling

<style>
  infinity-widget {
    --primary-color: #28a745;
    --background-color: #f8f9fa;
    --border-radius: 12px;
    --widget-width: 350px;
    --widget-height: 500px;
  }
</style>

<infinity-widget 
  websocket-url="wss://api.example.com/ws"
  theme="light">
</infinity-widget>

Validation

The widget validates all attributes and will log warnings for invalid values:

• URLs must be valid WebSocket URLs (ws:// or wss://)
• Numbers must be positive integers
• Enums must match allowed values
• Boolean attributes accept "true", "false", or their presence/absence