# @kano/kbc-onboarding

> > TODO: description

Latest version **2.1.17** (published 2023-03-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install @kano/kbc-onboarding
pnpm add @kano/kbc-onboarding
yarn add @kano/kbc-onboarding
bun add @kano/kbc-onboarding
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.17 |
| Published | 2023-03-23 |
| First published | 2020-12-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 56.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kano Computing |
| Maintainers | hector.bennett, petarsimonovic, kimonsatan, ellenw3lsh, camuskano, alexfiennes, kanocomputing, rpazdera, jamie_old_plantain |

## Links

- npm: https://www.npmjs.com/package/@kano/kbc-onboarding
- Repository: https://github.com/KanoComputing/kano-boilerplate-components
- Homepage: https://github.com/KanoComputing/kano-boilerplate-components#readme
- Issues: https://github.com/KanoComputing/kano-boilerplate-components/issues
- npm.io page: https://npm.io/package/@kano/kbc-onboarding

## Dependencies (8)

- [@kano/kbc-intl](https://npm.io/package/@kano/kbc-intl.md) ^2.0.13
- [@kano/kbc-icons](https://npm.io/package/@kano/kbc-icons.md) ^2.2.24
- [@kano/kbc-utils](https://npm.io/package/@kano/kbc-utils.md) ^2.2.4
- [@kano/kbc-video](https://npm.io/package/@kano/kbc-video.md) ^2.1.58
- [@kano/kbc-dialog](https://npm.io/package/@kano/kbc-dialog.md) ^2.0.105
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0
- [@kano/kbc-telemetry](https://npm.io/package/@kano/kbc-telemetry.md) ^5.0.14
- [@kano-world/kbc-clients](https://npm.io/package/@kano-world/kbc-clients.md) ^3.1.18

## Recent versions

- 2.1.17 (latest) — 2023-03-23
- 2.1.16 — 2023-03-22
- 2.1.15 — 2023-03-22
- 2.1.14 — 2023-03-01
- 2.1.13 — 2023-03-01
- 2.1.12 — 2023-02-17
- 2.1.11 — 2023-02-14
- 2.1.10 — 2023-01-30
- 2.1.9 — 2023-01-27
- 2.1.8 — 2023-01-26
- 2.1.7 — 2023-01-12
- 2.1.6 — 2023-01-12
- 2.1.5 — 2023-01-10
- 2.1.4 — 2023-01-10
- 2.1.3 — 2023-01-03
- … 115 more at https://npm.io/package/@kano/kbc-onboarding/versions

## README

# kbc-onboarding

A manager for user onboarding gamification.

## Setup

This package provides a context with a global `OnboardingManagerProvider` that you can use to trigger onboarding actions.

To set it up, add the following provider:

```tsx
import { OnboardingManagerProvider } from '@kano/kbc-toast';

const onboardingManagerConfig = {
    KB_APP_NAME: config.KB_APP_NAME,
    KB_KANO_WORLD_URL: config.KB_KANO_WORLD_URL,
};

ReactDOM.render(
    <OnboardingManagerProvider providerConfig={onboardingManagerConfig}>
        <App />
    </ToastManagerProvider>
);
```

## How to initiate onboarding

Onboarding is initiated via calling its `init()` method within the app as you can then add aditional logic such as "don't initiate unless a user has logged in and after the app has fully loaded".

```tsx
import { withOnboardingManager, IOnboardingManagerAPI } from '@kano/kbc-onboarding';

interface ComponentProps extends IOnboardingManagerAPI {
    user: string;
}

const Component = withOnboardingManager(({ user, onboardingManager }: ComponentProps) => {
    useEffect(() => {
        if (user) {
            onboardingManager.init();
        }
    }, [])

    return <div className="main">...</button>;
});
```

NOTE:
The `init()` method also allows an optional `step` argument so you can pass through a step that you want to complete immediately on load. I.e if just visiting an app consists of a step then complete when the app loads and we initiate onboarding.

## How to complete a step

The onboarding consists of multiple steps, most of which are defined in our gamification engine. Users can complete these steps in a multitude of ways. See below for an example:

**Example:**

```tsx
import { withOnboardingManager, IOnboardingManagerAPI } from '@kano/kbc-onboarding';

interface ComponentProps extends IOnboardingManagerAPI {
    prop: any;
}

const Avatar = withOnboardingManager(({ user, onboardingManager }: ComponentProps) => {
    return <button className="save-my-avatar" onClick={() => onboardingManager.completeStep('avatar');}>Save</button>;
});
```

### Telemetry

The onboarding manager tracks a users progression via our telemetry system. These are the event names:

| Event / Error Name              | Data                              | 
| --------------------------------| ----------------------------------| 
| `onboarding_initiated`          | data: { currentStep, stepNumber } |
| `onboarding_dismissed`          | data: { currentStep, complete }   |
| `onboarding_complete_step`      | data: { step, stepNumber }        |
| `onboarding_unlock_loot`        | data: { loot }                    |
| `onboarding_all_steps_completed`| data: { step }                    |
| `onboarding_goto_step`          | data: { currentStep, gotoStep }   |
| `onboarding_gotonext_step`      | data: { currentStep, nextStep }   |
| `onboarding_gotoprev_step`      | data: { currentStep, prevStep }   |

---
_Source: https://npm.io/package/@kano/kbc-onboarding · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._