ðŸŠķAdvanced Chatbot Widget Demo

Preview and customize your chatbot widget

ðŸŽĻTheme Color

😊Bot Avatar

✏ïļBot Name

📍Position

âœĻ Features Included

Gradient header with dot pattern
Tab navigation (Chat/History/FAQ)
Animated typing indicator
Collapsible source citations
Quick reply suggestions
Feedback buttons (👍👎📋)
Full-screen expand mode
Live agent status indicator
Smooth animations
Fully customizable colors
Accessible (ARIA labels)
"Powered by" branding

📋 Integration Code

import AdvancedChatbotWidget from '@/components/ui/advanced-chatbot-widget'

<AdvancedChatbotWidget
  botId="your-bot-id"
  botName="QueryWing AI"
  botAvatar="ðŸŠķ"
  primaryColor="#6366f1"
  position="bottom-right"
  welcomeMessage="👋 Hi! How can I help you today?"
  welcomeSuggestions={['Get started', 'Pricing', 'Support']}
  apiEndpoint="/api/v1/chat"
/>

ðŸŽŊ Try It Out!

Click the chat button in the bottom-right corner to open the widget. Try sending messages, clicking suggestions, expanding to fullscreen, and exploring the tabs.

1