Smart Self-Service Customer Support
Get instant answers, browse help articles, or submit a ticket.
AI
Support Assistant
Categories
Articles
Knowledge Base
Select an article to view its content.
Can't find an answer? Submit a ticket.
Ticket Submitted Successfully!
Your ticket ID is . Our support team will get back to you at within 24-48 hours.
We accept returns within 30 days for unused items in original packaging. Final sale items are not eligible.
' }, { id: 4, category: 'Account', title: 'Password Reset', content: 'Forgot Password
Click "Forgot Password?" on the login page and enter your email. A reset link will be sent to you.
' }, ]; // --- GENERAL & TABBING --- const mainTabs = document.querySelectorAll('.main-tab-btn'); const tabContents = { chat: document.getElementById('tab-content-chat'), kb: document.getElementById('tab-content-kb'), ticket: document.getElementById('tab-content-ticket'), }; const showTab = (tabName) => { Object.values(tabContents).forEach(content => content.classList.add('hidden')); mainTabs.forEach(btn => btn.classList.remove('active')); tabContents[tabName].classList.remove('hidden'); document.querySelector(`.main-tab-btn[data-tab="${tabName}"]`).classList.add('active'); }; mainTabs.forEach(btn => btn.addEventListener('click', () => showTab(btn.dataset.tab))); // --- CHATBOT LOGIC --- const chatLog = document.getElementById('chat-log'); const userInput = document.getElementById('user-input'); const sendBtn = document.getElementById('send-btn'); const downloadChatPdfBtn = document.getElementById('download-chat-pdf-btn'); const addChatMessage = (sender, message) => { const bubble = document.createElement('div'); bubble.className = `chat-bubble ${sender === 'user' ? 'user-bubble' : 'bot-bubble'}`; bubble.textContent = message; chatLog.appendChild(bubble); chatLog.scrollTop = chatLog.scrollHeight; }; const getBotResponse = (input) => { const lowerInput = input.toLowerCase(); if (lowerInput.includes('track') || lowerInput.includes('status')) return "Please provide your order number (e.g., US12345678)."; if (lowerInput.startsWith('us')) return `Order #${input.toUpperCase()} is in transit. Estimated delivery: October 3, 2025.`; if (lowerInput.includes('return')) return "You can start a return within 30 days of purchase from our Returns Portal on the website."; if (lowerInput.includes('shipping')) return "We offer standard (5-7 days) and expedited (2-3 days) shipping. Orders over $75 get free standard shipping."; if (lowerInput.includes('hello') || lowerInput.includes('hi')) return "Hello! How can I assist you today?"; return "I'm sorry, I'm not sure how to help. You can try our Knowledge Base or submit a ticket for more complex issues."; }; const handleUserMessage = () => { const message = userInput.value.trim(); if (!message) return; addChatMessage('user', message); userInput.value = ''; setTimeout(() => addChatMessage('bot', getBotResponse(message)), 1000); }; sendBtn.addEventListener('click', handleUserMessage); userInput.addEventListener('keydown', (e) => e.key === 'Enter' && handleUserMessage()); // --- KNOWLEDGE BASE LOGIC --- const kbSearchInput = document.getElementById('kb-search-input'); const kbCategoriesContainer = document.getElementById('kb-categories-container'); const kbArticlesList = document.getElementById('kb-articles-list'); const kbInitialMessage = document.getElementById('kb-initial-message'); const kbArticleWrapper = document.getElementById('kb-article-wrapper'); const kbArticleTitle = document.getElementById('kb-article-title'); const kbArticleContent = document.getElementById('kb-article-content'); let activeArticleId = null; const renderKB = () => { const searchTerm = kbSearchInput.value.toLowerCase(); const activeCategory = kbCategoriesContainer.querySelector('.category-btn.active')?.dataset.category || 'All'; const categories = ['All', ...new Set(KB_ARTICLES.map(a => a.category))]; kbCategoriesContainer.innerHTML = categories.map(cat => ``).join(''); let articles = KB_ARTICLES.filter(a => (activeCategory === 'All' || a.category === activeCategory) && (a.title.toLowerCase().includes(searchTerm) || a.content.toLowerCase().includes(searchTerm))); kbArticlesList.innerHTML = articles.map(a => `${a.title}`).join(''); }; const displayArticle = (id) => { const article = KB_ARTICLES.find(a => a.id === id); if (!article) return; activeArticleId = id; kbInitialMessage.classList.add('hidden'); kbArticleWrapper.classList.remove('hidden'); kbArticleTitle.textContent = article.title; kbArticleContent.innerHTML = article.content; document.querySelectorAll('.article-link').forEach(link => link.classList.toggle('active', parseInt(link.dataset.id) === id)); }; kbCategoriesContainer.addEventListener('click', e => { if (e.target.classList.contains('category-btn')) { kbCategoriesContainer.querySelector('.category-btn.active')?.classList.remove('active'); e.target.classList.add('active'); renderKB(); } }); kbArticlesList.addEventListener('click', e => { e.preventDefault(); const link = e.target.closest('.article-link'); if (link) displayArticle(parseInt(link.dataset.id)); }); kbSearchInput.addEventListener('input', renderKB); // --- TICKET SUBMISSION LOGIC --- const ticketForm = document.getElementById('ticket-form-container'); const successMessage = document.getElementById('ticket-success-message'); document.getElementById('create-ticket-btn').addEventListener('click', () => { const name = document.getElementById('customer-name').value; const email = document.getElementById('customer-email').value; if (!name || !email) { alert("Please fill in your name and email."); return; } document.getElementById('ticket-id-display').textContent = `TICKET-${Math.floor(1000 + Math.random() * 9000)}`; document.getElementById('customer-email-display').textContent = email; ticketForm.classList.add('hidden'); successMessage.classList.remove('hidden'); }); document.getElementById('create-another-ticket-btn').addEventListener('click', () => { ticketForm.classList.remove('hidden'); successMessage.classList.add('hidden'); // Clear form fields document.getElementById('customer-name').value = ''; document.getElementById('customer-email').value = ''; document.getElementById('ticket-subject').value = ''; document.getElementById('ticket-description').value = ''; }); // --- PDF GENERATION --- const generatePDF = (contentElementId, fileName) => { const content = document.getElementById(contentElementId); html2canvas(content, { scale: 2, useCORS: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const imgWidth = pdfWidth - 20; const imgHeight = (canvas.height * imgWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); pdf.save(`${fileName}.pdf`); }); }; downloadChatPdfBtn.addEventListener('click', () => generatePDF('chat-log-wrapper', 'chat-transcript')); document.getElementById('download-kb-pdf-btn').addEventListener('click', () => { if(activeArticleId) generatePDF('kb-pdf-content', 'kb-article'); else alert("Please select an article to download."); }); // --- INITIALIZATION --- renderKB(); });