App onboarding

p p urple experience summary this article gives you a detailed description of the contents of the onboarding folder in the dynamic resources of your app in the purple experience builder, which can be useful during the app onboarding setup in this article, you learn more about the app onboarding configuration docid\ wewfl0ydni0jaolejmbax introduction the app onboarding opens up the first time the user initially opens your app this is where you can welcome your user, introduce the concept of your app and explain in a few steps how to use it the user can move through the onboarding by swiping from step to step your users will be able to re open the onboarding via the app menu again, when using the app it is configurable to your needs you can define the number of steps and their content yourself the content consists of images, e g a screenshot of a part of your app, or an icon and a short text preconditions images in order to reduce the loading time of the app, we recommend to use image files in jpeg format image files two image files per step, with image in jpeg format 1 x for phone, size 1080x1920 px 1 x for tablet, size 2048x1536 px the images should be language neutral (without texts) file size < 1 mb icons for icons, png files with transparent background are required 1 x icon per step in png format with transparent background, size 1280x1280 px the images should be language neutral (without texts) file size < 1 mb text for each step, have in place headline, max 300 characters text, max 300 characters buttons desired colour as rgb value desired button text, e g 'skip' specifications location onboarding folder the onboarding is part of the dynamic resources, access it via purple experience builder (pxp builder) the path is default / onboarding / assets / config onboarding folder in experience builder onboarding template purple provides a "neutral" onboarding template in the standard dynamic resources you can use this and overwrite it, in order to customize it to your needs e g change images, text or button colours you will find it in the "onboarding" folder in the "default" folder of the dynamic resources the configurable files are located at default/onboarding/assets/config action url for testing your onboarding, you can open the onboarding via an action url besides, you can offer the option to your users to access the app onboarding from the app menu action url purple //app/onboarding/app start/open structure of the onboarding folder onboarding images folder the "onboarding images" folder contains your desired images for the onboarding you can just add new images to the folder and delete the ones coming from the onboarding template you can sort them by numbers for the order they should appear to, like e g '1 welcome png' for the first step; '2 menuphone png' for the second one, etc furthermore, you will copy each of the file names and assign it in the onboarding json in order to map it message json the file message json contains the caption of the buttons the user uses to scroll through the images/steps you can overwrite the orange text in quotations marks with your own wording, e g exchange "skip" against "miss out" onboarding json the onboarding json contains the texts for the images and the links to the corresponding images in onboarding images you can determine in this file, how many steps you want to display in your onboarding this will be done by copying the paragraph and paste it analogue to the amount of steps that you want to display each paragraph/{ } is a "page" of the onboarding, i e separate image and text each bracket is displayed with a dot in the action bar for navigation here you have the option to reference to "icon" (will be centred and resized) or to "image" ios only insert "button" as another button, e g for "restore purchases" "button" {"text" "restore purchases","action" {"type" "restore purchases"} the whole paragraph looks like this { "title" "title text", "body" "body text", "icon" { "phone" " / /default/onboarding/assets/config/onboarding images/1 image png", "tablet" " / /default/onboarding/assets/config/onboarding images/1 image png" } }, onboarding json style json the style json defines the colours for texts and buttons within the onboarding by defining the colour values for " accent " and " white " you determine the colour scheme for your onboarding which you can apply to set the colours for the below mentioned parts of it onboarding bar = button colour at the bottom of the page; on phone, it is the lower action bar and the button as one onboarding bar pagination active = (only phone) points to display number of pages of onboarding (combination of button and action bar below, which also displays the dots for swiping) onboarding pagination active = (only tablet) points to display number of pages of onboarding (they are displayed on tablet above the images) onboarding step button = colour for separate button, if you want to add more functions as a button via action url, e g "restore purchases" (note this example should then be added to the platform specific "ios" folder, as it is only available for ios) style json