Interactive Customer Service Knowledge Base

Interactive Customer Service Knowledge Base

Find answers to common questions and support issues.

Categories

Articles

Welcome to the Knowledge Base

Select an article from the left to view its content here.

Our standard shipping option typically takes 5-7 business days for delivery within the continental USA. The cost is a flat rate of $5.99.

Expedited Shipping

We offer expedited shipping for $12.99, with an estimated delivery time of 2-3 business days.

Free Shipping

Orders totaling over $75.00 (before tax) qualify for free standard shipping.

' }, { id: 2, category: 'Shipping', title: 'How can I track my order?', content: '

Tracking Information

Once your order has shipped, you will receive a shipping confirmation email that includes a tracking number. You can use this number on the carrier\'s website (e.g., UPS, FedEx) to track the progress of your delivery.

You can also find the tracking number in your order history by logging into your account on our website.

' }, { id: 3, category: 'Returns', title: 'What is your return policy?', content: '

30-Day Returns

We accept returns for most items within 30 days of the delivery date. To be eligible for a return, your item must be:

  • Unused and in the same condition that you received it.
  • In the original packaging.

Some items, such as final sale products, are not eligible for returns.

' }, { id: 4, category: 'Returns', title: 'How do I start a return?', content: '

Starting a Return

To initiate a return, please visit our online Returns Portal. You will need your order number (e.g., US12345) and the email address used to place the order.

Follow the on-screen instructions to select the items you wish to return and print your prepaid return label.

' }, { id: 5, category: 'Account', title: 'How do I reset my password?', content: '

Password Reset

If you have forgotten your password, click the "Forgot Password?" link on the login page. Enter your account email address, and we will send you a link to reset your password.

If you do not receive the email within 15 minutes, please check your spam or junk folder.

' }, { id: 6, category: 'Product', title: 'Are your products covered by a warranty?', content: '

Manufacturer\'s Warranty

Most of our electronic products are covered by a one-year limited manufacturer\'s warranty. This warranty covers defects in materials and workmanship under normal use.

For specific warranty details, please refer to the product page or the documentation included with your product.

' }, ]; // --- ELEMENT SELECTIONS --- const tabButtons = { kb: document.getElementById('tab-btn-kb'), manage: document.getElementById('tab-btn-manage') }; const tabContents = { kb: document.getElementById('tab-content-kb'), manage: document.getElementById('tab-content-manage') }; const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); // KB View const searchInput = document.getElementById('search-input'); const categoriesContainer = document.getElementById('categories-container'); const articlesList = document.getElementById('articles-list'); const initialMessage = document.getElementById('initial-message'); const articleContentWrapper = document.getElementById('article-content-wrapper'); const articleTitle = document.getElementById('article-title'); const articleCategory = document.getElementById('article-category'); const articleContent = document.getElementById('article-content'); const downloadPdfBtn = document.getElementById('download-pdf-btn'); // Manage View const manageTableBody = document.getElementById('manage-table-body'); const formHeader = document.getElementById('form-title-header'); const formTitle = document.getElementById('form-article-title'); const formCategory = document.getElementById('form-article-category'); const formContent = document.getElementById('form-article-content'); const saveBtn = document.getElementById('save-article-btn'); const cancelBtn = document.getElementById('cancel-edit-btn'); let currentTab = 'kb'; let activeArticleId = null; let editingArticleId = null; // --- TAB & NAVIGATION --- const showTab = (tabName) => { currentTab = tabName; Object.keys(tabContents).forEach(key => tabContents[key].classList.toggle('hidden', key !== tabName)); Object.keys(tabButtons).forEach(key => tabButtons[key].classList.toggle('active', key !== tabName)); prevBtn.disabled = (tabName === 'kb'); nextBtn.disabled = (tabName === 'manage'); }; // --- RENDER FUNCTIONS --- const renderAll = () => { renderCategories(); filterAndRenderArticles(); renderManagementTable(); } const renderManagementTable = () => { manageTableBody.innerHTML = KB_ARTICLES.map(article => ` ${article.title} ${article.category} `).join(''); }; const renderCategories = () => { const categories = ['All', ...new Set(KB_ARTICLES.map(a => a.category))]; categoriesContainer.innerHTML = categories.map(cat => `` ).join(''); }; const renderArticles = (articlesToRender) => { articlesList.innerHTML = ''; if(articlesToRender.length === 0) { articlesList.innerHTML = `

No articles found.

