# Settings- VirtuApp

# Basic

# Overview

The **VirtuApp Basic** section is used to configure the basic settings of the VirtuApp application. It allows administrators to define the application name and manage the application's public access, login screen, and login skip settings.

## Access Path

**Access Path:** VirtuBox → Settings → VirtuApp → Basic

### VirtuApp Basic Settings

The VirtuApp Basic page contains the following configuration options:

1. App Name
2. Public
3. Login Screen Disabled
4. Login Skip Enabled

####  App Name

The **App Name** field allows administrators to specify the name of the VirtuApp application.

##### How to Configure App Name

1. Navigate to **VirtuApp → Basic**.
2. Enter the required application name in the **App Name** field.
3. Click the **Save** button.
4. Verify that the application name is saved successfully.

####  Public

The **Public** option allows administrators to change the public access setting of the application.

Click the **Public** button to change the setting.

The exact behavior depends on the application's public access configuration.

#### Login Screen Disabled

The **Login Screen Disabled** option controls whether the application login screen is disabled.

Click the button to change the setting.

- **Enabled:** The login screen is disabled.
- **Disabled:** The login screen is not disabled.

The current setting is displayed on the button.

#### Login Skip Enabled

The **Login Skip Enabled** option controls whether the application allows users to skip the login process.

Click the button to change the setting.

- **Enabled:** Login can be skipped, subject to the application's configuration.
- **Disabled:** Login skipping is not enabled.

#### How to Configure VirtuApp Basic Settings

Follow these steps to configure the basic application settings:

1. Open the VirtuBox backend.
2. Navigate to **Settings → VirtuApp → Basic**.
3. Enter the required application name.
4. Click **Save** to save the application name.
5. Configure the **Public** setting as required.
6. Configure the **Login Screen Disabled** setting.
7. Configure the **Login Skip Enabled** setting.
8. Verify that the selected settings reflect the intended application behavior.

#### Important Notes

- Save the application name after making changes.
- Review the login settings carefully before enabling or disabling them.
- Public access and login settings may affect how users access the application.
- Verify the application behavior after changing the configuration.

#### Conclusion

The **VirtuApp Basic** section provides the basic configuration options for the application name, public access, and login behavior. Administrators can use these settings to configure the application's accessibility according to their requirements.

# App- Menu

# 1. Overview

The **App Menu** section is used to configure menu items displayed in the VirtuApp application. It allows administrators to add menu items by selecting a type, defining a title, choosing an icon, and configuring background and icon images.

The section also provides a menu settings option to customize the appearance of the application menu.

## 2. Navigation Path

**Navigation Path:** VirtuBox → Settings → VirtuApp → App Menu

## 3. App Menu Page

The App Menu page contains three main sections:

1. Menu
2. Add New Item
3. Settings

### 3.1 Menu

The **Menu** section displays the configured menu items.

When menu items have been added, they can be managed through the available interface.

## 4. Add New Item

The **Add New Item** section allows administrators to create a new menu item.

### 4.1 Available Fields

| Field | Description |
|---|---|
| Type | Allows users to select the type of menu item. |
| Title | Specifies the title displayed for the menu item. |
| Icon | Allows users to select an icon using the Icon Picker. |
| Background Image | Allows users to select a background image for the menu item. |
| Icon Image | Allows users to select an image to use as the menu icon. |
| Save | Saves the configured menu item. |

## 5. Menu Item Types

The Type dropdown provides the following options:

- Addresses
- Banners
- Bookmark
- Broadcasts
- Cart
- Form
- Header
- Listing
- Map-points
- Map-track
- Maps
- Order-history
- Page
- Profile
- Settings
- Share
- Workflow

The selected type determines the category or functionality associated with the menu item.

## 6. How to Add a New Menu Item

Follow these steps to create a new menu item:

