🤖 AI Widget Demo

Premium AI Assistant Integration Example

✨ With Client ID, Theme & Position Support

🚀 Live Demo

The AI widget is now active on this page! Look for the floating chat button in the bottom-right corner.

Current Settings:
• Client ID: demo-client-abc-123
• Theme: system (adapts to your OS theme)
• Position: bottom-right

Click the chat button to see these settings in action!

📋 Integration Examples

Option 1: Auto-initialize with Client ID

<script type="module" src="https://your-domain.com/index.js?clientId=client-abc-123"></script>

Option 2: Manual initialization

<script type="module" src="https://your-domain.com/index.js" data-auto-init="false"></script> <script> AIWidget.mountWidget({ message: "Welcome! How can I help you today?", clientId: "client-xyz-789" }); </script>

Option 3: Delayed initialization

<script type="module" src="https://your-domain.com/index.js" data-auto-init="false"></script> <script> setTimeout(() => { AIWidget.mountWidget({ message: "Still browsing? Need any help?", clientId: "client-delayed-456" }); }, 5000); </script>

âš¡ Features

✅ Bottom-right positioning - Automatically positions itself without interfering with existing content

✅ Client ID tracking - Unique identifier for personalized sessions

✅ Premium UI - Modern design with smooth animations

✅ Responsive design - Works on desktop and mobile

✅ Optimal caching - Smart asset loading with hashed files

✅ Easy integration - Single script tag deployment

🎨 Configuration Options

The widget accepts the following configuration:

  • clientId (required): Unique client identifier for session tracking
  • message (optional): Custom welcome message
  • theme (optional): 'light' | 'dark' | 'system' (default: 'system')
  • position (optional): 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' (default: 'bottom-right')