💬 Simple Chat Widget

Professional chat widget for n8n - Easy to integrate, fully customizable, production-ready.

---

🚀 Quick Start

CDN (Recommended)

<link href="https://chat-widget.coderaai.com/widget.css" rel="stylesheet" />
<script src="https://chat-widget.coderaai.com/chat-widget-simple.js"></script>
<script>
    createChat({
        webhookUrl: 'YOUR_N8N_WEBHOOK_URL',
        botName: 'مساعد ذكي',
        botAvatar: '🤖',
        placeholder: 'اكتب رسالتك...',
        initialMessages: [
            'مرحباً! 👋',
            'كيف يمكنني مساعدتك؟'
        ]
    });
</script>

That's it! The widget appears in the bottom-right corner. ✅

---

📚 Documentation

• Live Site: chat-widget.coderaai.com
• Deployment Docs: docs-deployment/
  • Dokploy Deployment
  • Deployment Summary
  • Troubleshooting

---

✨ Features

• ⚡ Lightning Fast - Lightweight, no dependencies
• 🎨 Fully Customizable - Colors, text, icons
• 🔌 n8n Integration - Works with n8n webhooks
• 📱 Responsive - Mobile, tablet, desktop
• 🌐 CDN Ready - Fast global delivery
• 🚀 Production Ready - Battle-tested

---

🎯 Configuration

Basic

createChat({
    webhookUrl: 'https://your-n8n.com/webhook/id',
    botName: 'Support Bot',
    botAvatar: '🤖',
    placeholder: 'Type your message...',
    initialMessages: [
        'Hello! 👋',
        'How can I help you?'
    ]
});

All Options

Option	Type	Default	Description
webhookUrl	string	required	Your n8n webhook URL
botName	string	'Smart Assistant'	Bot name in header
botAvatar	string	'🤖'	Bot icon (emoji)
userAvatar	string	'👤'	User icon (emoji)
placeholder	string	'Type your message...'	Input placeholder
initialMessages	array	[]	Opening messages

---

🎨 Customization

Colors

<style>
.chat-widget-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.chat-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
</style>

---

📝 WordPress Integration

Using WPCode Plugin (Recommended)

1. Install WPCode plugin
2. Go to Code Snippets → + Add Snippet
3. Paste the CDN code above
4. Settings:
   • Code Type: HTML Snippet
   • Location: Site Wide Footer
   • Status: Active
5. Save!

---

🛠️ Development

Prerequisites

• Bun (recommended) or Node.js 14+

Setup

# Clone
git clone https://github.com/yourusername/simple-chat-widget.git
cd simple-chat-widget

# Install
bun install

# Dev
bun run dev
# Opens http://localhost:4321

Commands

bun run dev              # Dev server
bun run build            # Build widget + docs
bun run deploy           # Deploy to Netlify

---

📁 Project Structure

simple-chat-widget/
├── src/
│   ├── chat-widget-simple.js    # Widget source
│   └── widget.css                # Widget styles
├── docs/                         # Astro documentation site
│   └── src/
│       ├── pages/
│       ├── layouts/
│       └── components/
├── dist/                         # Build output (CDN files)
├── examples/                     # Usage examples
└── wordpress/                    # WordPress plugin

---

🌐 CDN Files

• Widget JS: https://chat-widget.coderaai.com/chat-widget-simple.js
• Widget CSS: https://chat-widget.coderaai.com/widget.css
• Demo Page: https://chat-widget.coderaai.com/

---

🚀 Deployment

This project is deployed on Dokploy with Docker + Nginx.

Deploy to Dokploy

See docs-deployment/DOKPLOY_DEPLOYMENT.md for complete instructions.

Quick Deploy:

1. Fork this repository
2. Connect to Dokploy
3. Set build type to Dockerfile
4. Deploy!

Deploy to Other Platforms

• Netlify/Vercel: See docs-deployment/VERCEL_DEPLOYMENT.md
• Any Docker host: Use the included Dockerfile

---

📄 License

MIT License - see LICENSE

---

🤝 Contributing

Contributions welcome! Please open an issue or PR.

---

📧 Support

• Issues: GitHub Issues
• Docs: simple-chat-widget.netlify.app/docs

---

Made with ❤️ | Compatible with n8n • CDN Ready • Production Ready