Template sistem untuk membuat interactive story dengan integrasi chatbot n8n. Proyek ini menggunakan arsitektur modular dengan chatbot template yang dapat digunakan ulang di berbagai proyek story.
- ✅ Interactive story content dengan pilihan cerita
- ✅ Editable text (double-click to edit)
- ✅ Image upload untuk scenes
- ✅ Responsive design untuk semua device
- ✅ Navigation system yang intuitif
- ✅ Chat history dan save progress
- ✅ n8n workflow integration
- ✅ Real-time chat dengan typing indicators
- ✅ Configurable bot personality
- ✅ Multiple persona templates
- ✅ Message history dan context awareness
- ✅ Error handling & retry mechanism
- ✅ Webhook security protection
- ✅ Cross-browser compatibility (Chrome, Safari, Edge, Firefox)
- ✅ Mobile-first responsive design
- ✅ Web Components architecture
- ✅ Modular template system
- ✅ Comprehensive debugging tools
- ✅ Performance optimized
- ✅ PWA ready
interactiveStory_proj/
├── 📄 index.html # Main story page
├── 📄 discussion.html # Discussion page
├── 🎨 styles/ # Styling files
│ ├── main.css # Core styles
│ ├── index.css # Homepage styles
│ ├── discussion.css # Discussion page styles
│ └── browser-compatibility.css # Cross-browser support
├── ⚡ js/ # JavaScript files
│ ├── main.js # Main story logic
│ ├── browser-polyfills.js # Browser compatibility
│ ├── error-handler.js # Error management
│ ├── performance-utils.js # Performance utilities
│ └── chat-history-manager.js # Chat history functionality
├── 🤖 chatbot-template/ # Reusable chatbot system
│ ├── components/ # Chat UI components
│ ├── js/ # Core chatbot logic
│ ├── styles/ # Chatbot styling
│ ├── tools/ # Debugging tools
│ ├── examples/ # Configuration examples
│ └── docs/ # Template documentation
├── 🧪 testing/ # Test files
│ ├── test-chat-history.html
│ ├── test-discussion.html
│ ├── browser-test.html
│ └── test-markdown-cleanup.html
├── 🧩 components/ # Shared components
│ └── shared-footer.js
├── 🖼️ assets/ # Static assets
│ ├── images/ # Story images
│ └── icons/ # UI icons
└── 🛠️ scripts/ # Utility scripts
├── cleanup-old-files.sh
└── setup-new-project.sh
- Web browser yang modern (Chrome 60+, Safari 12+, Edge 79+, Firefox 65+)
- Local web server (optional, untuk development)
- n8n instance untuk chatbot integration
- Clone repository
git clone https://github.com/yourusername/interactive-story-project.git
cd interactive-story-project- Open in browser
# Langsung buka file
open index.html
# Atau gunakan local server (recommended)
python -m http.server 8000
# Then visit http://localhost:8000- Configure chatbot (optional)
# Buka bot configuration
open chatbot-template/botSetting.html- Setup n8n workflow: Import
chatbot-template/examples/n8n-chatbot-workflow.json - Configure bot settings: Buka
chatbot-template/botSetting.html - Set webhook URL: Update endpoint di konfigurasi bot
- Choose persona: Pilih dari predefined templates
- Test connection: Gunakan diagnostic tools
// Configure story-specific bot
const storyConfig = {
botName: "Story Narrator",
botDescription: "Your guide through this adventure",
botAvatar: "📚",
webhookUrl: "YOUR_WEBHOOK_URL_HERE", // Jangan commit URL asli!
theme: {
primaryColor: "#3b82f6",
secondaryColor: "#60a5fa"
}
};
window.ConfigManager.saveConfig(storyConfig);# Gunakan setup script
./scripts/setup-new-project.sh my-new-story
# Atau manual copy template
cp -r chatbot-template/ /path/to/new-project/# Browser compatibility test
open testing/browser-test.html
# Chat history test
open testing/test-chat-history.html
# Webhook connection test
open chatbot-template/tools/test-webhook-connection.html
# n8n diagnostic
open chatbot-template/tools/n8n-diagnostic.html| Browser | Version | Status |
|---|---|---|
| Chrome | 60+ | 🟢 Full Support |
| Safari | 12+ | 🟢 Full Support |
| Edge | 79+ | 🟢 Full Support |
| Firefox | 65+ | 🟢 Full Support |
⚠️ Important: Jangan commit webhook URLs atau API keys ke repository!
- Gunakan environment variables untuk sensitive data
- Webhook URLs dan secrets sudah di-exclude dalam
.gitignore - Test konfigurasi menggunakan file local yang tidak di-track git
- Chatbot Template Guide: Dokumentasi lengkap template
- Browser Compatibility: Cross-browser support guide
- Template Usage: Cara menggunakan template system
- Fork repository ini
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add some amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
- Webhook 404: Pastikan n8n workflow sudah aktif
- Config Not Saving: Cek localStorage availability di browser
- Components Not Loading: Periksa script loading order
- CORS Errors: Configure n8n CORS settings
- Gunakan
testing/browser-test.htmluntuk compatibility testing - Check
chatbot-template/tools/untuk debugging utilities - Buka browser console untuk error messages
- Test webhook connectivity dengan diagnostic tools
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with modern web standards
- Powered by n8n for chatbot integration
- Icons and images generated with AI assistance
- Cross-browser compatibility tested extensively
- 📖 Explore Documentation: Familiarize dengan template system
- 🧪 Test Integration: Gunakan diagnostic tools
- 🎨 Customize: Apply story theme dan branding
- 🚀 Create New Stories: Use setup script untuk new projects
- 🤝 Contribute: Share improvements back ke community
🚀 Happy storytelling! Mari buat interactive stories yang amazing! 🚀