🤖 AI Chat Widget - Demo

Welcome to the AI Chat Widget Demo!

This is a demonstration of the embeddable chatbot widget. Click the chat button in the bottom-right corner to start chatting.

💬 Real-time Chat

Instant responses powered by AI technology

🎨 Customizable

Match your brand colors and style

📱 Responsive

Works on desktop, tablet, and mobile

⚡ Lightweight

Fast loading, minimal impact on your site

How to Install on Your Website

Add this code snippet to your website, just before the closing </body> tag:

<script src="https://your-domain.com/chatbot-widget.iife.js"
        data-api-url="https://api.your-domain.com"
        data-bot-id="your-bot-id"
        data-primary-color="#3b82f6"
        data-position="bottom-right"
        data-header-title="Chat with us"
        data-header-subtitle="We typically reply instantly">
</script>
        

Configuration Options

data-api-url: Your chatbot API endpoint (required)
data-bot-id: Your unique bot ID (required)
data-bot-name: Display name for the bot
data-bot-avatar: URL to bot avatar image
data-primary-color: Brand color (default: #3b82f6)
data-position: 'bottom-right' or 'bottom-left' (default: bottom-right)
data-greeting: Initial greeting message
data-placeholder: Input placeholder text
data-header-title: Chat window header title
data-header-subtitle: Chat window header subtitle

Programmatic Initialization

You can also initialize the widget programmatically:

<script src="https://your-domain.com/chatbot-widget.iife.js"></script>
<script>
  window.AIChatWidget.init({
    apiUrl: 'https://api.your-domain.com',
    botId: 'your-bot-id',
    primaryColor: '#3b82f6',
    position: 'bottom-right',
    botName: 'AI Assistant',
    greeting: 'Hi! How can I help you today?',
    headerTitle: 'Chat with us',
    headerSubtitle: 'We typically reply instantly'
  });
</script>
        