`; return; } articlesList.innerHTML = articlesToRender.map(article => `${article.title}` ).join(''); }; const displayArticle = (articleId) => { const article = KB_ARTICLES.find(a => a.id === articleId); if (!article) { initialMessage.classList.remove('hidden'); articleContentWrapper.classList.add('hidden'); activeArticleId = null; return; } activeArticleId = articleId; document.querySelectorAll('.article-link').forEach(link => link.classList.remove('active')); const activeLink = document.querySelector(`.article-link[data-id='${articleId}']`); if(activeLink) activeLink.classList.add('active'); initialMessage.classList.add('hidden'); articleContentWrapper.classList.remove('hidden'); articleTitle.textContent = article.title; articleCategory.textContent = article.category; articleContent.innerHTML = article.content; }; const filterAndRenderArticles = () => { const searchTerm = searchInput.value.toLowerCase(); const activeCategoryBtn = categoriesContainer.querySelector('.category-btn.active'); const activeCategory = activeCategoryBtn ? activeCategoryBtn.dataset.category : 'All'; let filteredArticles = KB_ARTICLES; if (activeCategory !== 'All') filteredArticles = filteredArticles.filter(a => a.category === activeCategory); if (searchTerm) filteredArticles = filteredArticles.filter(a => a.title.toLowerCase().includes(searchTerm) || a.content.toLowerCase().includes(searchTerm)); renderArticles(filteredArticles); }; // --- CRUD & FORM LOGIC --- const resetForm = () => { editingArticleId = null; formHeader.textContent = "Add New Article"; formTitle.value = ''; formCategory.value = ''; formContent.value = ''; cancelBtn.classList.add('hidden'); }; const populateFormForEdit = (articleId) => { const article = KB_ARTICLES.find(a => a.id === articleId); if (article) { editingArticleId = article.id; formHeader.textContent = "Edit Article"; formTitle.value = article.title; formCategory.value = article.category; formContent.value = article.content; cancelBtn.classList.remove('hidden'); } }; const handleSave = () => { const title = formTitle.value.trim(); const category = formCategory.value.trim(); const content = formContent.value.trim(); if (!title || !category || !content) { alert('Please fill all fields.'); return; } if (editingArticleId) { // Update const index = KB_ARTICLES.findIndex(a => a.id === editingArticleId); if (index > -1) { KB_ARTICLES[index] = { ...KB_ARTICLES[index], title, category, content }; } } else { // Create const newId = KB_ARTICLES.length > 0 ? Math.max(...KB_ARTICLES.map(a => a.id)) + 1 : 1; KB_ARTICLES.push({ id: newId, title, category, content }); } resetForm(); renderAll(); // If the updated article was being viewed, refresh its content if(activeArticleId && activeArticleId === editingArticleId) displayArticle(activeArticleId); }; const handleDelete = (articleId) => { if (confirm('Are you sure you want to delete this article?')) { KB_ARTICLES = KB_ARTICLES.filter(a => a.id !== articleId); if (activeArticleId === articleId) { displayArticle(null); // Clear view if deleted article was active } renderAll(); } }; // --- EVENT HANDLERS --- const handleCategoryClick = (e) => { if (e.target.classList.contains('category-btn')) { categoriesContainer.querySelectorAll('.category-btn').forEach(btn => btn.classList.remove('active')); e.target.classList.add('active'); filterAndRenderArticles(); } }; const handleArticleClick = (e) => { e.preventDefault(); const link = e.target.closest('.article-link'); if (link) displayArticle(parseInt(link.dataset.id)); }; const handleManageTableClick = (e) => { const target = e.target; const id = parseInt(target.closest('tr')?.querySelector('.edit-btn, .delete-btn')?.dataset.id); if (target.classList.contains('edit-btn')) populateFormForEdit(id); if (target.classList.contains('delete-btn')) handleDelete(id); }; const generatePDF = () => { if (!activeArticleId) return; const { jsPDF } = window.jspdf; const pdfContent = document.getElementById('pdf-content'); pdfContent.querySelector('#pdf-button-container')?.classList.add('hidden'); html2canvas(pdfContent, { 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); const safeTitle = articleTitle.textContent.replace(/[^a-z0-9]/gi, '_').toLowerCase(); pdf.save(`kb-${safeTitle}.pdf`); pdfContent.querySelector('#pdf-button-container')?.classList.remove('hidden'); }); }; // --- ATTACH LISTENERS --- // Nav prevBtn.addEventListener('click', () => showTab('kb')); nextBtn.addEventListener('click', () => showTab('manage')); tabButtons.kb.addEventListener('click', () => showTab('kb')); tabButtons.manage.addEventListener('click', () => showTab('manage')); // KB View searchInput.addEventListener('input', filterAndRenderArticles); categoriesContainer.addEventListener('click', handleCategoryClick); articlesList.addEventListener('click', handleArticleClick); downloadPdfBtn.addEventListener('click', generatePDF); // Manage View manageTableBody.addEventListener('click', handleManageTableClick); saveBtn.addEventListener('click', handleSave); cancelBtn.addEventListener('click', resetForm); // --- INITIALIZATION --- renderAll(); });
Scroll to Top