Onboarding

A great way to increase engagement and retention is to provide an onboarding flow that guides users through completing the key actions needed to get maximum benefit from your application.

The Onboarding component is a flow to help users set up the app. It accepts multiple views and marks the user as onboarded when the process is completed if the save prop is true.

Preview

Usage

import { Onboarding } from 'components/lib';

function MyComponent({ ...props }){

  const views = [
    { 
      name: 'Welcome', 
      description: 'Introduction to the app', 
      component: <Welcome /> 
    },
    { 
      name: 'Profile Setup', 
      description: 'Set up your profile', 
      component: <ProfileSetup /> 
    },
    { 
      name: 'Preferences', 
      description: 'Set your preferences', 
      component: <Preferences /> 
    },
  ];

  return (
    <Onboarding views={ views } onFinish='/dashboard' save={ true } />
  );
}

Props

Prop	Description	Required	Value
onFinish	url to navigate to when finished	required	string, default: /dashboard
save	Set onboarded column in user database to true on completion	optional	boolean
views	array of child views	required	array of objects ({ name: string, description: string, component: component })

Notes

• The Onboarding component uses CheckList, Button, Logo, useNavigate, Event, Pagination, useLocation, and useTranslation from 'components/lib'.

• The views prop specifies the list of views for the onboarding process, each containing a name, description, and component.

• The onFinish prop specifies the URL to navigate to when the onboarding process is finished.

• The save prop indicates whether to set the onboarded column in the user database to true upon completion.

• The PaginationNav function handles the pagination navigation between views.