App onboarding configuration
In this article, you learn how to configure your app onboarding in the Experience Builder. You will access the onboarding folder, upload new images to your onboarding, change the button text And add a new step to your onboarding. Afterwards, you will change the title- and the body text of your new step, map the recently uploaded images and change the accent colour of your onboarding. As a last step, you will merge your changes to update the dynamic resources of your app.
Read this article to get more context of the concept of the app onboarding folder.
- Image files: Image file per step in JPEG format (1x for phone + 1x for tablet)
- For phone, size 1080x1920 px
- And for Tablet, 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 colour as RGB value, e.g. (0,0,255) for blue; and desired button text, e.g. "Skip"
1. Go to Experience builder, choose the desired app from the list and klick on it
2. Click on 'Pull from preview'
3. Click on 'default'
4. Click on 'onboarding
You have now access the onboarding folder in the Experience Builder
5. Click on 'assets'
6. Click on 'config'
7. Click on 'onboarding_images'
8. Click on 'Actions'
9. Click on 'Upload files'
10. Upload your 2 images from file upload menu, 1x for Phone (e.g. '7_FeedbackPhone.jpg') and 1x for Tablet (e.g. '7_FeedbackTablet.jpg') and wait, until the green box 'Uploaded' appears.
You have now successfully uploaded a phone and a tablet image to your onboarding
11. Click on 'config'
12. Click on 'messages.json'
13. Mark the text 'Skip' and overwrite it with your text, e.g. 'Miss out'
14. Mark the text 'Done' and overwrite it with your text, e.g. 'Determine'
You have successully changed the button text for your onboarding.
15. Scroll down in the JSON file and mark the last paragraph
17. Copy and paste it directly below, before the last '}'
You have now successfully added a new step to your onboarding
18. We now insert your title text for the new onboarding step: Next to "title", mark the orange text in quotations marks and overwrite it with your own title text, e.g. "Feedback function"
19. Next to "body", mark the orange text in quotations marks and overwrite it with your own body text, e.g. "Whenever you wish to ask a question or give us feedback, get in touch with us via the feedback function!"
You have now successfully changed the title text and the body text of your new step of onboarding
20. Go to the line "phone" and overwrite the image name in the path with the name of the image for phones, that you uploaded in step 9, e.g. '7_FeedbackPhone'
21. Go to the line "tablet" and overwrite the image name in the path with the name of the image for tablets, that you uploaded in step 9, e.g. '7_FeedbackTablet'
You have now successfully mapped the recently uploaded images to your onboarding
22. Click on 'style.json'
23. Go to the line "accent" and overwrite the orange text in brackets with the RGB colour of your choice to change the accent colour for your onboarding. E.g. (0,0,255) for blue
You have successfully changed the accent colour of your onboarding
24. Click on the burger menu
25. Click on 'Update Dynamic Resources' in the dropdown
26. Name your recent changes, e.g. with 'configured-onboarding-091122'
27. Click on 'Merge'
You have successfully merged your changes in the onboarding and updated the dynamic resources