# 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

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FbwS77M2FteWXzhKfh1am%2Fonboarding.png?alt=media&#x26;token=07ea3dca-cde0-4f04-9a9c-2d798e203840" alt="Gravity onboarding component" width="563"><figcaption></figcaption></figure></div>

### Usage

```javascript
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.