1. Navigate to **VirtuApp → App Menu**.
2. Locate the **Add New Item** section.
3. Select the required menu item type from the **Type** dropdown.
4. Enter the menu item name in the **Title** field.
5. Click **Icon Picker** to select the required icon.
6. Select the required image from the **Background Image** dropdown, if applicable.
7. Select the required image from the **Icon Image** dropdown, if applicable.
8. Review the configured details.
9. Click **Save** to save the menu item.
10. Verify that the menu item appears in the Menu section.

## 7. Icon Picker

The **Icon Picker** allows administrators to select an icon for a menu item.

### How to Select an Icon

1. Click **Icon Picker**.
2. Choose the appropriate icon from the available options.
3. Confirm the selection.
4. Save the menu item.

## 8. Background Image

The **Background Image** field allows administrators to select a background image for the menu item from the available options.

### How to Configure a Background Image

1. Open the **Background Image** dropdown.
2. Select the required image.
3. Save the menu item.

## 9. Icon Image

The **Icon Image** field allows administrators to select an image to represent the menu item.

### How to Configure an Icon Image

1. Open the **Icon Image** dropdown.
2. Select the required image.
3. Save the menu item.

## 10. Settings

The **Settings** section provides access to the menu appearance configuration.

### Available Option

| Option | Description |
|---|---|
| Style | Opens the style configuration interface for customizing the menu appearance. |

### How to Configure Menu Style

1. Navigate to **VirtuApp → App Menu**.
2. Locate the **Settings** section.
3. Click **Style**.
4. Configure the available style settings as required.
5. Save the changes if a save option is provided.

## 11. Important Notes

- Select the correct menu item type before saving.
- Enter a meaningful title so users can identify the menu item.
- Choose appropriate icons and images for a consistent interface.
- Available image options depend on the assets configured in the application.
- Verify that the menu item is saved and displayed correctly.
- Menu item behavior depends on the selected type and its configuration.

## 12. Key Benefits

- Allows administrators to create application menu items.
- Supports multiple menu item types.
- Provides options for configuring titles and icons.
- Supports background and icon image selection.
- Provides access to menu appearance customization.

## 13. Conclusion

The **VirtuApp App Menu** section allows administrators to configure application menu items, select their types, customize their visual appearance, and manage menu styling. Proper configuration helps create a clear and consistent navigation experience for users.

# App- Footer

# 1. Overview

The **App Footer** section is used to configure footer menu items displayed in the VirtuApp application. It allows administrators to add footer items by selecting a type, specifying a title, choosing an icon, and selecting an icon image.

The section also provides a Style option to customize the appearance of the application footer.

## 2. Navigation Path

**Navigation Path:** VirtuBox → Settings → VirtuApp → App Footer

## 3. App Footer Page

The App Footer page contains three main sections:

1. Footer
2. Add New Item
3. Settings

### 3.1 Footer

The **Footer** section displays the configured footer menu items.

Administrators can use this section to manage the footer navigation items configured for the application.

## 4. Add New Item

The **Add New Item** section allows administrators to create a new footer menu item.

### 4.1 Available Fields

| Field | Description |
|---|---|
| Type | Allows users to select the type of footer menu item. |
| Title | Specifies the title of the footer menu item. |
| Icon | Allows users to select an icon using the Icon Picker. |
| Icon Image | Allows users to select an image to represent the footer menu item. |
| Save | Saves the configured footer menu item. |

## 5. Footer Menu Item Types

The Type dropdown provides the following options:

- Back
- Search
- Addresses
- Bookmark
- Broadcasts
- Cart
- Form
- Hamburger
- Home
- Listing
- Map-points
- Map-track
- Maps
- Order-history
- Page
- Page-share
- Profile
- Settings
- Share
- Workflow

The selected type determines the functionality associated with the footer menu item.

## 6. How to Add a Footer Menu Item

Follow these steps to create a new footer menu item:

