# App Onboarding

### <mark style="color:green;">What is App Onboarding?</mark>

App onboarding helps the end users to introduce your app at first place. It helps onboard the end user with product overview, important features or anything that helps user to get used to with the app

### <mark style="color:green;">How to setup App Onboarding?</mark>

{% tabs %}
{% tab title="Style" %}
**1.)** Go to Add-ons --> Extensions --> App Onboarding & enable it.

<mark style="color:red;">**NOTE:**</mark> <mark style="color:red;">Please create a new version of the App e.x. 1.0.2, if the current version does not support this feature. If the previous version is live on the stores, then request a new build and submit this new version to the stores.</mark>&#x20;

**2.)** Select 1 from the 8 different styles. &#x20;

**3.)** Click on Next
{% endtab %}

{% tab title="Screen" %}
**1.)** Click on "+ADD ONBOARDING SCREEN" to add screen

**2.)** Add Title, Description, Image & Background color of the screen.

**3.)** Click on Add.

**4.)** Add as many screens as you want.
{% endtab %}

{% tab title="Customize" %}
**Below are the customization options as per the style selected:**&#x20;

**Title**: This is the title of the screen

**Description**: This is the description which appears under the title

**Skip Button**: This button helps to skip the onboarding screens and directly go to first screen of the app.

**Done Button**: This button appears on the last screen of onboarding.

**Next Button**: This is on every screens which helps to go to the next screen.

**Indicator**: These are on the bottom side of the screens.

**Home Button**: This is the get started button which skips the onboarding and redirects to the application.

**Bubble Customization**: Bubbles are in the bottom section of the screen.

**Background Customization**: This is the background of the screen.
{% endtab %}
{% endtabs %}

### <mark style="color:green;">How to test App Onboarding Feature in</mark> [Twinr Previewer App](https://play.google.com/store/apps/details?id=com.twinr.builder.previewer)<mark style="color:green;">?</mark>

Once you are done with the customization, open the app in previewer or refresh it from the floating hamburger button. You will be able to see the onboarding.

<div align="left"><figure><img src="/files/BuUezQiJo2HB58IIXJbs" alt=""><figcaption></figcaption></figure></div>

### <mark style="color:green;">Benefits of using App Onboarding</mark>

1. Positive first impression
2. Long-term user retention
3. User engagement

### <mark style="color:green;">Common Questions</mark>

<details>

<summary><strong>Do I need to submit new version everytime I edit the App Onboarding screens?</strong></summary>

**Answer:** No, just do the changes, save it and click on publish to production. Your LIVE app will have the changes right away.

</details>

<details>

<summary><strong>Do I need to publish new version after enabling App Onboarding?</strong></summary>

**Answer:** No, enable/disable the onboarding, customize, save it and click on publish to production. Your LIVE app will have the changes right away.

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.twinr.dev/extensions/app-onboarding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.