Customer Onboarding Assistant
Let's get your account set up in a few simple steps.
1
Welcome
2
Profile
3
Preferences
4
Summary
Welcome to Our Platform!
We're excited to have you on board. This quick setup process will personalize your experience and help you get the most out of our service.
Tell us about yourself.
Set your preferences.
Email Notifications
Dashboard Theme
Onboarding Complete!
Here is a summary of your setup. You can change these settings at any time in your account.
Profile Information
Preferences
Full Name: ${onboardingData.name || 'Not provided'}
Company: ${onboardingData.company || 'Not provided'}
Role: ${onboardingData.role || 'Not provided'}
`; prefsSummary.innerHTML = `Notifications: ${onboardingData.notifications.length > 0 ? onboardingData.notifications.join(', ') : 'None'}
Theme: ${onboardingData.theme || 'Light'}
`; }; // --- EVENT HANDLERS --- const handleNav = (direction) => { if(direction === 'next' && currentStep < totalSteps) { collectData(currentStep); currentStep++; if (currentStep === totalSteps) { populateSummary(); } } else if (direction === 'prev' && currentStep > 1) { currentStep--; } updateUI(); }; const generatePDF = () => { const { jsPDF } = window.jspdf; const pdfContent = document.getElementById('pdf-content'); const pdfBtnContainer = document.getElementById('pdf-button-container'); if (!pdfContent || !pdfBtnContainer) return; pdfBtnContainer.style.display = 'none'; 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.setFontSize(22); pdf.setFont('helvetica', 'bold'); pdf.text('Onboarding Summary Report', pdfWidth / 2, 15, { align: 'center' }); pdf.addImage(imgData, 'PNG', 10, 25, imgWidth, imgHeight); pdf.save('onboarding-summary.pdf'); pdfBtnContainer.style.display = 'block'; }).catch(err => { console.error("Error generating PDF:", err); pdfBtnContainer.style.display = 'block'; }); }; // --- ATTACH LISTENERS --- nextBtn.addEventListener('click', () => handleNav('next')); prevBtn.addEventListener('click', () => handleNav('prev')); document.getElementById('download-pdf-btn').addEventListener('click', generatePDF); Object.values(tabButtons).forEach((btn, index) => { btn.addEventListener('click', () => { if (index < currentStep - 1) { // Allow navigation to completed steps currentStep = index + 1; updateUI(); } }); }); // --- INITIAL SETUP --- updateUI(); });