n8n-widget-bot
Version:
Lightweight and customizable n8n AI chatbot widget
343 lines (273 loc) β’ 9.2 kB
Markdown
# n8n Widget Bot π€
κ°λ³κ³ μ¬μ©μ μ μ κ°λ₯ν n8n AI μ±λ΄ μμ ― λΌμ΄λΈλ¬λ¦¬
A lightweight and customizable n8n AI chatbot widget library with zero dependencies.
## Features β¨
- π **Zero Dependencies** - μμ λ°λλΌ JavaScriptλ‘ κ΅¬ν
- π¨ **Fully Customizable** - ν
λ§, μμ, μμΉ λ± λͺ¨λ κ²μ 컀μ€ν°λ§μ΄μ§ κ°λ₯
- π± **Responsive Design** - λͺ¨λ°μΌκ³Ό λ°μ€ν¬ν± λͺ¨λ μ§μ
- π **Resizable** - 8λ°©ν₯ 리μ¬μ΄μ¦ μ§μ
- β¨ **Smooth Animations** - λΆλλ¬μ΄ νμ΄ν μ λλ©μ΄μ
- π **Session Management** - μλ μΈμ
κ΄λ¦¬
- π **Markdown Support** - κΈ°λ³Έ λ§ν¬λ€μ΄ λ¬Έλ² μ§μ
- π **File Upload** - νμΌ μ²¨λΆ κΈ°λ₯ μ§μ (μ΄λ―Έμ§, PDF, λ¬Έμ λ±)
## Installation π¦
### CDN (μΆμ²)
#### jsDelivr CDN
```html
<!-- μ΅μ λ²μ -->
<script src="https://cdn.jsdelivr.net/npm/n8n-widget-bot@latest/dist/n8n-widget-bot.min.js"></script>
<!-- νΉμ λ²μ -->
<script src="https://cdn.jsdelivr.net/npm/n8n-widget-bot@1.0.0/dist/n8n-widget-bot.min.js"></script>
```
#### unpkg CDN
```html
<!-- μ΅μ λ²μ -->
<script src="https://unpkg.com/n8n-widget-bot@latest/dist/n8n-widget-bot.min.js"></script>
<!-- νΉμ λ²μ -->
<script src="https://unpkg.com/n8n-widget-bot@1.0.0/dist/n8n-widget-bot.min.js"></script>
```
### NPM
```bash
npm install n8n-widget-bot
```
### μ§μ λ€μ΄λ‘λ
[GitHub Releases](https://github.com/dantelabs/n8n-widget-bot/releases)μμ μ΅μ λ²μ μ λ€μ΄λ‘λνμΈμ.
## Quick Start π
### κΈ°λ³Έ μ¬μ©λ² (CDN)
```html
<!DOCTYPE html>
<html>
<head>
<title>n8n Widget Bot Example</title>
</head>
<body>
<!-- Your content here -->
<!-- n8n Widget Bot -->
<script src="https://cdn.jsdelivr.net/npm/n8n-widget-bot@latest/dist/n8n-widget-bot.min.js"></script>
<script>
FloatingChatWidget.init({
apiUrl: 'YOUR_N8N_WEBHOOK_URL',
title: 'AI Assistant',
themeColor: '#4C4CBB',
welcomeMessage: 'Hello! How can I help you today?'
});
</script>
</body>
</html>
```
### NPM λͺ¨λλ‘ μ¬μ©
```javascript
// ES6 Module
import 'n8n-widget-bot';
// CommonJS
require('n8n-widget-bot');
// Initialize
window.FloatingChatWidget.init({
apiUrl: 'YOUR_N8N_WEBHOOK_URL',
title: 'AI Assistant'
});
```
## Configuration Options βοΈ
```javascript
FloatingChatWidget.init({
// Required
apiUrl: 'YOUR_N8N_WEBHOOK_URL', // n8n webhook URL
// Appearance
themeColor: '#4C4CBB', // μ£Ό ν
λ§ μμ
position: 'bottom-right', // 'bottom-left' or 'bottom-right'
bubbleIcon: '<i class="fas fa-comments"></i>', // λ²λΈ μμ΄μ½ (HTML)
title: 'AI Assistant', // μμ ― ν€λ μ λͺ©
// Messages
placeholder: 'Type your message...', // μ
λ ₯ νλ νλ μ΄μ€νλ
welcomeMessage: 'Hello! π', // νμ λ©μμ§
// Dimensions
width: 350, // μ΄κΈ° λλΉ (px)
height: 500, // μ΄κΈ° λμ΄ (px)
resizable: true, // 리μ¬μ΄μ¦ κ°λ₯ μ¬λΆ
minWidth: 300, // μ΅μ λλΉ
maxWidth: 600, // μ΅λ λλΉ
minHeight: 400, // μ΅μ λμ΄
maxHeight: 800, // μ΅λ λμ΄
// Behavior
animationDuration: 300, // μ λλ©μ΄μ
μ§μ μκ° (ms)
typingSpeed: 18, // νμ΄ν μλ (ms)
maxMessageLength: 1000, // μ΅λ λ©μμ§ κΈΈμ΄
// File Upload (v1.2.0+ supports multiple files)
enableFileUpload: true, // νμΌ μ
λ‘λ κΈ°λ₯ νμ±ν
maxFileSize: 10485760, // μ΅λ νμΌ ν¬κΈ° (10MB)
allowedFileTypes: [ // νμ©λ νμΌ νμ
'image/*', // λͺ¨λ μ΄λ―Έμ§
'application/pdf', // PDF
'.doc', '.docx', // Word λ¬Έμ
'.txt', '.csv', '.xlsx' // ν
μ€νΈ νμΌ
],
// Advanced
sessionId: undefined, // μΈμ
ID (μλ μμ±)
fontFamily: 'inherit', // ν°νΈ ν¨λ°λ¦¬
zIndex: 9999, // z-index
debug: false // λλ²κ·Έ λͺ¨λ
});
```
## n8n Webhook Setup π§
n8nμμ AI μμ΄μ νΈμ μ°λνλ €λ©΄:
1. n8nμμ μλ‘μ΄ μν¬νλ‘μ° μμ±
2. **Webhook** λ
Έλ μΆκ°
- HTTP Method: POST
- Path: μνλ κ²½λ‘ μ€μ
- Response Mode: "When last node finishes"
3. **AI Agent** λ
Έλ μΆκ° λ° μ°κ²°
4. Webhook URLμ 볡μ¬νμ¬ `apiUrl`μ μ€μ
### Expected API Format (v1.2.0+)
Request (New n8n webhook format - supports multiple files):
```json
{
"sessionId": "fcw-abc123...",
"action": "sendMessage",
"chatInput": "User message",
"files": [
{
"fileName": "document.pdf",
"fileSize": "12345 bytes",
"fileExtension": "pdf",
"fileType": "application",
"mimeType": "application/pdf",
"data": "data:application/pdf;base64,..."
},
{
"fileName": "image.png",
"fileSize": "54321 bytes",
"fileExtension": "png",
"fileType": "image",
"mimeType": "image/png",
"data": "data:image/png;base64,..."
}
]
}
```
Response (λ€μ μ€ νλ):
```json
{
"reply": "Bot response"
}
// or
{
"output": "Bot response"
}
// or
{
"message": "Bot response"
}
```
## Advanced Usage π₯
### Programmatic Control
```javascript
// μμ ― μ΄κΈ°
FloatingChatWidget.open();
// μμ ― λ«κΈ°
FloatingChatWidget.close();
// ν κΈ
FloatingChatWidget.toggle();
// νλ‘κ·Έλλ° λ°©μμΌλ‘ λ©μμ§ μ μ‘
FloatingChatWidget.reply('This is a bot message');
// 컀μ€ν
λ©μμ§ νΈλ€λ¬
FloatingChatWidget.onUserRequest(function(message) {
// Custom handling
console.log('User said:', message);
// Send custom reply
FloatingChatWidget.reply('Custom response');
});
```
### Multiple Instances
μ¬λ¬ κ°μ μμ ―μ μ¬μ©νλ €λ©΄ κ°κ° λ€λ₯Έ μ€μ μΌλ‘ μ΄κΈ°ν:
```javascript
// First widget
FloatingChatWidget.init({
apiUrl: 'URL_1',
position: 'bottom-right',
themeColor: '#4C4CBB'
});
// Note: Currently supports only one instance per page
// Multi-instance support coming soon
```
## Examples π
### 1. λ―Έλλ© μ€μ
```javascript
FloatingChatWidget.init({
apiUrl: 'https://your-n8n.com/webhook/chat'
});
```
### 2. ν 컀μ€ν°λ§μ΄μ§
```javascript
FloatingChatWidget.init({
apiUrl: 'https://your-n8n.com/webhook/chat',
themeColor: '#FF6B6B',
position: 'bottom-left',
title: 'π€ κ³ κ° μ§μ',
welcomeMessage: 'μλ
νμΈμ! 무μμ λμλ릴κΉμ?',
placeholder: 'λ©μμ§λ₯Ό μ
λ ₯νμΈμ...',
width: 400,
height: 600,
resizable: false,
debug: true
});
```
### 3. λ€ν¬ ν
λ§
```javascript
FloatingChatWidget.init({
apiUrl: 'https://your-n8n.com/webhook/chat',
themeColor: '#1a1a1a',
title: 'Dark Mode Assistant',
bubbleIcon: 'π'
});
```
## Browser Support π
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
## Development π οΈ
### Setup
```bash
git clone https://github.com/dantelabs/n8n-widget-bot.git
cd n8n-widget-bot
npm install
```
### Build
```bash
npm run build # Build both normal and minified versions
npm run dev # Start development server
```
### File Structure
```
n8n-widget-bot/
βββ dist/
β βββ n8n-widget-bot.js # Full version
β βββ n8n-widget-bot.min.js # Minified version
βββ examples/
β βββ home.html # Example implementation
βββ n8n-widget-bot.js # Source file
βββ package.json
βββ README.md
```
## Contributing π€
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License π
MIT License - see the [LICENSE](LICENSE) file for details.
## Support π¬
- π [λ²κ·Έ μ κ³ νκΈ°](https://github.com/dandacompany/n8n-widget-bot/issues)
- π‘ [κΈ°λ₯ μμ²νκΈ°](https://github.com/dandacompany/n8n-widget-bot/issues)
- βΆοΈ [YouTube μ±λ](https://www.youtube.com/@dante-labs)
- π§ [μ΄λ©μΌ λ¬Έμ](mailto:datapod.k@gmail.com)
## Credits π
Created with β€οΈ by [Dante Labs](https://dante-datalab.com)
---
**Note**: μ΄ νλ‘μ νΈλ n8nκ³Ό 곡μμ μΌλ‘ μ°κ΄λμ΄ μμ§ μμ΅λλ€. n8nμ λ³λμ νλ‘μ νΈμ
λλ€.