Onboarding Flow Overview
The onboarding process in Hero Marketer is designed to be intuitive and streamlined, guiding you through four essential steps to set up your advertising campaign.
Navigation Components
Progress Sidebar
Located on the left side of the screen
Shows all setup steps with their current status
Indicates completed steps with a checkmark
Highlights the current active step
Steps become clickable once previous steps are completed
Navigation Footer
Located at the bottom of each step
Shows "Back" and "Continue" buttons when applicable
Button text changes based on the current step
Buttons are disabled during loading states or when required information is missing
Setup Steps
Connect Google Ads
Initial step to link your Google Ads account
Connect button is prominently displayed in the main content area
Progress sidebar shows this as the first required step
Select Account
Choose your Google Ads advertising account
Lists all available accounts with selection capability
Shows "Use This Account" button when an account is selected
Button changes to "Saving..." during the selection process
Product Information
Enter details about your product:
Product Name
Product Description
Website URL
Form validation ensures all required fields are completed
"Save & Continue" button becomes active once all fields are valid
Review AI Analysis
Review the AI-generated analysis of your product
Ability to review and confirm the analysis
Final "Save & Continue" button to complete the onboarding
Interactive Elements
Progress Tracking: Each step shows completion status with visual indicators
Validation Feedback: Immediate feedback on form inputs
Loading States: Clear indication when actions are being processed
Error Handling: Modal dialogs for critical errors with clear explanations
Accessibility: Full keyboard navigation support and ARIA attributes
Navigation Rules
Steps become accessible sequentially as previous steps are completed
Cannot skip required steps
Can navigate back to previous completed steps
Current progress is saved automatically
Completion redirects to campaign creation
Status Indicators
Checkmark: Indicates completed steps
Highlight: Shows current active step
Disabled State: Indicates inaccessible steps
Loading Spinners: Shows processing states