General Information

The onboarding page opens up the first time the app is started. It explains in a few steps how to use the app. If you want, you can also re-open the onboarding page via the App menu. 


The user can move through the onboarding by swiping from step to step.

You can define the number of steps and their content yourself. The content consists of a picture, e.g. a screenshot, 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. For icons, PNG files with transparent background are required. 


Requirements


  • Image files: One image file per step with image in JPEG format for phone, size 1080x1920 px. Additionally for Tablet one image file each, size 2048x1536 px.
  • icons: One image file per step with icon in PNG format with transparent background, size 1280x1280 px.
  • texts: For each step a headline and a short text, max. 300 characters.
  • Buttons: desired color as hexadecimal value and desired button text e.g. "Skip".

Instructions


Purple DS provides a "neutral" onboarding in the standard dynamic resources. However, it can be customized for each customer, e.g. images, text or button colours.


You will find an "onboarding" folder in the "default" folder of the dynamic resources (see technical documentation).


The configurable files are located at default/onboarding/assets/config.

To edit the .json files, you can use a html or text editor. We recommend the free tool Brackets.



  1. The "onboarding_images"folder contains images (.jpg) that are embedded above text.
    We recommend that you use images that are optimized for both phone and tablet:
    • Phone.jpg = 1080 × 1920 px  
    • Tablet.jpg = 1536 × 2048 px
    • The pictures should be language neutral (without texts).
    • File size < 1 MB

  2. The file message.json contains the caption of the buttons the user uses to scroll through the images/steps.

  3. The onboarding.json contains the texts for the images and the links to the corresponding images in onboarding_images.

    • Each {...} is a "page" of the onboarding, i.e. separate image and text. Each bracket is displayed with a dot in the action bar as navigation.
    • Here you have the option to reference to "icon" (will be centered 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"}

  4. The style.json defines the colors for texts and buttons within the onboarding.

    • onboarding_bar = Button color at the bottom of the page; on Phone the lower actionbar and button in one.
    • onboarding_bar_pagination_active = (only Phone) points to display number of pages of onboarding (combination of button and actionbar below, which also displays the points)
    • onboarding_pagination_active = (only Tablet) Points to display number of pages of onboarding (they are displayed on tablet above the images)
    • onboarding_step_button = color 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)



You can open the onboarding again via an action URL and offer this option in the app menu: purple://app/onboarding/app_start/open