1. Navigate to **VirtuApp → App Footer**.
2. Locate the **Add New Item** section.
3. Select the required option from the **Type** dropdown.
4. Enter the required name in the **Title** field.
5. Click **Icon Picker** to select an appropriate icon.
6. Select the required image from the **Icon Image** dropdown, if applicable.
7. Review the configured details.
8. Click **Save**.
9. Verify that the footer menu item appears in the Footer section.

## 7. Icon Picker

The **Icon Picker** allows administrators to select an icon for a footer menu item.

### How to Select an Icon

1. Click **Icon Picker**.
2. Select the required icon from the available options.
3. Confirm the selection.
4. Save the footer menu item.

## 8. Icon Image

The **Icon Image** field allows administrators to select an image to represent a footer menu item.

### How to Configure an Icon Image

1. Open the **Icon Image** dropdown.
2. Select the required image from the available options.
3. Save the footer menu item.

## 9. Settings

The **Settings** section provides access to the footer appearance configuration.

### Available Option

| Option | Description |
|---|---|
| Style | Opens the style configuration interface for customizing the footer appearance. |

### How to Configure Footer Style

1. Navigate to **VirtuApp → App Footer**.
2. Locate the **Settings** section.
3. Click **Style**.
4. Configure the available style settings as required.
5. Save the changes if a save option is provided.

## 10. Important Notes

- Select the appropriate footer menu item type before saving.
- Use a meaningful title for each footer menu item.
- Choose suitable icons to make footer navigation easy to understand.
- Available icon images depend on the assets configured in the application.
- Verify that the footer menu item is saved and displayed correctly.
- The functionality of a footer item depends on its selected type and configuration.

## 11. Key Benefits

- Allows administrators to configure footer navigation items.
- Supports multiple footer menu item types.
- Provides icon selection and icon image configuration.
- Supports footer appearance customization through the Style option.
- Helps provide consistent navigation within the VirtuApp application.

## 12. Conclusion

The **VirtuApp App Footer** section allows administrators to configure footer menu items, select their functionality, assign icons, and customize the footer appearance. Proper configuration helps create a consistent and user-friendly application navigation experience.

# App- Header

# 1. Overview

The **App Header** section is used to configure the header displayed in the VirtuApp application. It allows administrators to customize the header title, subtitle, background image, and buttons displayed in the header area.

Administrators can also configure button positions, icons, and types to provide quick access to application features.

## 2. Navigation Path

**Navigation Path:** VirtuBox → Settings → VirtuApp → App Header

## 3. App Header Page

The App Header page contains three main sections:

1. App Header
2. Add Content
3. Add Buttons
4. Settings

## 4. App Header

The **App Header** section displays a preview of the configured header content.

The preview can display:

- **Title:** The main heading displayed in the header.
- **Subtitle:** Additional text displayed below the title.
- **Buttons:** Configured header buttons, when available.

For example:

- Title: `Hello,`
- Subtitle: `Welcome Back`

If no buttons have been configured, the preview displays the message **No buttons added yet**.

## 5. Add Content

The **Add Content** section allows administrators to configure the main header content.

### 5.1 Available Fields

| Field | Description |
|---|---|
| Title | Specifies the main heading displayed in the application header. |
| Subtitle | Specifies the supporting text displayed below the title. |
| Background Image | Allows users to select a background image for the header. |
| Save | Saves the configured header content. |

### 5.2 How to Configure Header Content

1. Navigate to **VirtuApp → App Header**.
2. Locate the **Add Content** section.
3. Enter the required text in the **Title** field.
4. Enter the required text in the **Subtitle** field.
5. Select a background image from the **Background Image** dropdown, if required.
6. Click **Save**.
7. Verify the updated content in the App Header preview.

## 6. Add Buttons

The **Add Buttons** section allows administrators to add buttons to the application header.

### 6.1 Available Fields

| Field | Description |
|---|---|
| Position | Specifies where the button appears in the header. |
| Title | Defines the button label. |
| Icon | Allows users to select an icon using the Icon Picker. |
| Type | Specifies the functionality associated with the button. |
| Save | Saves the configured button. |

