Skip to content

Onboarding

How It Works

The Onboarding feature guides users through the SDK's functionality, helping them understand how to use the virtual try-on experience effectively.

When to Use

  • Show onboarding when users first interact with the SDK
  • Use it to explain the virtual try-on process

Behavior

The Onboarding is displayed repeatedly until the user completes it.
After completion, it won't be shown again unless the completion status reset.

Data Management

The SDK provides two options for managing the onboarding completion status:

By default, the SDK uses platforms' local storage to store the onboarding completion status. This is the simplest approach and requires no additional configuration.

You can implement your own custom data provider that:

  • Provides the isOnboardingCompleted status whether the user has completed the onboarding process
  • React to the completeOnboarding callback to mark the onboarding as completed

This allows you to

  • Integrate with your existing user management system
  • Sync the status across devices
  • Reset isOnboardingCompleted whenever you want to show the onboarding again
Customization

Customization

Text Elements
  • Text for the onboardingButtonNext
  • Text for the onboardingButtonStart
Typography
  • General buttonM text style for Next/Start button
Shapes
  • General buttonM shape for Next/Start button
Colors
  • General brand color for Next/Start button background
  • General onDark color for button label
Styles
  • Toogle preferCloseButtonOnTheRight to reverse pageBar

Slides

How It Works

How It Works

The "How It Works" page provides an interactive demonstration of the virtual try-on feature:

  • Shows 3 example images of the same person in the same pose
  • Each example includes both the person's photo and the item preview
  • Demonstrates the transformation process

Default

By default, this is the only slide of the onboarding with embedded terms of service instead of a separate consent

Customization

Customization

Images
  • List of 3 onboardingHowItWorksItems, each containing:
    • Flatlay itemPreview image of the item for try-on with transparent background
    • Example itemPhoto image of the try-on result with the person wearing this item
Text Elements
  • Optional onboardingHowItWorksPageTitle
  • onboardingHowItWorksTitle displayed below the interactive section
  • onboardingHowItWorksDescription explaining how the try-on feature works
Typography
  • General titleL text style for the title
  • General regular text style for the description text
Colors
  • General primary color for title and description
Shapes
  • onboardingImageL shape for large image views
  • onboardingImageS shape for small image views

Best Results

Best Results

The "Best Results" page helps users achieve optimal results:

  • Shows 2 good examples and 2 bad examples of input images
  • Provides guidance on photo requirements

Why is it deprecated?

Examples of good source photos are now included into the Image Picker, so we recommend disabling this slide to avoid overwhelming the user with onboarding

Customization

Customization

Images
  • List of 2 onboardingBestResultsGood images representing good examples
  • List of 2 onboardingBestResultsBadimages representing bad examples
Icons
  • onboardingBestResultsGood24 icon for good examples badge
  • onboardingBestResultsBad24 icon for bad examples badge
Text Elements
  • Optional onboardingBestResultsPageTitle
  • onboardingBestResultsTitle displayed below the best results samples
  • onboardingBestResultsDescription explaining how to achieve the best results
Typography
  • General titleL text style for the title
  • General regular text style for the description text
Colors
  • General primary color for title and description
Shapes
  • onboardingImageS shape for example image views
Styles
  • Toggle to reduceOnboardingBestResultsShadows on the page

Consent

The Consent page can be integrated into the onboarding flow as a slide to collect user permissions for data processing. This slide explains the terms of service and/or privacy policies to users. For detailed information about configuring the Consent screen, including customization options and implementation details, please refer to the Consent page.

Analytics

The following analytics events may be tracked during onboarding:

Type Event Page Id Description
page howItWorks
bestResults
consent		 How It Works slide opened
Best Results slide opened
Consent slide opened
onboarding onboardingFinished howItWorks
bestResults
consent		 Completion of all onboarding steps on
the last slide according to the configuration
onboarding consentsGiven consent Refer to the Consent page
exit howItWorks
bestResults
consent		 SDK was closed on one of the onboarding slides

How to implement

  • Android
  • iOS
  • Flutter