AI Chatbot Web Component Demo

Basic Usage

Add the chatbot to your page using the custom element:

<script src="/embed-wc.js"></script>
<ai-chatbot 
  api-key="YOUR_API_KEY"
  position="bottom-right"
  width="380"
  height="600"
  launcher-size="60"
  auto-open="false"
  theme="auto"
></ai-chatbot>

Configuration Options

{
  apiKey: 'string',        // Required: Your chatbot API key
  position: 'string',      // Position: 'top-left', 'top-right', 'bottom-left', 'bottom-right' (default)
  width: number,          // Width in pixels (default: 380)
  height: number,        // Height in pixels (default: 600)
  launcherSize: number,  // Launcher button size in pixels (default: 60)
  autoOpen: boolean,     // Whether to open chat automatically (default: false)
  theme: 'string'        // Theme: 'light', 'dark', or 'auto' (default)
}

Programmatic Usage

Create and control the chatbot programmatically:

// Create a new chatbot instance
const chatbot = document.createElement('ai-chatbot');
chatbot.setAttribute('api-key', 'YOUR_API_KEY');
document.body.appendChild(chatbot);

// Control the chatbot
chatbot.open();
chatbot.close();
chatbot.toggle();
chatbot.sendMessage('Hello, bot!');

// Or using the class directly
const chatbot = new AIChatbot();
chatbot.apiKey = 'YOUR_API_KEY';
document.body.appendChild(chatbot);