Onboarding Screen is a feature which introduces the app and its functionality through a set of images, the first time the app is opened. It's available for iOS and Android (News Modules).
General rules
- Will show the first time the app is opened
- If you want to show onboarding screen again, we will need to override settings in the app and build the app again. Would usually make sense when upgrading the app with major new features
- Onboarding screen can be closed by clicking outside the box (if not full screen) or hitting a close button (if enabled)
The onboarding screen can be customized in several ways. We have 2 versions. The default and create your own.
The Visiolink default
This Onboarding screen is our standard and simple to adjust to your needs.
It consists of 5 images (see below), with corresponding text.
- Can be full screen or not
- Can have a close button or not
- More screens can be added (no limit to number of screens)
- Text can be changed (but not formatted)
- Option to hide text so only image is displayed
- Images can be changed (you need to deliver)
- Image format need to be .png
- Images should be delivered in 3 sizes. As standard it's 300x400, 600x800 and 900x1200 or if no text is used the sizes are 300x525, 600x800 and 900x1575
- Naming of the imgage files should be as follows (example for page 2, with 3 files in 3 different sizes): onboarding_page_2.png, onboarding_page_2@2x.png og onboarding_page_2@3x.png
- Is not interactive beyond going to next/previous screen and closing
Our standard screens:
Make your Own
If you have the competences in your company, you can create your own Onboarding Screen as a web view. This will require more work from you, but also give you more options to adjust it yourself and make it interactive.
- It is a web view - you need to deliver a URL which we will implement
- You will have control of everything and can adjust it as you see fit
- Will still only show first time a user opens the app, see general rules
- We recommend that you implement a close button which triggers: {URLSCHEME}://close - contact your project manager to get the url scheme for your app.
Below is an example of a customer made web view which we have implemented:
Comments