# GeniStudio Web Chat Widget
[](https://badge.fury.io/js/genistudio-bot-widget)
[](https://opensource.org/licenses/MIT)
[](https://www.jsdelivr.com/package/npm/genistudio-bot-widget)
[](https://www.typescriptlang.org/)
[](https://bundlephobia.com/package/genistudio-bot-widget)
**A lightweight, responsive chat widget for easily integrating GeniStudio AI chatbot on any website.**
*This modern web widget provides a featured chat interface that works across all devices.*
## Features
- **Simple Integration** - Just a few lines of code to add to any website
- **Responsive Design** - Works on desktop and mobile devices
- **Real-time Chat** - WebSocket-based communication
- **Typing Indicators** - Shows when AI is typing a response
- **Customizable** - Change colors, position, and appearance
- **Popup Animation** - Smooth animation when opening the chat
- **Full-screen Mode** - Expand button for fullscreen experience (working on it)
- **Mobile Optimization** - Automatically adapts to smaller screens
- **Performance** - Fast loading, minimal dependencies
- **Accessibility** - Built with accessibility in mind (working on it)
## Quick Start
Add the GeniStudio web chat widget to any website with just a few lines of code:
```html
My Website
```
That's it! The chat widget will automatically initialize and add a chat button to your website with a beautiful, responsive interface.
## Configuration Options
Configure the widget by setting properties in the `window.GeniStudioConfig` object **before** loading the script:
```js
window.GeniStudioConfig = {
chatbotId: 'your-chatbot-id', // Your unique chatbot ID (required)
chatbotName: 'Your Bot Name', // Name displayed in chat header
userEmail: 'user@example.com', // Optional - will be auto-generated if not provided
buttonColor: '#your-color', // Chat button color (themes entire widget)
position: 'bottom-right' // Position: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
};
```
## CDN Usage
The library is available via CDN for simple integration:
```html
```
## Configuration Reference
All available options for customizing your chat widget:
| Option | Required | Default | Description |
|--------|----------|---------|-------------|
| `chatbotId` | Yes | - | Your chatbot ID (e.g. 'cm9jc4y3c0001kz046c5vipcl') |
| `chatbotName` | No | 'GeniStudio Support' | Name shown in chat header |
| `userEmail` | No | auto-generated | User identifier for the chat session |
| `buttonColor` | No | '#0091ae' | Chat button color (CSS color) |
| `position` | No | 'bottom-right' | Button position: 'bottom-right', 'bottom-left', 'top-right', 'top-left' |
## Mobile Support
The widget is fully responsive and optimized for mobile devices:
- Adapts to full-screen on mobile devices for better user experience
- Touch-friendly interface elements
- Optimized for different screen sizes
- Smooth animations and transitions
- Expand button for toggling fullscreen mode on any device
## Privacy and Security
- The widget operates fully within your website's domain
- All communications use secure WebSocket connections
- No user data is stored unless explicitly configured
## License
MIT License - see LICENSE file for details.