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 } |