Modern AI Assistant with Advanced API Integration
Configure and test your chatbot in real-time
Test different themes and positions
Ready-to-use conversation flow with all your API endpoints connected
// Example configurations:
// 1. Show product selection (default)
window.MoeenChatbot.init({
customerName: 'محمد',
showAllProducts: true,
productName: null // User will see product buttons
});
// 2. Skip to specific product directly
window.MoeenChatbot.init({
customerName: 'محمد',
productName: 'Mojaz' // Skip product selection, go to Mojaz issues
});
// API calls when productName is provided:
// 1. POST /start with { customerName: "محمد" } (no allProducts)
// 2. POST /product with { productName: "Mojaz" }
// 3. Shows: "هلا وسهلا محمد" + issue selection buttons
Clean, production-ready configuration with no mock data
// Initialize with API only mode
window.MoeenChatbot.init({
// UI Configuration
position: 'bottom-right',
theme: 'light',
language: 'ar',
// 🚨 API Configuration - NO MOCK DATA
apiUrl: '/api/flow',
chatApiUrl: '/api/chat', // ⚠️ CREATE THIS ENDPOINT
useMockData: false, // ✅ Disabled
fallbackToMock: false, // ✅ No fallback
// Customer Configuration
customerName: 'خالد',
showAllProducts: true,
// API Settings
timeout: 10000,
retries: 3,
// Optional: Custom headers
customHeaders: {
'X-API-Version': '1.0',
'X-Client': 'web-chat'
}
});