Onboarding Extension

Onboard your users by providing a quick tour upon the first launch.

If you are building an app for various occasions and many content types and functionalities, you will want to use our Onboarding extension to guide users through your app’s core features.

mobile app onboarding

These onboarding pages will be displayed only on the app’s first launch and won’t repeat again later.

Install Onboarding extension

Onboarding extension is not pre-installed, so you’ll have to install it first. To do so, go to Extensions → click the + button → search for Onboarding → once you find it, click Install.

extension marketplace onboarding

This feature doesn’t have a screen that you can add to your app, but it needs to be configured in Settings → Onboarding. Here you should enable the feature and upload graphics that you’d like your onboarding to display, along with the text.

Onboarding settings page

Open your app in the builder, navigate to the Settings page from the left bar menu, and select Onboarding under Extensions settings. By default, the feature will be disabled so you will need to enable it first.

enable onboarding

Your onboarding can have up to 10 pages! Each page has the following options: 

  • Page Title
  • Page Description
  • Text position – available top, middle and bottom
  • Background image – required size 1080x19210px, only static images are supported

At the moment, all fields are mandatory, however, if you’d like to omit a text, you can add a few blank spaces in text fields. If you would like to delete one of the pages or all of them, simply click the delete icon in the upper right corner and the page will be deleted from the sequence.

edit onboard mobile app

After making changes to your onboarding pages, do not forget to save those by clicking the Save button at the bottom of the page.

Style customization options

You can use existing style options from our Style → Customize theme tab and improve the appearance of the wording.

The following settings can apply to this feature:

  • Navigation bar (header) → Icons color: affects on Continue/Skip button in the top right corner
  • Typography → Subtitle: affects on the color, text size, and style of the Page Title text
  • Typography → Text: affects on the color, text size, and style of the Page Description text
  • Overlays → Text and Icon color on images with overlays: affects on the three dots button at the bottom

Have in mind that these style settings will apply to other features of your app as well.

For already published apps only!

If your app is already published in both app stores, after installing and setting up the Onboarding feature, please contact our Support team to resubmit your app. Simple republish will not be sufficient and most likely will cause crashing issues.

Here is Onboarding screen in action (without text added in the builder):

onboarding in app

If you’d like us to take over the whole app building process and help you create an app with our onboarding feature, take a look at our Shoutem PRO.