2.1.17 • Published 2 years ago

@kano/kbc-onboarding v2.1.17

Weekly downloads
199
License
ISC
Repository
github
Last release
2 years ago

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:

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".

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:

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 NameData
onboarding_initiateddata: { currentStep, stepNumber }
onboarding_dismisseddata: { currentStep, complete }
onboarding_complete_stepdata: { step, stepNumber }
onboarding_unlock_lootdata: { loot }
onboarding_all_steps_completeddata: { step }
onboarding_goto_stepdata: { currentStep, gotoStep }
onboarding_gotonext_stepdata: { currentStep, nextStep }
onboarding_gotoprev_stepdata: { currentStep, prevStep }
2.1.16

2 years ago

2.1.17

2 years ago

2.1.14

2 years ago

2.1.15

2 years ago

2.1.13

2 years ago

2.1.12

2 years ago

2.1.10

2 years ago

2.1.11

2 years ago

2.1.9

2 years ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.6

2 years ago

2.1.5

2 years ago

2.1.8

2 years ago

2.1.7

2 years ago

2.1.0

2 years ago

2.0.99

3 years ago

2.0.97

3 years ago

2.0.98

3 years ago

2.0.95

3 years ago

2.0.96

3 years ago

2.0.94

3 years ago

2.0.93

3 years ago

2.0.91

3 years ago

2.0.92

3 years ago

2.0.90

3 years ago

2.0.89

3 years ago

2.0.88

3 years ago

2.0.86

3 years ago

2.0.87

3 years ago

2.0.85

4 years ago

2.0.84

4 years ago

2.0.82

4 years ago

2.0.83

4 years ago

2.0.79

4 years ago

2.0.77

4 years ago

2.0.78

4 years ago

2.0.76

4 years ago

2.0.80

4 years ago

2.0.81

4 years ago

2.0.75

4 years ago

2.0.73

4 years ago

2.0.74

4 years ago

2.0.71

4 years ago

2.0.72

4 years ago

2.0.70

4 years ago

2.0.59

4 years ago

2.0.68

4 years ago

2.0.69

4 years ago

2.0.66

4 years ago

2.0.67

4 years ago

2.0.64

4 years ago

2.0.65

4 years ago

2.0.62

4 years ago

2.0.63

4 years ago

2.0.60

4 years ago

2.0.61

4 years ago

2.0.58

4 years ago

2.0.57

4 years ago

2.0.55

4 years ago

2.0.56

4 years ago

2.0.54

4 years ago

2.0.53

4 years ago

2.0.51

4 years ago

2.0.52

4 years ago

2.0.50

4 years ago

2.0.48

4 years ago

2.0.49

4 years ago

2.0.47

4 years ago

2.0.46

4 years ago

2.0.44

4 years ago

2.0.45

4 years ago

2.0.39

4 years ago

2.0.42

4 years ago

2.0.43

4 years ago

2.0.40

4 years ago

2.0.41

4 years ago

2.0.38

4 years ago

2.0.37

4 years ago

2.0.36

4 years ago

2.0.28

4 years ago

2.0.29

4 years ago

2.0.35

4 years ago

2.0.33

4 years ago

2.0.34

4 years ago

2.0.31

4 years ago

2.0.32

4 years ago

2.0.30

4 years ago

2.0.26

4 years ago

2.0.27

4 years ago

2.0.24

4 years ago

2.0.25

4 years ago

2.0.22

4 years ago

2.0.23

4 years ago

2.0.20

4 years ago

2.0.21

4 years ago

2.0.19

4 years ago

2.0.18

4 years ago

2.0.16

4 years ago

2.0.17

4 years ago

2.0.15

4 years ago

2.0.13

4 years ago

2.0.14

4 years ago

2.0.11

4 years ago

2.0.12

4 years ago

2.0.10

4 years ago

2.0.9

4 years ago

2.0.8

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

2.0.0-pre.5

4 years ago

2.0.0-pre.4

4 years ago

2.0.0-pre.3

4 years ago

2.0.0-pre.2

4 years ago

2.0.0-pre.1

4 years ago

2.0.0-pre.0

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.2

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago