Onboarding¶

Sets up the onboarding process to guide users through the SDK's features and capabilities.

OnboardingFeature {
  howItWorksPage: OnboardingHowItWorksPageFeature // (1)!
  bestResultsPage: OnboardingBestResultsPageFeature | null // (2)!

  strings {
    onboardingButtonNext: String // (3)!
    onboardingButtonStart: String // (4)!
  }

  shapes {
    onboardingImageL: Shape // (5)!
    onboardingImageS: Shape // (6)!
  }

  dataProvider: BuiltIn | Custom {
    isOnboardingCompleted: Observable<Bool> // (7)!
    completeOnboarding: Callback() // (8)!
  }
}

1. Configures the first page of onboarding that demonstrates how virtual try-on works through interactive examples.
2. Sets up an optional page showing examples of photos that yield the best try-on results.
3. Defines the text label for the navigation button to proceed to the next onboarding page.
4. Specifies the text label for the button that completes onboarding and starts the main interface.
5. Controls the shape configuration for large images displayed in the onboarding process.
6. Sets the shape configuration for small images used in the onboarding interface.
7. Provides an observable property that tracks whether the user has completed the onboarding process.
8. Defines the callback function to mark onboarding as completed when the user finishes the process.