Configure the App Onboarding in Experience Builder

Experience Builder

Summary

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.

Preconditions

• 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"

How-to guide

Access the onboarding folder in the Experience Builder

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



Upload images for your onboarding

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.



Change the button text in the messages.json

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'



Add a new step to your onboarding

15. Scroll down in the JSON file and mark the last paragraph



17. Copy and paste it directly below, before the last '}'



Change the title text and body text of your new step of 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!"



Map the recently uploaded images

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'



Change the accent colour of 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



Merge your changes to update the dynamic resources

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'