Onboarding Screen

Onboarding Screen

Introduce users to the enhanced functionality and features of your application through an informative and user-friendly onboarding screen. This guide will help you customize and set up the onboarding screen to provide a seamless and intuitive experience for your users.

Key Features

  • User-Friendly Interface: Customizable pages using images, text, and buttons.
  • Enhanced User Experience: Educates and empowers users about the app’s capabilities.
  • Real-Time Changes: All modifications are reflected in real time, but a rebuild is required for changes to appear in the app.

Setting Up the Onboarding Screen

1. Add Onboarding Screen from the Add-ons

Screenshot 2025-05-08 145047.png

Click on "Add" button to add Onboarding Screen. Once you add, it will appear in Add-ons menu.


2. Enable/Disable Onboarding Screen Addon:

  • Go to the left side panel and click on the Onboarding Screen option.
  • Enable or disable the onboarding screen addon as needed.

Screenshot 2025-05-08 150817.png

3. Customizing Pages

1. Edit Onboarding Pages

  • Edit multiple pages to your onboarding screen as needed.

Screenshot 2025-05-08 160848.png

  • Click on Edit or Add to customize each page.

2. Upload Images and Add Text

  • Upload images to each page.

Screenshot 2025-05-08 161539.png

  • Add and customize text with various options such as font weight, size, and color.
  • Set margins as required.
  • Enable or disable the skip button for each page.
  • Save your changes.

4. Adding Action Buttons

1. Add Button

  • Set the button text and customize the text color.
  • Adjust the button’s background color, border color, and border corner type (rounded or square).

2. Set Button URL

  • Provide the URL that the button should link to.

Screenshot 2025-05-08 162719.png

  • Save your changes.

5. Settings

1. Skip Button Settings

Screenshot 2025-05-08 164745.png

  • Text: Change the skip button text to suit your needs.
  • Text Color: Customize the text color.
  • Button Background Color:
  • Border Color: Set the border color.
  • Border Corner: Choose between rounded or square corners. Save your changes.

2. Onboarding Screen Settings

1. Carousel Setting

  • Set the active and inactive colors for the carousel indicators.

Screenshot 2025-05-08 170015.png

2. General Settings

  • Change the background color of the onboarding screen.
  • Enable or disable the option to show the onboarding screen every time the user opens the app.

Screenshot 2025-05-08 170421.png

After customiziations, click on the "Save" button. Rebuild your app to apply and view the changes. The rebuild process may take a few minutes, depending on the complexity of your app.