A modern, customizable chatbot component for React
npm install botly-reactA modern, customizable chat widget component for React applications. Botly provides a beautiful, accessible chat interface that can be easily integrated into any React project.
!Botly Demo
!React
!TypeScript
!Tailwind CSS
š Live Demo & Documentation
Try Botly instantly in your browser and explore the full documentation, interactive examples, and API reference at https://botly-doc.vercel.app/.
You can find a preview image of Botly in the @/preview-images folder.
!Botly Preview - init
!Botly Preview - products
!Botly Preview - quick options
!Botly Preview - buttons
This repository includes a comprehensive demo and documentation site. To run it locally:
``bashClone the repository
git clone https://github.com/your-repo/botly.git
cd botly
Then visit
to see:
- Interactive Demos: Try different themes and configurations
- Live Documentation: Complete API reference and examples
- Customization Guide: Learn how to customize Botly for your needsāØ Features
- šØ Multiple Themes: Modern, Dark, and Minimal built-in themes
- šÆ Fully Customizable: Custom themes, colors, icons, and branding
- š± Responsive Design: Works perfectly on desktop and mobile
- š§ Flexible Positioning: 4 corner positions (bottom-right, bottom-left, top-right, top-left)
- š Multiple Sizes: Small, Default, and Large size options
- š¾ Persistent Chat: Optional localStorage persistence
- š Rich Message Types: Text, buttons, cards, quick replies, and more
- āæ Accessible: Built with accessibility in mind
- š Lightweight: Minimal dependencies, fast performance
- š TypeScript Ready: Full TypeScript support
š¦ Installation
`bash
npm install botly-react
`š Quick Start
jsx
import { Botly } from 'botly-react'
import 'botly-react/dist/botly-react.css'function App() {
return (
position="bottom-right"
onSend={async (text) => {
// Your AI/chat logic here
return [{ type: 'text', from: 'bot', text:
You said: ${text} }]
}}
onInit={async () => {
return [{ type: 'text', from: 'bot', text: 'Hello! How can I help?' }]
}}
/>
)
}
`šØ Customization Examples
$3
jsx
const customTheme = {
button: 'bg-gradient-to-br from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-white border border-purple-400',
window: 'bg-white/95 backdrop-blur-xl border border-purple-200 shadow-xl',
header: 'bg-gradient-to-r from-purple-50 to-purple-100 border-b border-purple-200',
user: 'bg-purple-600 text-white shadow-md',
bot: 'bg-gray-50 border border-gray-200 text-gray-800',
input: 'bg-gray-50 border border-gray-200 focus:border-purple-300 focus:ring-2 focus:ring-purple-200',
sendButton: 'bg-purple-600 hover:bg-purple-700 text-white'
}
`$3
jsx
subtitle="We're here to help ā¢ 24/7"
avatar={
S
}
/>
`$3
jsx
const handleSend = async (text) => {
// Call your AI service
const response = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: text })
})
const data = await response.json()
return [{
type: 'text',
from: 'bot',
text: data.response
}]
}
`š Documentation
The demo site includes comprehensive documentation covering:
- Overview: What is Botly and its key benefits
- Installation: Setup instructions and dependencies
- Quick Start: Basic implementation guide
- API Reference: Complete props and methods documentation
- Customization: Theme, styling, and branding options
- Examples: Real-world usage examples
šļø Project Structure
botly/
āāā src/
ā āāā components/
ā ā āāā Botly.jsx # Main chat widget component
ā ā āāā ChatWindow.jsx # Chat window component
ā ā āāā MessageInput.jsx # Message input component
ā ā āāā MessageRenderer.jsx # Message rendering logic
ā ā āāā Documentation.jsx # Documentation page
ā ā āāā messages/ # Message type components
ā ā āāā TextMessage.jsx
ā ā āāā ButtonTemplate.jsx
ā ā āāā CardTemplate.jsx
ā ā āāā QuickReplies.jsx
ā āāā hooks/
ā ā āāā useChatLogic.js # Chat logic hook
ā āāā llm/
ā ā āāā mockLLM.js # Mock AI responses
ā āāā App.jsx # Demo and documentation app
ā āāā main.jsx # App entry point
āāā examples/
ā āāā customization-examples.jsx # Additional examples
āāā public/ # Static assets
āāā README.md # This file
āāā CUSTOMIZATION.md # Detailed customization guide
āāā package.json # Dependencies and scripts
šÆ Use Cases
Botly is perfect for:
- Customer Support: Live chat widgets for websites
- AI Assistants: Chat interfaces for AI-powered applications
- E-commerce: Product support and shopping assistance
- SaaS Applications: User onboarding and help systems
- Educational Platforms: Student support and Q&A systems
- Healthcare: Patient support and appointment scheduling
š§ Development
To contribute to Botly:
bash
Clone the repository
git clone https://github.com/your-repo/botly.git
cd botlyInstall dependencies
npm installStart development server
npm run devBuild for production
npm run buildRun tests
npm test
``MIT License - see LICENSE file for details.
We welcome contributions! Please see our Contributing Guide for details.
- š§ Email: devfunwatcher@gmail.com
- š¬ Discord: Join our community
- š Documentation: docs.botly.com
- š Issues: GitHub Issues
- Built with React
- Styled with Tailwind CSS
- Icons from Lucide Icon
- Demo powered by Vite
---
Made with ā¤ļø by the Botly team