kbc-prompt

A prompt manager, currently used for onboarding and prompting sharing in boilerplate apps.

Usage

Add component to a higher level of the app, preferably the ViewManager. However, should also be below the DialogManager. You can optionally add the userProfile and appName.

<PromptManager userProfile={userClient.userProfile} prompt={prompt} appName="Kano Code" />

Similar to dialogs, prompt's are provided as props and are triggered to show immediately after they have been set on the PromptManager.

Prompt Format

{
    name: 'prompt-description'                           // the name is used as the key when saving to localStorage
    onClose?: 'store'                                    // currently there is only one option onClose and that is to store the fact the prompt has shown in localStorage
    prompts: [{                                          // An array of prompts to be shown in order when skip or target is clicked
        id: 'open-share',
        targetId: targetId ? targetId : 'nav__share',    // This is the id of HTMLElement where you would like to show the prompt, an eventListener will be added to this to trigger the next prompt
        topText: 'Awesome work! Try',                    
        subText?: 'sharing your creation',
        skipText?: 'next',                               // default is 'skip'
    }]
}

Special Case

User On-Boarding

User On-Boarding is handled by the prompt manager, however you can choose to hide the onboarding with hideOnBoarding.

Tracking

By Component

| Component (location) | Function | Event / Error Name | Extra Info | | -------------------- | --------------------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------- | | KbcPrompt | action | prompt_target_clicked | module: prompt-manager, action click, data: { name: currentPrompt.name, id: currentPrompt.prompts[index].id } | | KbcPrompt | action | prompt_closed | module: prompt-manager, action click, data: { name: currentPrompt.name, id: currentPrompt.prompts[index].id } | | KbcPrompt | action | prompt_skipped | module: prompt-manager, action click, data: { name: currentPrompt.name, id: currentPrompt.prompts[index].id } |