App onboarding
Purple Experience
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.
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.
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
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
For each step, have in place:
- Headline, max. 300 characters
- Text, max. 300 characters
- Desired colour as RGB value
- Desired button text, e.g. 'Skip'
The onboarding is part of the dynamic resources, access it via Purple Experience Builder (PXP Builder).
The path is: default / onboarding / assets / config
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.
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
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.
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".
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:
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)
