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
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 usesCheckList
,Button
,Logo
,useNavigate
,Event
,Pagination
,useLocation
, anduseTranslation
from'components/lib'
.The
views
prop specifies the list of views for the onboarding process, each containing aname
,description
, andcomponent
.The
onFinish
prop specifies the URL to navigate to when the onboarding process is finished.The
save
prop indicates whether to set theonboarded
column in the user database to true upon completion.The
PaginationNav
function handles the pagination navigation between views.
Last updated