1.0.0 • Published 6 months ago
chat-ai-bot-hub-widget v1.0.0
Social AI Chat Widget
A lightweight and customizable chat widget for embedding AI chatbots in any website.
Installation
npm install social-ai-chat-widgetUsage
Basic Usage
import SocialAIChatWidget from 'social-ai-chat-widget';
const chatWidget = new SocialAIChatWidget({
botId: 'your-bot-id',
serverUrl: 'https://your-server-url'
});
chatWidget.init();Advanced Configuration
const chatWidget = new SocialAIChatWidget({
botId: 'your-bot-id',
serverUrl: 'https://your-server-url',
position: 'left', // 'left' or 'right'
logoUrl: 'https://your-domain.com/logo.png', // Custom logo image
theme: {
primaryColor: '#FF5733',
buttonSize: '70px',
chatWidth: '400px',
chatHeight: '600px',
borderRadius: '15px',
fontFamily: 'Arial, sans-serif',
buttonIconSize: '30px',
buttonShadow: '0 4px 20px rgba(0,0,0,0.2)',
chatShadow: '0 8px 24px rgba(0,0,0,0.2)',
chatMargin: '15px',
animation: true // Enable/disable animations
}
});Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
| botId | string | required | Your chatbot ID |
| serverUrl | string | 'http://localhost:5077' | Server URL where your chatbot is hosted |
| position | string | 'right' | Widget position ('left' or 'right') |
| logoUrl | string | undefined | Custom logo image URL for the chat button |
Theme Options
| Option | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | '#0084ff' | Primary color for the chat button |
| buttonSize | string | '60px' | Size of the chat button |
| chatWidth | string | '350px' | Width of the chat window |
| chatHeight | string | '500px' | Height of the chat window |
| borderRadius | string | '10px' | Border radius for chat window and button |
| fontFamily | string | system fonts | Font family for the chat interface |
| buttonIconSize | string | '24px' | Size of the button icon/logo |
| buttonShadow | string | '0 2px 12px rgba(0,0,0,0.1)' | Shadow for the chat button |
| chatShadow | string | '0 4px 12px rgba(0,0,0,0.15)' | Shadow for the chat window |
| chatMargin | string | '10px' | Margin between chat window and button |
| animation | boolean | true | Enable/disable all animations |
License
MIT
1.0.0
6 months ago