# 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="/files/EDJKK8ji7vpHdjE8OzEh" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/onboarding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.