### 6.2 Button Positions

The Position dropdown provides the following options:

- **Left button:** Places the button on the left side of the header.
- **Right button:** Places the button on the right side of the header.

### 6.3 Button Types

The Type dropdown provides the following options:

- Back
- Search
- Addresses
- Bookmark
- Broadcasts
- Cart
- Form
- Hamburger
- Home
- Listing
- Map-points
- Map-track
- Maps
- Order-history
- Page
- Page-share
- Profile
- Settings
- Share
- Workflow

The selected type determines the functionality associated with the button.

### 6.4 How to Add a Header Button

1. Navigate to **VirtuApp → App Header**.
2. Locate the **Add Buttons** section.
3. Select the required position from the **Position** dropdown.
4. Enter the button label in the **Title** field.
5. Click **Icon Picker** to select an appropriate icon.
6. Select the required option from the **Type** dropdown.
7. Review the configured details.
8. Click **Save**.
9. Verify that the button appears in the App Header preview.

## 7. Icon Picker

The **Icon Picker** allows administrators to select an icon for a header button.

### How to Select an Icon

1. Click **Icon Picker**.
2. Select the required icon from the available options.
3. Confirm the selection.
4. Save the button configuration.

## 8. Background Image

The **Background Image** field allows administrators to select a background image for the header from the available options.

### How to Configure a Background Image

1. Navigate to the **Add Content** section.
2. Open the **Background Image** dropdown.
3. Select the required image.
4. Click **Save**.
5. Verify the header preview.

## 9. Settings

The **Settings** section provides access to the header appearance configuration.

### Available Option

| Option | Description |
|---|---|
| Style | Opens the style configuration interface for customizing the header appearance. |

### How to Configure Header Style

1. Navigate to **VirtuApp → App Header**.
2. Locate the **Settings** section.
3. Click **Style**.
4. Configure the available style settings as required.
5. Save the changes if a save option is provided.
6. Verify the updated header appearance.

## 10. Important Notes

- Configure the title and subtitle according to the application's requirements.
- Select the appropriate button position.
- Choose the correct button type to provide the intended functionality.
- Use suitable icons to make buttons easy to identify.
- Available background images depend on the assets configured in the application.
- Verify all changes in the App Header preview.
- Button behavior depends on the selected type and its configuration.

## 11. Key Benefits

- Allows customization of application header content.
- Supports title and subtitle configuration.
- Provides background image selection.
- Supports left and right header buttons.
- Allows button types and icons to be configured.
- Provides access to header appearance customization.

## 12. Conclusion

The **VirtuApp App Header** section allows administrators to customize the application header by configuring its content, background image, and buttons. Proper configuration helps create a consistent interface and provides users with convenient access to important application features.

# App- CTA

# Overview

The **App CTA** section in VirtuApp is used to configure floating buttons and control their placement along the edges of the application interface.

## 1. Navigation Path

`Settings → VirtuApp → App CTA`

## 2. Add Floating Button

The **Add Floating Button** panel contains the following configuration fields:

| Field | Description | Available Options |
|---|---|---|
| Edge | Defines the screen edge where the floating button will appear. | Left, Right, Top, Bottom |
| Position | Defines the button's position along the selected edge. | Start, Center, End |

## 3. Configuration Steps

1. Navigate to **Settings → VirtuApp → App CTA**.
2. Under **Add Floating Button**, select the required **Edge**.
3. Select the desired **Position** along the chosen edge.
4. Complete any additional fields displayed by the interface, if applicable.
5. Save the configuration, if a **Save** option is available.

## 4. Edge and Position Reference

