Onboarding Overview

PreviousNext

Overview of user onboarding flows in Zooly

Overview

Zooly offers specialized onboarding journeys tailored to different user intents and acquisition channels:

flowchart TD Visitor["New Visitor / Creator"] --> Entry{"Entry Point"} Entry -->|Main Landing / Interactive| AgentFlow["Agent Setup Onboarding<br/>(/onboarding)"] Entry -->|Mobile Ads / Quick Signup| FastFlow["Fast Signup Flow<br/>(/talent/fast-signup)"] Entry -->|Admin / Manual Setup| LegacyFlow["Legacy Setup Wizard<br/>(SetupScreen in @zooly/client)"] AgentFlow --> AgentDesc["Interactive 7-question chat with AI agent<br/>Background memory distillation + goal tracking<br/>One-shot durable memory promotion on claim"] FastFlow --> FastDesc["Mobile brand & category picker<br/>Deferred popup authentication<br/>Social handle validation + draft buffer"] LegacyFlow --> LegacyDesc["Manual 7-step profile, licensing & Stripe connect wizard"]

Onboarding Journeys

1. Agent Setup Onboarding

The flagship onboarding experience at /onboarding. Instead of filling out static forms, new visitors chat directly with an AI agent to establish their representation terms, pricing floors, and deal boundaries.

  • Audience Selection: Specialized paths for Talent, Brands, Agencies, Brand Reps, and IP.
  • 7-Question Interview: Guided by scripted persona directives while running background memory distillation (distilMemory: true).
  • Goal-Driven Sign-in: The planner evaluates whether representation criteria are met (goals.talent-setup = met) to trigger the sign-in prompt.
  • Durable Promotion: Signing in claims the guest room and runs runOnboardingPromotion (Planner + Arvist) to seed durable account memory.

2. Fast Signup Flow

A mobile-optimized wizard at /talent/fast-signup designed for rapid conversion from social channels and ads.

  • Late Authentication: Users select target brands and enter social links as guests before signing in.
  • Social Profile Verification: Validates handles across Instagram, TikTok, YouTube, and X before advancing.
  • Draft Buffer & Flush: Buffers progress in localStorage and automatically flushes to the account upon authentication.

3. Legacy Setup Wizard

The original component-based setup flow implemented as SetupScreen in packages/client/src/screens/SetupScreen.tsx.

  • Step-by-step forms: Profile, Campaigns, Terms/Licensing (Voice, Image, Merch), Samples, Z-Link, and Stripe Connect.
  • Direct Account APIs: Queries /api/account and /api/account/payout-route to track completion checkboxes.

Onboarding Routes & Pages

FlowURL PathPrimary ComponentDocumentation
Agent Setup/onboardingOnboardingPage.tsx (@zooly/offers-client)Agent Setup Onboarding
Fast Signup/talent/fast-signupFastSignupPage.tsx (@zooly/offers-client)Fast Signup Flow
Legacy WizardEmbeddedSetupScreen.tsx (@zooly/client)Legacy Setup Wizard

Legacy Setup Wizard Reference

The legacy SetupScreen component accepts navigation callbacks from the host application:

interface SetupScreenProps {
  onGoToProfile: () => void;
  onGoToDashboard: () => void;
  onGoToVoiceLicense?: () => void;
  onGoToImageLicense?: () => void;
  onGoToMerchLicense?: () => void;
}

Steps

StepNameWhat It Does
1ProfileLinks to profile setup. Shows current display name and avatar status.
2CampaignsInformational step about campaign types. Links to campaign settings.
3TermsLinks to license setup screens (voice, image, merch).
4SamplesInformational step about uploading voice/image samples.
5Z LinkShows preview of public page URL. Links to Z Link page.
6PaymentsShows Stripe Connect status. Links to payout setup if not connected.
7ReviewSummary dashboard. Shows completion status per area with "Go to Dashboard" button.