| Edge | Position | Expected Placement |
|---|---|---|
| Left | Start | Upper end of the left edge |
| Left | Center | Middle of the left edge |
| Left | End | Lower end of the left edge |
| Right | Start | Upper end of the right edge |
| Right | Center | Middle of the right edge |
| Right | End | Lower end of the right edge |
| Top | Start | Left end of the top edge |
| Top | Center | Middle of the top edge |
| Top | End | Right end of the top edge |
| Bottom | Start | Left end of the bottom edge |
| Bottom | Center | Middle of the bottom edge |
| Bottom | End | Right end of the bottom edge |

## 5. Expected Behavior

- The selected **Edge** determines which side of the application displays the floating button.
- The selected **Position** determines whether the button appears at the start, center, or end of that edge.
- The configured placement should be reflected in the VirtuApp interface after the settings are saved and applied.

# Style



# Assets

# Overview

The **Assets** section in VirtuApp is used to manage and configure application assets, including app screen images, splash screen images, platform-specific app icons, splash screen videos, and app onboarding images.

## 1. Navigation Path

`Settings → VirtuApp → Assets`

## 2. Available Asset Sections

| Section | Description | Available Action |
|---|---|---|
| App Screen Image | Used to configure the image displayed on the application screen. | Add Icon |
| Splash Screen Image | Used to configure the image displayed during the application launch screen. | Add Icon |
| Android App Icon | Used to configure the application icon for Android devices. | Add Icon |
| iOS App Icon | Used to configure the application icon for iOS devices. | Add Icon |
| Splash Screen Video | Used to configure a video for the application splash screen. | Add Video |
| App Onboarding Image | Used to configure images displayed during the application onboarding process. | Add Icon |

## 3. Configuration Steps

1. Navigate to **Settings → VirtuApp → Assets**.
2. Identify the asset section you want to configure.
3. Click **Add Icon** for image and app icon sections.
4. Click **Add Video** to configure the splash screen video.
5. Select or upload the required asset, depending on the available options.
6. Complete any additional configuration fields displayed by the interface.
7. Save the configuration if a Save option is available.

## 4. Expected Behavior

- Each asset section allows configuration of a specific type of application resource.
- Android and iOS app icons can be configured separately.
- The splash screen can be configured with an image or video, depending on the supported functionality.
- App onboarding images can be configured independently.
- The configured assets should appear in their respective locations in the application after the changes are saved and applied.

# Private Users

# Overview

The App Users section allows users to manage Private Users and Test Users for a VirtuApp project. It provides options to add phone numbers, configure test user OTPs, and manage registered users. The project must be set to Private to use the Private Users feature.

## App Users Navigation

- [Private Users](https://console.virtubox.io/project/demo-purpose/mspiiRLx/settings/virtuapp/private-users#content-private-user)
- [Test Users](https://console.virtubox.io/project/demo-purpose/mspiiRLx/settings/virtuapp/private-users#content-test-user)

**Note:** The project is currently not private. Please make your project private from [Basic Settings](https://console.virtubox.io/project/demo-purpose/mspiiRLx/settings/virtuapp/basic).

## 1. Private Users

### Phone Number

**Field:** Private Users Phone No*

Phone numbers must include the international country code.

**Example:** `+91 XXXXX-XXXXX`

Multiple phone numbers can be entered using commas (`,`), semicolons (`;`), or new lines.

### Private Users Table

| Phone Number | OTP | Delete |
|---|---|---|
| Registered phone number | OTP associated with the user | Option to delete the user |

## 2. Test Users

### Add New Test User

#### Phone Number

**Required:** Yes

Phone numbers must include the international country code.

**Example:** `+91 XXXXX-XXXXX`

#### OTP

**Required:** Yes

The OTP must contain at least 6 numeric characters.

### Validation Rules

1. Phone numbers must include the international country code.
2. The OTP must contain only numeric characters.
3. The OTP must be at least 6 digits long.

## Conclusion

The App Users section provides separate options for managing Private Users and Test Users. Ensure that phone numbers follow the required international format and that test user OTPs contain at least 6 numeric digits.