# Backend A2 [https://console.virtubox.io](https://console.virtubox.io/project/demo-purpose/mspiiRLx/dashboard "https://console.virtubox.io") # Dashboard # Project Summary ## Overview The **Project Summary** section provides an overview of the project's basic information, current configuration, and usage statistics. --- ### Project ID The **Project ID** is a unique identifier assigned to the project. It is automatically generated by the system and is used to uniquely identify the project. --- ### Project Name The **Project Name** displays the name assigned to the project. This name is used throughout the system to identify the project. --- ### Website The **Website** field contains the URL of the website associated with the project. Selecting this link opens the project's website. --- ### Owner The **Owner** field displays the name and email address of the account that owns the project. --- ### App Page The **App Page** indicates which page is currently configured as the home page for the mobile application. --- ### Web Page The **Web Page** indicates which page is currently configured as the home page for the website. --- ### Published The **Published** status indicates whether the project has been published and is available for use. - **Yes** – The project is published. - **No** – The project is not published. --- ### Searchable The **Searchable** status indicates whether the project can appear in search results. - **Yes** – The project is searchable. - **No** – The project is hidden from search results. --- ### Private The **Private** status indicates whether the project is private. - **Yes** – The project is accessible only to authorized users. - **No** – The project is publicly accessible, subject to other project settings. --- ### Disc Space The **Disc Space** field shows the amount of storage currently used by the project out of the default allocated storage limit of **50 MB**. --- ### Pages The **Pages** field displays the total number of pages created within the project. By default, a project can contain up to **5 pages**. --- ### Files The **Files** field displays the total number of files uploaded to the project, including images, videos, audio files, documents, and other supported file types. --- ### SKUs The **SKUs** field displays the total number of Stock Keeping Units (SKUs) created within the project. --- ### Bookmarks The **Bookmarks** field displays the total number of bookmarks created in the project. --- ### Addresses The **Addresses** field displays the total number of addresses stored within the project. --- ### Language The **Language** field displays the language currently configured for the project. --- ### Currency The **Currency** field displays the currency currently configured for the project. This currency is used wherever monetary values are displayed throughout the project. # Project Settings ## Overview The **Project Settings** section allows you to configure the project's basic information and default settings. --- ### Publish Status The **Publish Status** option allows you to publish or unpublish the project. - **Published** – The project is live and available for use. - **Unpublished** – The project is not publicly available. --- ### Logo The **Logo** field displays the logo currently assigned to the project. This logo is used to represent the project throughout the application. --- ### Edit Logo The **Edit Logo** option allows you to upload and set a new logo for the project. --- ### Delete Logo The **Delete Logo** option allows you to remove the currently assigned project logo. --- ### Title The **Title** field allows you to set or update the name of the project. --- ### Slug The **Slug** is a unique, URL-friendly identifier for the project. It is automatically generated by the system based on the project title and is used in the project's URL. --- ### App Page The **App Page** option allows you to select the page that will serve as the home page for the mobile application. --- ### Web Page The **Web Page** option allows you to select the page that will serve as the home page for the website. --- ### Currency The **Currency** option allows you to select the default currency used throughout the project for displaying monetary values. --- ### Language The **Language** option allows you to select the default language for the project. The supported languages include: - English - Hindi - German --- ### Submit The **Submit** button saves and applies all the changes made in the **Project Settings** section. # Pages # Pages # Overview The **Pages** section allows users to manage and create pages for their project. Users can view existing pages, navigate between pages, and add new pages based on their requirements. --- ## Access Path To access the Pages section: **Leftside bar → Pages** --- ## Pages Overview The Pages section provides the following options: - **Search** – Search for an existing page. - **Refresh** – Refresh the page list. - **Add From Template** – Create a new page using an existing template. - **Add New** – Create a new page manually. - **Previous / Next** – Navigate between multiple pages when the page list contains more than one page. The page list displays information such as: - Page Number - Page Title - Page URL - Copy Page - Published Status - Icon - Web Availability - App Availability - Kiosk Availability --- ## Add New Page To create a new page, click the **Add New** button. A new **Add New Page** window will appear. ### Page Title Enter the required name of the page in the **Page Title** field. The page title should be clear and relevant to the content that will be added to the page. ### Available For The **Available For** option allows you to select the platforms where the page should be available. Select the required platform option based on the intended usage of the page. --- ## Save the Page After entering the page title and selecting the required availability options: 1. Enter the **Page Title**. 2. Select the required **Available For** option. 3. Click **Save**. 4. The new page will be added to the Pages list. --- ## Page Navigation When multiple pages are available, use the pagination controls at the bottom of the page list: - **Previous** – Move to the previous page of the list. - **Next** – Move to the next page of the list. - **Page Number** – Select a specific page directly. --- ## Page Management Once a page is created, it can be managed from the Pages list. The list provides information about its publishing status and availability across different platforms. The **Copy Page** option can also be used to create a copy of an existing page, which can then be configured separately. # Files # Images The **Images** section allows you to upload and manage image files used throughout the project. Images can be added in either of the following ways: - **Drag and Drop** – Drag one or more image files from your computer and drop them into the upload area. - **Choose from Computer** – Click the upload area or the **Choose Files** button to browse and select image files from your computer. After an image is uploaded, it becomes available for use in pages in all the layouts and other sections of the project where image assets are required. Max Size of the image that can be uploaded is **150 Kb** # Animations The **Animations** section allows you to upload and manage animation files used throughout the project. Animation files can be added in either of the following ways: - **Drag and Drop** – Drag one or more animation files from your computer and drop them into the upload area. - **Choose from Computer** – Click the upload area or the **Choose Files** button to browse and select animation files from your computer. After an animation is uploaded, it becomes available for use in pages, layouts and other sections of the project where animation assets are supported. Max Size od the animation that can be uploaded is **15-20 MB** # Videos The **Videos** section allows you to upload and manage video files used throughout the project. Video files can be added in either of the following ways: - **Drag and Drop** – Drag one or more video files from your computer and drop them into the upload area. - **Choose from Computer** – Click the upload area or the **Choose Files** button to browse and select video files from your computer. After a video is uploaded, it becomes available for use in pages, layouts and other sections of the project where video assets are supported. # Audios The **Audios** section allows you to upload and manage audio files used throughout the project. Audio files can be added in either of the following ways: - **Drag and Drop** – Drag one or more audio files from your computer and drop them into the upload area. - **Choose from Computer** – Click the upload area or the **Choose Files** button to browse and select audio files from your computer. After an audio file is uploaded, it becomes available for use in pages, layouts, and other sections of the project where audio assets are supported. # Documents The **Documents** section allows you to upload and manage document files used throughout the project. Document files can be added in either of the following ways: - **Drag and Drop** – Drag one or more document files from your computer and drop them into the upload area. - **Choose from Computer** – Click the upload area or the **Choose Files** button to browse and select document files from your computer. After a document is uploaded, it becomes available for use in pages and other sections of the project where document assets are supported. # Response Files # Images ## Overview The **Response Images** section displays all image files that have been received as responses from a **Form**. This section allows users to view and manage the response images generated within the project. ### Copy to Project Files Each response image includes a **Copy** option. Clicking the **Copy** icon copies the selected response image to the project's **Images** section. Once copied, the image becomes available for use throughout the project, including pages, layouts, and other components that support image assets. # Animations ## Overview The **Response Animations** section displays all animation files that have been received as responses from a **Form**. This section allows users to view and manage the response animations generated within the project. ### Copy to Project Files Each response video includes a **Copy** option. Clicking the **Copy** icon copies the selected response animations to the project's **Animations** section. Once copied, the animation becomes available for use throughout the project wherever animation assets are supported. # Video ## Overview The **Response Videos** section displays all video files that have been received as responses from a **Form**. This section allows users to view and manage the response videos generated within the project. ### Copy to Project Files Each response video includes a **Copy** option. Clicking the **Copy** icon copies the selected response video to the project's **Videos** section. Once copied, the video becomes available for use throughout the project wherever video assets are supported. # Audios ## Overview The **Response Audios** section displays all audio files that have been received as responses from a **Form**. This section allows users to view and manage the response audio files generated within the project. ### Copy to Project Files Each response audio file includes a **Copy** option. Clicking the **Copy** icon copies the selected response audio file to the project's **Audios** section. Once copied, the audio becomes available for use throughout the project wherever audio assets are supported. # Pdfs The **Response PDFs** section displays all PDF files that have been received as responses from a **Form**. This section allows users to view and manage the response PDF files generated within the project. # Documents ## Overview The **Response Documents** section displays all document files that have been received as responses from a **Form**. This section allows users to view and manage the response documents generated within the project. ### Copy to Project Files Each response document includes a **Copy** option. Clicking the **Copy** icon copies the selected response document to the project's **Documents** section. Once copied, the document becomes available for use throughout the project wherever document assets are supported. # Presentations The **Response Presentations** section displays all presentation files that have been received as responses from a **Form**. This section allows users to view and manage the response presentation files generated within the project. # Spreadsheets The **Response Spreadsheets** section displays all spreadsheet files that have been received as responses from a **Form**. This section allows users to view and manage the response spreadsheet files generated within the project. # Repository # Tags # Overview The **Tags** section allows you to create and manage tags that can be assigned to pages. Tags help organize pages into categories, making it easier to filter and locate related content. For example: - Pages related to vegetarian content can be assigned a **Veg** tag. - Pages related to non-vegetarian content can be assigned a **Non-Veg** tag. Once tags are assigned, pages can be filtered based on their associated tags. --- ## Total Pages The **Total Pages** field displays the number of pages that are currently associated with the selected tag. --- ## Total Tags The **Total Tags** field displays the total number of tags that have been created under the tag treating it as a parent tag within the project. --- ## Title The **Title** field is used to enter the name of the tag. The title should clearly describe the category that the tag represents. --- ## Parent Tag The **Parent Tag** option allows you to organize tags into a hierarchical structure by assigning a parent tag. For example: - Food - Veg - Non-Veg This helps group related tags together and improves content organization. --- ## Visibility The **Visibility** option determines whether the tag is publicly available or private. ### Public A **Public** tag is available for use throughout the project and can be assigned wherever tags are supported. ### Private A **Private** tag is restricted for internal use and is not publicly available. --- ## Save The **Save** button creates a new tag or saves any changes made to an existing tag. --- ## Delete The **Delete** option permanently removes the selected tag from the project. # SKUs # Overview The **SKUs** section allows you to create and manage Stock Keeping Units (SKUs) within the project. An SKU represents an individual product or item along with its pricing, quantity limits, sale information, and availability. The SKU list provides an overview of all products that have been created in the project. --- ## Show Entries The **Show Entries** option allows you to select the number of SKU records displayed on a single page. --- ## Search The **Search** field allows you to quickly find an SKU by searching for its title or other relevant information. --- ## Refresh The **Refresh** button reloads the SKU list to display the most up-to-date information. --- ## Add New The **Add New** button opens the SKU configuration window, allowing you to create a new SKU. --- ## Title The **Title** column displays the name of the SKU. --- ## Subtitle The **Subtitle** column displays additional information or a secondary title associated with the SKU. --- ## Published The **Published** column indicates whether the SKU is published and available for use. - **Published** – The SKU is active. - **Unpublished** – The SKU is inactive. --- ## Icon The **Icon** column indicates whether an icon has been assigned to the SKU. --- ## Sale The **Sale** column indicates whether the SKU is currently available at a sale price. --- ## Min - Max Quantity The **Min - Max Quantity** column displays the minimum and maximum quantity that can be selected or purchased for the SKU. Example: - `1 - 10` - `1 - 100` --- ## Regular Price The **Regular Price** column displays the original price of the SKU before any discounts are applied. --- ## Sale Price The **Sale Price** column displays the discounted price of the SKU when a sale is active. --- ## Price The **Price** column displays the price currently applicable to the SKU. If a sale is active, this value reflects the sale price; otherwise, it displays the regular price. --- ## Sale Start Time The **Sale Start Time** column displays the date and time when the sale becomes active. --- ## Sale End Time The **Sale End Time** column displays the date and time when the sale expires. --- ## Rating The **Rating** column displays the rating associated with the SKU, if available. --- ## Count The **Count** column displays the number of times the SKU has been used or recorded within the project. --- # Create New SKU The **Create New SKU** window allows you to create a new product by entering its basic information, pricing, quantity limits, and sale details. --- ## Title The **Title** field is used to enter the name of the SKU. --- ## Subtitle The **Subtitle** field allows you to provide additional information or a secondary title for the SKU. --- ## Description The **Description** field is used to provide a detailed description of the SKU. --- ## Minimum Quantity The **Minimum Quantity** field specifies the minimum quantity that can be selected or purchased. --- ## Maximum Quantity The **Maximum Quantity** field specifies the maximum quantity that can be selected or purchased. --- ## Regular Price The **Regular Price** field is used to enter the standard selling price of the SKU. --- ## Sale Price The **Sale Price** field is used to enter the discounted price of the SKU. If a sale price is specified, it will be applied during the configured sale period. --- ## Sale Start Time The **Sale Start Time** field specifies the date and time when the sale should begin. --- ## Sale End Time The **Sale End Time** field specifies the date and time when the sale should end. After this time, the SKU will automatically revert to its regular price. --- ## Save The **Save** button creates the SKU and stores all the entered information. --- ## Close The **Close** button closes the SKU configuration window without saving any changes. # Bookmarks # Overview The **Bookmarks** section allows you to create and manage bookmarks within the project. A bookmark consists of a title, an icon, and a URL that can be used to provide quick access to external websites or internal resources. --- ## Show Entries The **Show Entries** option allows you to select the number of bookmark records displayed on a single page. --- ## Search The **Search** field allows you to quickly locate a bookmark by searching for its title or URL. --- ## Refresh The **Refresh** button reloads the bookmark list and displays the most recent data. --- ## Add New The **Add New** button opens the bookmark configuration window, allowing you to create a new bookmark. --- ## Title The **Title** column displays the name assigned to the bookmark. --- ## Published The **Published** column indicates whether the bookmark is active and available for use. - **Published** – The bookmark is active. - **Unpublished** – The bookmark is inactive. --- ## Icon The **Icon** column displays the icon assigned to the bookmark. --- ## URL The **URL** column displays the web address associated with the bookmark. Selecting the URL opens the linked resource. --- # Add New Bookmark The **Add New Bookmark** window allows you to create a new bookmark by specifying its title, icon, and destination URL. --- ## Title The **Title** field is used to enter the name of the bookmark. This title is displayed wherever the bookmark is used within the project. --- ## Icon The **Icon** option allows you to select an icon that visually represents the bookmark. Click the **Icon Picker** button to browse and choose an icon from the available icon library. --- ## URL The **URL** field is used to enter the web address that the bookmark will open when selected. The URL should be entered in a valid format, such as: - `https://example.com` - `https://www.google.com` --- ## Save The **Save** button creates the bookmark and stores the entered information for use within the project. # Push Channels # Overview The **Push Channels** section allows you to create and manage notification channels within the project. A push channel represents a notification category that is associated with a ringtone or notification sound. Each push channel uses an audio file selected from the project's **Audios** repository. These push channels are primarily used in the **Broadcasts** module, where a notification sound can be assigned to a broadcast to alert users when it is received. --- ## Show Entries The **Show Entries** option allows you to select the number of push channels displayed on a single page. --- ## Search The **Search** field allows you to quickly locate a push channel by searching for its title. --- ## Refresh The **Refresh** button reloads the push channel list and displays the most recent information. --- ## Add New The **Add New** button opens the push channel configuration window, allowing you to create a new push channel. --- ## Title The **Title** column displays the name of the push channel. --- ## Published The **Published** column indicates whether the push channel is active and available for use. - **Published** – The push channel is active. - **Unpublished** – The push channel is inactive. --- ## Sound File The **Sound File** column displays the audio file associated with the push channel. This sound is selected from the project's **Audios** repository and is played when the corresponding push channel is used in a broadcast notification. --- # Add New Push Channel The **Add New Push Channel** window allows you to create a new push channel by assigning it a title and selecting a notification sound. Push channels created here can later be selected while configuring **Broadcasts**, allowing different broadcasts to use different notification sounds. --- ## Title The **Title** field is used to enter the name of the push channel. The title should clearly identify the notification channel. --- ## Sound File The **Sound File** field allows you to select the audio file that will be used as the notification sound for the push channel. The available audio files are populated from the project's **Audios** repository. Only audio files that have already been uploaded to the project can be selected. --- ## Save The **Save** button creates the push channel and makes it available for selection in the **Broadcasts** module. # Addresses # Overview The **Addresses** section allows you to create and manage multiple addresses within a project. Stored addresses can be displayed in the project using the **Address Layout**, making it easy to manage and update address information from a single location. --- ## Show Entries The **Show Entries** option allows you to select the number of address records displayed on a single page. --- ## Search The **Search** field allows you to quickly locate an address by searching for its title or related information. --- ## Refresh The **Refresh** button reloads the address list and displays the most recent information. --- ## Add New The **Add New** button opens the address configuration window, allowing you to create a new address. --- ## Address Card Each address is displayed as a card containing the saved address details, including the title, contact information, and location. --- ## View The **View** button opens the complete details of the selected address. --- # Add New Address The **Add New Address** window allows you to create a new address that can later be used throughout the project. --- ## Address Title The **Address Title** field is used to enter a name that uniquely identifies the address. Example: - Head Office - Branch Office - Warehouse - Store Location --- ## Country The **Country** field allows you to select the country where the address is located. --- ## State The **State** field allows you to select the corresponding state or region. --- ## City The **City** field is used to enter the city of the address. --- ## Pincode The **Pincode** field is used to enter the postal or ZIP code of the address. --- ## Address 1 The **Address 1** field is used to enter the primary address information, such as the building number, street name, or locality. --- ## Address 2 The **Address 2** field is optional and can be used to enter additional address information, such as an apartment number, floor, suite, or nearby landmark. --- ## Latitude The **Latitude** field stores the geographical latitude of the address location. This can be used for map integration and location-based features. --- ## Longitude The **Longitude** field stores the geographical longitude of the address location. This can be used for map integration and location-based features. --- ## Phone 1 The **Phone 1** field is used to enter the primary contact number associated with the address. --- ## Phone 2 The **Phone 2** field is used to enter an alternate contact number for the address. --- ## Email The **Email** field is used to enter the email address associated with the location or contact. --- ## Save The **Save** button stores the address and makes it available for use throughout the project. The saved address can later be displayed in the application or website using the **Address Layout**. --- ## Close The **Close** button closes the address configuration window without saving any changes. # Page Design # Overview The **Page Designs** section allows users to create and manage reusable page design layouts. These designs can be mapped to pages and reused as required. --- ## Access Path **Leftside Bar → Repository → Page Designs** --- ## Page Designs Overview The Page Designs section provides the following options: - **Refresh** – Refresh the list of available page designs. - **Add New** – Create a new page design. - **Search** – Search for a specific page design. - **Show Entries** – Select the number of page designs displayed in the list. - **Copy Page Design** – Create a copy of an existing page design. - **Previous / Next** – Navigate between multiple pages of page designs. --- ## Page Design List The page design list displays the following information: | Field | Description | |---|---| | **#** | Displays the serial number of the page design. | | **Title** | Displays the name of the page design. | | **Copy Page Design** | Allows users to create a copy of an existing page design. | | **Mapped Pages** | Displays the number of pages currently mapped to the page design. | --- ## Add New Page Design To create a new page design: 1. Navigate to **Page Designs**. 2. Click **Add New**. 3. Configure the required page design settings. 4. Save the page design. The newly created page design will appear in the **Page Designs** list. --- ## Copy Page Design The **Copy Page Design** option allows users to duplicate an existing page design. To copy a page design: 1. Locate the required page design. 2. Click the **Copy Page Design** icon. 3. Configure the copied page design as required. 4. Save the changes. This allows an existing design to be reused without creating the complete layout from scratch. --- ## Mapped Pages The **Mapped Pages** column displays the number of pages associated with each page design. For example, if the value is **0**, the page design is currently not mapped to any page. Once a page design is mapped to one or more pages, the corresponding count is displayed in this column. --- ## Page Design Management Users can manage and reuse page designs based on their project requirements. Page designs can be created independently and mapped to the required pages. # Add-ons # Orders # Overview The **Orders** section allows users to view and manage order information generated from packages configured in the system. When a package is added through **Order Settings**, any order placed for that package is recorded in the **Orders** section. Users can view the details of placed orders and generate order reports when required. --- ## Access Path **Leftside → Add on → Orders** --- ## Order Configuration Before orders can be received, the required package should be added through **Order Settings**. Once a package is configured, users can place orders for the available package. --- ## View Orders When an order is placed, its information is displayed in the **Orders** section. The order details can be used to review the information associated with the placed order. --- ## Reports The **Reports** option allows users to view or generate reports related to the orders. To access order reports: 1. Go to **Orders**. 2. Click **Reports**. 3. View the available order report information. --- ## Refresh The **Refresh** button can be used to refresh the Orders section and retrieve the latest order information. --- ## Order Workflow The overall order workflow is: 1. Configure the required package in **Order Settings**. 2. Make the package available for ordering. 3. A user places an order for the package. 4. The placed order is recorded in the **Orders** section. 5. Open **Orders** to view the order information. 6. Use **Reports** to review the order report when required. # Broadcast # Overview The **Broadcasts** section allows users to create and manage broadcast messages. A broadcast can be configured with a title, message, page, and bookmark. --- ## Access Path **Leftside Bar → Add on→ Broadcasts** --- ## Create a New Broadcast To create a new broadcast, use the **New Broadcast** section. ### Title Enter the name or title of the broadcast in the **Title** field. ### Message Enter the message that needs to be broadcast in the **Message** field. ### Page Select the page where the broadcast should be associated or displayed. The available pages are shown in the **Page** dropdown. ### Bookmark Select the required bookmark from the **Bookmark** dropdown. Bookmarks can be used to associate the broadcast with a specific bookmarked location or content. --- ## Submit Broadcast After entering all the required details: 1. Enter the **Title**. 2. Enter the **Message**. 3. Select the required **Page**. 4. Select the required **Bookmark**. 5. Click **Submit**. The broadcast will be created and added to the **Broadcasts** list. --- ## Broadcasts List The Broadcasts section displays the created broadcasts in a list. The list includes: | Field | Description | |---|---| | **#** | Displays the serial number of the broadcast. | | **Title** | Displays the title of the broadcast. | | **Created At** | Displays the date and time when the broadcast was created. | --- ## Search and Refresh ### Search Use the **Search** field to quickly find a specific broadcast from the list. ### Refresh Click **Refresh** to reload the Broadcasts list and view the latest records. --- ## Pagination When multiple broadcasts are available, use the pagination controls at the bottom of the list: - **Previous** – Navigate to the previous page. - **Next** – Navigate to the next page. - **Page Number** – Open a specific page of broadcast records. --- ## Broadcast Workflow The basic broadcast workflow is: 1. Navigate to **Broadcasts**. 2. Enter the **Title** and **Message**. 3. Select the required **Page**. 4. Select the required **Bookmark**, if applicable. 5. Click **Submit**. 6. The created broadcast appears in the **Broadcasts** list. 7. Use **Search** or **Refresh** to manage and view the available broadcasts. # Custom Layouts # Overview The **Custom Layouts** section is used to manage custom layouts for the project. It provides a dedicated area where configured custom layouts can be accessed and managed. --- ## Access Path **Leftside Bar → Add on → Custom Layouts** --- ## Custom Layouts Overview The **Custom Layouts** section displays the available custom layout configurations associated with the project. Custom layouts can be used when a project requires a layout structure beyond the standard page layouts. --- ## Layout Management To access Custom Layouts: 1. Navigate to **VirtuBox**. 2. Open **Custom Layouts** from the **Add-ons** section. 3. The **Custom Layouts** panel will be displayed. 4. Manage the available custom layout configurations as required. --- ## Purpose Custom Layouts provide a dedicated area for handling customized layout structures within the project. This allows layouts to be maintained separately from the standard page configuration. # Form # Overview The **Forms** section allows users to create and configure forms by adding pages, questions, and different question types. Forms can be configured with various options and rules based on the project requirements. --- ## Access Path **Leftside Bar → Add on→ Forms** --- ## Form Configuration After opening a form, the form configuration screen provides multiple options for managing the form: - **Draft** – Configure and edit the form. - **Manage** – Manage the form configuration. - **After Form Submission** – Configure the behavior after the form is submitted. - **Form Rules** – Configure rules for the form. - **Draft Preview** – Preview the form before making it live. - **Manage Template** – Manage the form template. - **Make Live** – Publish the latest form changes. --- ## Create Form Pages A form can contain multiple pages. To add a new page: 1. Open the required form. 2. Go to the **Draft** section. 3. Click **Add New Page**. 4. Configure the page as required. Each page can contain multiple questions. --- ## Add Questions Questions can be added to each form page using the **Add New Question** option. To add a question: 1. Select the required page. 2. Click **Add New Question**. 3. Select the required **Question Type**. 4. Enter the question details. 5. Configure the available options. 6. Save the question. Different question types can be configured according to the form requirements. --- ## Question Configuration The question configuration provides various fields and options depending on the selected question type. For example, a question can include: - **Question Type** - **Question Title** - **Label** - **Slug** - **Options** - **Reset Label** - **Shuffle** - **First Shuffle** - **Last Shuffle** - **Only Image** - **Grid** - **Width** - **Hide Header** - **Required** The available configuration options may vary depending on the selected question type. --- ## Multiple Choice Questions For a **Multiple Choice** question, users can add multiple options. Each option can be configured with: - Option text - Option type - Image, where applicable Additional options can be added using the **+ Option** button. The **+ Other** option can also be enabled when users should be allowed to provide an additional response. --- ## Form Preview The **Draft Preview** option allows users to preview the form before publishing it. Use the preview to verify: - Page structure - Question placement - Question options - Form appearance - Required fields - Overall form behavior --- ## Make Live **Make Live is mandatory after any changes are made to the form.** Whenever you add, remove, or modify any page, question, option, or form configuration, click **Make Live** to publish the latest changes. > **Important:** If the form changes are not made live, the latest changes will not be reflected in the live form. ### Recommended Workflow 1. Make the required changes in **Draft**. 2. Review the changes using **Draft Preview**. 3. Click **Make Live**. 4. Verify the updated form. --- ## Form Submission The **After Form Submission** section can be used to configure what happens after a user submits the form. Configure the required post-submission behavior according to the project requirements. --- ## Form Rules The **Form Rules** section allows users to configure rules and conditions for the form. Rules can be used to control form behavior based on the configured requirements. --- ## Form Workflow The general form configuration workflow is: 1. Open **Forms**. 2. Select the required form. 3. Create or configure form pages. 4. Add questions to each page. 5. Configure question types and options. 6. Configure **Form Rules** and **After Form Submission**, if required. 7. Review the form using **Draft Preview**. 8. Click **Make Live**. 9. Verify the changes in the live form. > **Note:** Always click **Make Live** after making any changes to ensure the latest form configuration is published. # Form responses # Overview The **Form Responses** section allows users to view and manage responses submitted through the configured forms. Users can filter responses based on tags, forms, and response type. --- ## Access Path **Leftside Bar → Add on→ Form Responses** --- ## Form Responses Overview The Form Responses section provides filters and options to help users find specific form submissions. ### Available Filters | Filter | Description | |---|---| | **Tags** | Filter responses based on the selected tag. | | **Forms** | Filter responses for a specific form. | | **Type** | Filter responses based on their status/type. | | **Search** | Search for a specific response or record. | The **Type** filter provides the following options: - **Live** – View responses submitted through the live form. - **Test** – View responses generated during form testing. --- ## Response List The response list displays information about submitted forms. Available columns include: - **#** – Serial number of the response. - **Form** – Name of the form from which the response was submitted. - **Created At** – Date and time when the response was created. - **Type** – Indicates whether the response is **Live** or **Test**. - **Source** – Displays the source of the submission. - **Submit Time** – Displays the time when the form was submitted. - **User Name** – Displays the name of the user who submitted the form. - **Tags** – Displays tags associated with the response. --- ## Refresh Click **Refresh** to reload the Form Responses section and retrieve the latest response records. --- ## Show Entries The **Show Entries** dropdown allows users to select how many response records should be displayed in the list. --- ## Search Responses Use the **Search** field to quickly find a specific form response. --- ## Filter Form Responses To filter responses: 1. Open **Form Responses**. 2. Select the required **Tag**, if applicable. 3. Select the required **Form**. 4. Select the required **Type**: - **Live** - **Test** 5. Use the **Search** field if required. 6. Review the filtered response records. --- ## Pagination When multiple response records are available, use the pagination controls: - **Previous** – Navigate to the previous page of responses. - **Next** – Navigate to the next page. - **Page Number** – Open a specific page directly. --- ## Form Response Workflow 1. Create and configure the required form under **Forms**. 2. Make the form **Live** when the configuration is ready. 3. Users submit the form. 4. Submitted responses are recorded in **Form Responses**. 5. Use **Tags**, **Forms**, and **Type** filters to find specific responses. 6. Review the response details from the response list. # Script Groups # Script responses # Workflows # Overview *A beginner-friendly guide to creating and configuring a workflow, from the first setup to stage forms.* --- ## Access Path - **Leftside Bar -> Add Ons -> Workflows** ## Before You Begin **What is a workflow?** A workflow is a process that a record moves through, one stage at a time. For example, a request may start in **New**, move to **Approved** or **Rejected**, and then be closed. Each stage can show its own form and can have its own rules about who sees it. **What you will build:-** By the end of this guide you will have a workflow with: - a title and a published status, - database columns that store the data, - stages in the correct order, - a form attached to each stage, - access rules that control who can see which records, - a display view (a listing of the columns users see). **Where the settings live:-** - Everything is configured on the **Workflows** page and inside a single workflow. Inside a workflow you will see these top-level tabs: | Tab | What it is for | |---|---| | **Tasks** | Working records created by the workflow | | **Content** | The main configuration area (most of this guide) | | **Stages** | Creating and editing stages | | **Inputs** | Extra workflow inputs | | **Triggers** | Automatic actions | | **Templates** | Workflow templates | The **Content** tab has its own sub-tabs, in this order: **Manage**, **Creator**, **Database Column**, **Config**, **Models**, **Access**, **Input Forms**, **Input Orders**, **Display**. > **Note on labels.** Labels in this guide come from the Workflow screens. If your installation uses a different language pack or a customised label, the position of the tab or button will still match. ## The Journey at a Glance | Step | What you do | Where | |---|---|---| | 1 | Plan the workflow flow | On paper or in a document | | 2 | Create the stage forms | Forms module | | 3 | Create the workflow | Workflows page → Add New | | 4 | Create database columns | Content → Database Column | | 5 | Configure the input forms | Content → Input Forms | | 6 | Configure access | Content → Access (and Config) | | 7 | Configure the display | Content → Display | | 8 | Create the stages | Stages tab | | 9 | Attach forms to stages | Content → Creator and Input Forms | | 10 | Validate everything | Whole workflow | > **Important order tip.** The **Choose Workflow Stage** list in **Input Forms** stays empty until the stages exist. If you want to finish Step 5 in one go, create your stages (Step 8) right after Step 3. Otherwise, do Step 5 as far as you can, then return to finish it after Step 8. The final result is the same. --- ## Step 1: Plan the Workflow Flow **Purpose.** A workflow is much easier to build when you know the path before you start clicking. This step has no screen. It is your plan. **What to do** 1. Write down the name of the process (for example, *Leave Request*). 2. List the stages in the order a record should move through them, for example: **New → In Review → Approved / Rejected → Closed**. 3. For each stage, note: - what information must be collected (this becomes the stage form), - who should be able to see it, - whether it is a final stage (this is the **Closed** setting on the stage). 4. List all the pieces of data the workflow must remember (for example, *Employee Name*, *Start Date*, *Days Requested*). These become database columns in Step 4. **Tip.** Keep stage names short and clear. Users see them every day. **Validation check** - [ ] Every stage has a clear name and purpose. - [ ] You know which stage is the first one and which are final. - [ ] Every piece of data has a name and a type (text or number). **Common mistake.** Skipping the plan and adding stages later in the wrong order. Reordering is harder than getting it right the first time. --- ## Step 2: Create the Stage Forms **Purpose.** Each stage shows a form to the user. These forms must exist before you can attach them to the workflow. **What to do** 1. Open the module where forms are created in your project (the same list that feeds the **Select Form** drop-down later in this guide). 2. Create one form for each stage that needs one. For example: a *New Request* form, a *Review* form, an *Approval* form. 3. Add the fields and input elements each stage needs (text fields, numbers, dates, drop-downs, and so on). 4. Give each form a clear **Title**. You will pick forms by title later, so avoid duplicates such as "Form 1" and "Form 2". 5. Save each form. **Why it matters.** The workflow only lists forms that already exist in the project. A form you have not created will not appear in the drop-down. **Validation check** - [ ] One form exists for every stage that needs one. - [ ] Form titles are unique and descriptive. - [ ] Every field you need to save has a clear name, because you will map these to database columns in Step 5. **Common mistake.** Creating the workflow first and then discovering the forms are missing. Create the forms before you configure the workflow. > ![Forms list showing all stage forms] [![form_List.png](https://docs.virtubox.io/uploads/images/gallery/2026-11/scaled-1680-/lV0VIXcqnlgQk7rk-form-list.png)](https://docs.virtubox.io/uploads/images/gallery/2026-11/lV0VIXcqnlgQk7rk-form-list.png) --- ## Step 3: Create the Workflow **Purpose.** This creates the empty workflow container that all other settings belong to. **What to do** 1. Open the **Workflows** page. You will see a table with the columns **#**, **Title**, **Updated On**, **Published** and **Action**. You can use **Search** and **Show Entries** to find workflows, and **Refresh** to reload the list. 2. Click **Add New**. 3. In the **Add New Workflow** window, type the workflow name in **Title** (maximum 100 characters). 4. Click **Save**. (Use **Close** to cancel.) 5. A message confirms that the new workflow was added. It now appears in the list. 6. Open the workflow from the **Action** column. The page heading shows **Workflow: your title**, with a **Back** button to return to the list. **Validation check** - [ ] The workflow appears in the **Workflows** list. - [ ] Opening it shows the tabs **Tasks**, **Content**, **Stages**, **Inputs**, **Triggers** and **Templates**. **Common mistakes** - Leaving **Title** empty. It is required and the workflow will not be created. - Using a very long title. The limit is 100 characters here, and the **Manage Title** field on the **Content** tab allows 70, so keep titles short. > ![the Workflows list with the Add New button] [![imag2.png](https://docs.virtubox.io/uploads/images/gallery/2026-11/scaled-1680-/yQOrrurUKC2Sr7U2-imag2.png)](https://docs.virtubox.io/uploads/images/gallery/2026-11/yQOrrurUKC2Sr7U2-imag2.png)) --- ## Step 4: Configure the Content Tab and Database Columns **Purpose.** Database columns are the "storage boxes" for your workflow data. Every value the workflow remembers must have a column. ### 4a. Open the Content tab and check Manage 1. Inside your workflow, click the **Content** tab. 2. The first sub-tab, **Manage**, is already open. Here you can: - change the workflow name under **Manage Title** and click save, - switch the **Published** button. Green means the workflow is published, red means it is not. Click it to change the status. **Tip.** Leave the workflow unpublished while you are building it, and publish it after you finish Step 10. ### 4b. Create the database columns 1. Click the **Database Column** sub-tab. 2. For each piece of data, fill in one row: - **Type**: choose **Text** or **Number**. - **Path**: the internal name where the data is stored. The example shown in the field is `profile.name`. Use lowercase words joined with dots, for example `leave.start_date`. - **Title**: the friendly name users will see, for example *Start Date*. 3. Add more rows if you need more columns. 4. Click **Save**. **Why it matters.** The columns you create here are the options you pick later in **Input Forms** (**Select Data Column**), **Display** and **Access**. **Validation check** - [ ] Every field you plan to save has a column. - [ ] Each **Path** is unique and has no spaces. - [ ] You clicked **Save** and the columns are still there after you refresh the page. **Common mistakes** - Forgetting to click **Save**. The rows are lost if you leave the page. - Choosing **Text** for something you need to calculate or compare as a number (such as *Days Requested*). - Changing a **Path** after data has been saved. Plan your paths carefully. > ![Content tab with the sub-tabs visible] [![image3.png](https://docs.virtubox.io/uploads/images/gallery/2026-11/scaled-1680-/soC9PtXbMy4MiREq-image3.png)](https://docs.virtubox.io/uploads/images/gallery/2026-11/soC9PtXbMy4MiREq-image3.png) > ![Database Column rows with Type, Path and Title filled in] [![image4.png](https://docs.virtubox.io/uploads/images/gallery/2026-11/scaled-1680-/nCiCKCrUPRTBl3ay-image4.png)](https://docs.virtubox.io/uploads/images/gallery/2026-11/nCiCKCrUPRTBl3ay-image4.png) --- ## Step 5: Configure the Input Forms **Purpose.** An **Input Form** connects a form to a stage and tells the workflow which form field goes into which database column. It also sets the title of the task created for that stage. **What to do** 1. Open **Content → Input Forms**. The table shows **Form**, **Task Title**, **Workflow Stage** and **Action** for each entry already added. 2. Click **Add New**. The **Add Input Form** window opens. 3. Fill in the window: - **Choose Form**: pick the form from Step 2 (**Select Form**). - **Task Title**: the title of the task. You can type `@` to get suggestions of values to insert. - **Choose Workflow Stage**: pick the stage this form belongs to (**Select Workflow Stage**). - **Data / Value**: for each row, choose a **Data** column (**Select Data Column**) and set its **Value**, using `@` to pick the form field that supplies the data. - **Model / Value**: if your workflow uses models, map them in the same way. 4. Click **Add** (or **Update** when editing). 5. Repeat for every form and stage combination. **Row actions in the table** - 👁 **View** shows the **Input Form Info** (form, title, stage, data and models). - ✏ **Edit** opens the same window to change it. - 🗑 **Delete** removes the entry. **About Input Orders.** The **Input Orders** sub-tab works the same way, but for order items (**Choose Order**, **Title**, **Choose Workflow Stage**). Use it only if your workflow handles orders. **Validation check** - [ ] Every stage that collects data has an Input Form entry. - [ ] Every important form field is mapped to a database column. - [ ] Use the 👁 icon to confirm the **Input Form Info** looks right. **Common mistakes** - The **Choose Workflow Stage** list is empty because stages are not created yet. Create stages first (Step 8), then return here. - Mapping two different form fields to the same column, which overwrites data. - Leaving a required field unmapped, so the data is never saved. - Choosing the wrong stage, so the form shows up at the wrong point in the process. > ![Input Forms table] [![image5.png](https://docs.virtubox.io/uploads/images/gallery/2026-11/scaled-1680-/34mDtlg3kapSJcQD-image5.png)](https://docs.virtubox.io/uploads/images/gallery/2026-11/34mDtlg3kapSJcQD-image5.png) --- ## Step 6: Configure Access Permissions **Purpose.** Access rules decide who can see which workflow records. Without them, users may see too much, or nothing at all. ### 6a. Config: which status groups a user type can see 1. Open **Content → Config**. 2. Under **Access User Type**, you will see three buttons: **New**, **Approved** and **Rejected**. 3. Click a button to switch it on or off. A highlighted button means that status is included. (The buttons show "Click to change status" when you hover.) ### 6b. Access: rules based on data 1. Open **Content → Access**. The table shows **Access Key** and **Action** for each rule. 2. Click **Add New**. The **Access** window opens. 3. Fill in: - **Access Key**: a name for the rule, for example `own_records`. - **Conditions**: for each condition set a **Key** (the column to check), an **Operation** (such as equals, not equals, starts with, ends with, in a list, less than, or greater than), and the **Value** (or **Value's** for list-type operations). 4. Click **Save**. **Why it matters.** These rules protect data. For example, a rule can limit a manager to records whose *Department* equals their own department. **Validation check** - [ ] Each user group that should see records has a matching rule. - [ ] The **Key** in each condition is a real column from Step 4. - [ ] You tested with a user who should have access, and one who should not. **Common mistakes** - Switching on every status in **Config** without thinking, which exposes records to the wrong users. - A typo in **Key**, which makes the rule match nothing. - Using the wrong **Operation** (for example *equals* when you meant *in a list*). --- ## Step 7: Configure the Display **Purpose.** The display decides which columns users see in the workflow list view. **What to do** 1. Open **Content → Display**. The table shows **Title**, **Columns** and **Action**. 2. Click **Add New**. The **Display** window opens. 3. Enter a **Title** for the view (for example *Open Requests*). 4. Under **Columns**, choose each column from **Select Data Column**. Add more rows for more columns. 5. Click **Save**. 6. Use the ⬆ and ⬇ arrows in the **Action** column to change the order of the display entries. Use ✏ to edit and 🗑 to delete. **Validation check** - [ ] The columns users need to scan quickly are included (for example *Employee Name*, *Start Date*). - [ ] The order is sensible, with the most important column first. **Common mistakes** - Showing too many columns, which makes the list hard to read. Keep it to what people really need. - Forgetting to create columns first. The **Select Data Column** list only shows columns from Step 4. > ![Display table] [![image6.png(https://docs.virtubox.io/uploads/images/gallery/2026-11/scaled-1680-/SK1r33BcVqbd0HdW-image6.png)](https://docs.virtubox.io/uploads/images/gallery/2026-11/SK1r33BcVqbd0HdW-image6.png) > ![Display window with column selectors] [![image7.png](https://docs.virtubox.io/uploads/images/gallery/2026-11/scaled-1680-/XJaAPpDmxeJbVoC7-image7.png)](https://docs.virtubox.io/uploads/images/gallery/2026-11/XJaAPpDmxeJbVoC7-image7.png) --- ## Step 8: Create and Configure All Workflow Stages **Purpose.** Stages are the steps a record moves through. Their order is the order of your flow. **What to do** 1. Open the **Stages** tab (this is a top-level tab of the workflow, next to **Content**). 2. You will see **Workflow Stages** with the columns **#**, **Title**, **Updated At**, **Published**, **Closed** and **Action**. 3. Click **Add New**. In the **Add New Workflow Stage** window, enter a **Title** (maximum 100 characters) and click **Save**. 4. Repeat for every stage in your plan from Step 1, **in order**. Start with the first stage (for example **New**). 5. To change a stage, click ✏ in the **Action** column. The **Edit Stage** window has: - **Stage Title** (required), - **Stage Slug** (required, a short internal name), - **Published** checkbox, - **Closed** checkbox, for final stages, - an **Update** button. 6. You can also click the coloured dot in the **Published** or **Closed** column to switch it quickly. Green means on, red means off. **Validation check** - [ ] The numbered list in **#** matches your plan from Step 1. - [ ] Every stage that users should reach is **Published** (green). - [ ] Final stages (such as Approved, Rejected, Closed) have **Closed** switched on, and no other stage does. - [ ] Every stage has a **Stage Slug**. **Common mistakes** - Leaving a stage unpublished (red), so records cannot reach it. - Marking a middle stage as **Closed**, which ends the process too early. - Creating stages in the wrong order. - Leaving **Stage Slug** empty. The update will fail with "Please fill all required fields". > ![Workflow Stages table with the Published and Closed dots] [![image8.png](https://docs.virtubox.io/uploads/images/gallery/2026-11/scaled-1680-/anDmrUypIIhGqIwK-image8.png)](https://docs.virtubox.io/uploads/images/gallery/2026-11/anDmrUypIIhGqIwK-image8.png) --- ## Step 9: Assign Forms to Workflow Stages **Purpose.** This makes sure that when a user enters a stage, the right form appears. **What to do** 1. Open the workflow's **Content** tab, then the **Creator** sub-tab. 2. In the **Forms** card, open the **Select Form** drop-down and choose the form for the first stage (for example the form for the **New** stage). 3. Click **Add**. The form appears as a tag below the drop-down. 4. Repeat for every other stage form you need. - To remove a form, click **delete** next to its tag. - A form that is already added cannot be added twice. You will see the message "Form already added in workflow!". 5. Go to **Content → Input Forms** and make sure each form is linked to its stage in **Choose Workflow Stage** (see Step 5). The **Workflow Stage** column in the table should show the right stage for every form. **Validation check** - [ ] Every stage form appears as a tag in the **Creator** tab's **Forms** card. - [ ] In **Input Forms**, every form row shows the correct **Workflow Stage**. - [ ] The first stage (**New**) has its form assigned. **Common mistakes** - Adding the form in **Creator** but forgetting to link it to a stage in **Input Forms**. - Linking the right form to the wrong stage. - Clicking **Add** without choosing a form (you will see "Select workflow form!"). > ![Creator tab with Select Form, the Add button and form tags] [![image11_change.png](https://docs.virtubox.io/uploads/images/gallery/2026-11/scaled-1680-/ygSzpy1BLtudcqmc-image11-change.png)](https://docs.virtubox.io/uploads/images/gallery/2026-11/ygSzpy1BLtudcqmc-image11-change.png) --- ## Step 10: Validate the Complete Workflow **Purpose.** Confirm that everything is connected before real users start. ### 10a. Review each part | Area | Where to check | What you should see | |---|---|---| | Title and status | **Content → Manage** | Correct title, **Published** set as intended | | Forms | **Content → Creator** | All stage forms listed | | Columns | **Content → Database Column** | All columns present with the right **Type** | | Access | **Content → Config** and **Access** | Rules for each user group | | Input forms | **Content → Input Forms** | Every form linked to a stage | | Display | **Content → Display** | The right columns in the right order | | Stages | **Stages** tab | Correct order, **Published** and **Closed** set correctly | ### 10b. Test the flow 1. Publish the workflow (**Content → Manage → Published**, green). 2. Create a test record in the first stage (**New**) and check that the right form appears. 3. Fill in the form with sample data and save. 4. Move the record to the next stage. Check that the correct form appears for that stage. 5. Continue until you reach a final stage (**Closed**). 6. Open the **Tasks** tab and check that your test record appears with the right columns. 7. Sign in as a different user type (one with access and one without) and confirm the permissions work as expected. ### 10c. Final checklist - [ ] Every stage has the correct form. - [ ] Data entered in each form shows up in the correct column. - [ ] The display view shows the columns you chose. - [ ] Users see only the records they should. - [ ] Final stages are marked **Closed**. - [ ] Test records are deleted or marked clearly before launch. --- ## Expected Outcome When you finish, the workflow is fully configured: stages, forms, database columns, permissions and display settings are all connected. Users can create records, see the right form at every stage, and move records through the process from **New** to the final stage. ## Quick Troubleshooting | Problem | Likely cause | Fix | |---|---|---| | A form is not in the **Select Form** list | The form was not created or saved | Create it in Step 2, then refresh | | **Choose Workflow Stage** is empty | No stages exist yet | Create stages in the **Stages** tab | | Data is not saved | Form field not mapped to a column | Check **Data / Value** in **Input Forms** | | Users cannot see records | Access rule or **Config** status is missing | Review **Config** and **Access** | | Record cannot reach a stage | Stage is not **Published** | Turn on the green dot in **Stages** | | Record stops too early | A middle stage is marked **Closed** | Turn **Closed** off for that stage | | Column missing from **Display** | Column not created or not saved | Create and **Save** it in **Database Column** | ## Glossary - **Workflow**: the full process a record moves through. - **Stage**: one step of the process (for example **New**). - **Stage Slug**: the short internal name of a stage. - **Database Column**: a place that stores one piece of workflow data. - **Path**: the internal address of a column, such as `profile.name`. - **Input Form**: the link between a form, a stage and the columns that store its data. - **Access Key**: the name of an access rule. - **Display**: the set of columns shown in the list view. - **Published**: the item is live and available to users. - **Closed**: a final stage that ends the process. # Navigations # Integrations # Bulk Actions # Settings- General # Basic # Overview The **Basic** settings section allows users to configure the general information, contact details, special pages, project availability, QR codes, and other basic configurations for the project. --- ## Access Path **Leftside Bar → Settings → General → Basic** --- ## My Project The **My Project** section contains the basic project information. ### Title Enter the name of the project in the **Title** field. ### Slug The **Slug** defines the unique identifier used for the project. Only the following characters are allowed: - Lowercase letters (`a-z`) - Numbers (`0-9`) - Dash (`-`) - Underscore (`_`) ### App Page Select the page that should be used as the main **App Page**. ### Web Page Select the page that should be used as the main **Web Page**. ### Currency Select the currency used by the project. ### Language Select the language required for the project. Click **Submit** to save the project information. --- ## Contact The **Contact** section allows users to configure the project's contact information. Available fields include: - **Phone** - **Email** Enter the required contact details and click **Submit** to save the changes. --- ## Special Pages The **Special Pages** section allows users to assign specific pages to predefined system functions. Available special page configurations include: - **Cart** - **Login** - **Map** - **Map Point** - **Map Track** - **Order Details** - **Order History** - **Profile** - **Search** - **User Addresses** Select the required page from the corresponding dropdown for each special page. This allows the system to use the selected page for the respective functionality. --- ## Project Status The project status section provides controls for changing project availability. ### Published The **Published** option controls whether the project is published. ### Searchable The **Searchable** option controls whether the project can be searched. Click the respective button to change the required status. --- ## Web QR Code The **Web QR Code** section provides a QR code for sharing the project through the web. The section includes: - Project sharing URL - QR Code - **Download QR Code** button - **Campaign** - **Query Parameter** - **Color** - **Background** ### Campaign Enter a campaign identifier for the QR code. Only lowercase alphanumeric characters, dashes (`-`), and underscores (`_`) are allowed. ### Query Parameter Enter the required query parameter for the QR code URL. Only lowercase alphanumeric characters, dashes (`-`), and underscores (`_`) are allowed. ### Color Select the required QR code color. ### Background Select the required QR code background. ### Download QR Code Click **Download QR Code** to download the generated web QR code. --- ## App QR Code The **App QR Code** section provides a QR code for sharing the project through the application. The section includes: - App sharing URL - QR Code - **Download QR Code** button - **Campaign** - **Query Parameter** - **Color** - **Background** ### Campaign Enter the campaign identifier for the App QR code. ### Query Parameter Enter the required query parameter for the App QR code. ### Color Select the required QR code color. ### Background Select the required QR code background. ### Download QR Code Click **Download QR Code** to download the generated App QR code. --- ## Configurations The **Configurations** section provides additional project-level configuration options. ### Image Loader The **Image Loader** setting controls the image loading behavior. Select the required option from the dropdown and click **Submit** to save the configuration. --- ## Basic Settings Workflow 1. Navigate to **Settings → General → Basic**. 2. Configure the **My Project** details. 3. Add the required **Contact** information. 4. Configure the required **Special Pages**. 5. Set the **Published** and **Searchable** status. 6. Configure the **Web QR Code** and **App QR Code**, if required. 7. Configure the **Image Loader** setting. 8. Click the respective **Submit** buttons to save the changes. # Style # Assets # Overview The **Assets** section allows users to manage project-level assets such as the **Project Logo** and **Image Loader**. --- ## Access Path **Left Sidebar → Settings → General → Assets** --- ## Project Logo The **Project Logo** section allows users to add and manage the logo associated with the project. ### Edit Logo Click **Edit Logo** to update the existing project logo. ### Delete Logo Click the **Delete** icon to remove the currently configured project logo. --- ## Image Loader The **Image Loader** section allows users to configure an image loader for the project. ### Add Image Loader To add an image loader: 1. Navigate to **Assets**. 2. Click **Add Image Loader**. 3. Configure the required image loader details. 4. Save the configuration. The configured image loader can be used to display a loading image while content is being loaded. --- ## Asset Management Workflow 1. Open the **Left Sidebar**. 2. Navigate to **Settings → General → Assets**. 3. Manage the **Project Logo** as required. 4. Add or configure an **Image Loader**, if required. 5. Update or remove existing assets using the available options. # Order Settings ### Overview The **Order Settings** section provides configuration options for managing the ordering process, cart behavior, address preferences, and order-related questions. #### Access Path **Left Side Bar → Settings → Order Settings** --- ### Business Note Use the **Business Note** field to add important information or instructions related to orders. **Example:** > Orders are processed within 24 hours. Please ensure that the delivery address and contact details are correct before placing the order. Click **Save** to apply the changes. --- ### Minimum Order Price The **Minimum Order Price** option allows you to define the minimum order value required for customers to place an order. **Example:** **Currency:** INR **Minimum Order Price:** `500` With this configuration, customers must have an order value of at least **₹500** before they can place the order. Click **Save** to apply the changes. --- ### Cart The **Cart** section allows you to customize the Add to Cart button displayed to users. #### Add to Cart (Button Text) Enter the text that should appear on the Add to Cart button. **Example:** `Add to Cart` Click **Save** to apply the button text. #### Add to Cart (Button Icon) Add an icon that will be displayed along with the Add to Cart button. Click **Add Icon** and select/upload the required icon. **Example:** 🛒 Add to Cart --- ### Preferred Address The **Preferred Address** section allows you to select the address types that should be available during the ordering process. Available options include: - **Shipping Address** – Used for delivering the order. - **Billing Address** – Used for billing and payment-related information. **Example Configuration:** - Shipping Address: **Enabled** - Billing Address: **Enabled** Select the required options and click **Save**. --- ### Order Profile Questions The **Order Profile Questions** section allows you to add additional questions that users need to answer during the ordering process. Select the required question type from the dropdown. Available question types include: - **Short Text** – For short responses such as Name or Company. - **Long Text** – For detailed responses such as Address or Additional Instructions. - **Email** – For collecting an email address. - **Phone** – For collecting a contact number. - **Number** – For collecting numerical information. **Example:** | Question | Type | |---|---| | Full Name | Short Text | | Delivery Instructions | Long Text | | Email Address | Email | | Contact Number | Phone | | Number of Items | Number | Select the required question type from the dropdown to add it to the order profile. > **Note:** Click **Save** after making changes to the respective configuration to ensure that the updated settings are applied. # Users ### Overview The **Users** section allows you to manage registered users and configure the profile information collected from them. It provides options to view users, manage common profile fields, and create custom profile fields. #### Access Path **Left Side Bar → Settings → Users** --- ### User Management The **Users** page displays the list of users registered in the project. The user list includes the following information: - **Name** – Displays the user's name. - **Phone** – Displays the user's registered phone number. - **Created On** – Shows when the user account was created. - **Status** – Displays the current status of the user. - **Action** – Provides available actions for managing the user. The page also provides: - **Show Entries** – Select the number of users displayed per page. - **User Status** – Filter users based on their status. - **Admin Notes** – Filter users based on admin notes. - **Search** – Search for a specific user. --- ### Manage Profile Click **Manage Profile** to configure the information collected in the user's profile. The **Manage Users Profile** section contains two profile types: - **Common Profile** – Configure commonly used profile fields. - **Custom Profile** – Create additional profile fields according to project requirements. --- ### Profile Question Click **Add New Question** to add a new profile field. Each profile question can be configured using the following options: #### Type Select the type of information that the user needs to provide. **Example:** `Short Text` Other question types can be selected based on the required input. #### Title Enter the name or question that will be displayed to the user. **Example:** `Full Name` #### Key Enter a unique key for the profile field. **Example:** `full_name` > **Note:** The key should use valid characters such as letters, numbers, hyphens, underscores, and periods as supported by the system. #### Placeholder Enter placeholder text to guide the user about what information should be entered. **Example:** `Enter your full name` #### Note Add additional information or instructions related to the profile field. **Example:** `Please enter your name as it appears on your ID.` --- ### Profile Field Options The following options are available for configuring the profile field: - **Required** – Makes the field mandatory for the user. - **Editable** – Allows the user to edit the field after providing the information. - **Moderated** – Enables moderation for the profile field. - **Subtitle** – Allows a subtitle to be displayed with the profile field. After configuring the profile field, click **Update** to save the changes. To add additional profile fields, click **Add New Question**. > **Note:** Configure the profile fields according to the information required from users. Use clear titles, keys, placeholders, and notes to provide a consistent user experience. # Devices ##### Devices The **Devices** section allows you to view and monitor devices associated with the project. It provides information about the device status, installation source, application version, and location details. **Access Path:** **Left Side Bar → Settings → Devices** **Show Entries:** 10 | 25 | 50 | 100 | # | Online | Install Source | Version | City | Sub State | State | Country | |---|--------|----------------|---------|------|-----------|-------|---------| | 1 | — | — | — | — | — | — | — | The device list displays the following information: - **Online** – Shows whether the device is currently online. - **Install Source** – Displays the source from which the application was installed. - **Version** – Shows the application version installed on the device. - **City** – Displays the city associated with the device. - **Sub State** – Displays the relevant sub-state or regional information. - **State** – Displays the state associated with the device. - **Country** – Displays the country associated with the device. > **Note:** The number of devices displayed per page can be changed using the **Show Entries** dropdown. # Shares # Overview The **Shares** module is used to view and monitor sharing activity within the VirtuBox backend. It provides information about campaigns, share activity, visitor interactions, and visitor device details. The module includes campaign management, graphical reports, date filtering, and a table displaying available sharing records. ## Navigation Path **Navigation Path:** VirtuBox → Settings → General → Shares ### Shares Page The Shares page contains the following main sections: 1. Shares 2. Manage Campaign 3. Date Filter 4. Campaigns 5. Visitors 6. Sharing Activity Table #### Manage Campaign The **Manage Campaign** option allows users to access campaign management. Click the **Manage Campaign** button to open the campaign management interface. Campaigns can be used to organize and monitor sharing activities, depending on the available configuration. ##### Date Filter The date filter allows users to select a specific date range for viewing sharing activity and visitor statistics. ##### Available Options | Option | Description | |---|---| | Date Range | Selects the start and end dates for the report. | | Filter | Applies the selected date range to the displayed information. | ##### How to Apply a Date Filter 1. Open the Shares page. 2. Select the required date range. 3. Click the **Filter** button. 4. Review the updated campaign and visitor reports. ##### Campaigns The **Campaigns** section displays a graphical representation of campaign click activity for the selected date range. ##### Available Information - **Campaigns Clicks:** Represents campaign click activity. - **Chart:** Displays the available campaign click data graphically. This section helps users monitor campaign engagement over the selected period. #### Visitors The **Visitors** section displays a graphical representation of daily visitor clicks for the selected date range. ##### Available Information - **Visitors Daily Clicks:** Represents daily visitor click activity. - **Chart:** Displays the available visitor click data graphically. This section helps users review visitor activity and understand engagement trends. #### Sharing Activity Table The sharing activity table displays available records related to campaign and sharing activity. ##### Available Fields | Field | Description | |---|---| | # | Displays the serial number of the record. | | Time | Displays the time associated with the sharing activity. | | Campaign | Displays the associated campaign name. | | Share | Displays the sharing information. | | City | Displays the visitor's city, when available. | | State | Displays the visitor's state, when available. | | Country | Displays the visitor's country, when available. | | Platform | Displays the visitor's platform information. | | Browser | Displays the browser used by the visitor. | | OS | Displays the visitor's operating system. | | Device | Displays the visitor's device information. | ##### Show Entries The **Show Entries** dropdown allows users to select the number of records displayed on a page. ##### Search The **Search** field allows users to search for records in the table. ##### Pagination The pagination controls allow users to navigate through the available records. - **Previous:** Moves to the previous page. - **Page Number:** Displays the current page. - **Next:** Moves to the next page. ##### Horizontal Scrollbar The horizontal scrollbar allows users to view additional table columns when the table width exceeds the visible area. #### How to View Sharing Activity Follow these steps to review sharing activity: 1. Log in to the VirtuBox backend. 2. Navigate to **Settings → General → Shares**. 3. Select the required date range. 4. Click **Filter** to apply the date range. 5. Review the **Campaigns** chart. 6. Review the **Visitors** chart. 7. Inspect the sharing activity table. 8. Use the Search field to find specific records. 9. Adjust the Show Entries option to change the number of displayed records. 10. Use the pagination controls to navigate through the records. #### Important Notes - The displayed reports depend on the selected date range and available activity data. - Visitor and sharing details may be unavailable when no corresponding records exist. - The screenshot shows an empty table with `1 of 0`, indicating that no records are currently displayed for the selected filters. - Campaign and visitor charts may appear empty when no relevant activity data is available. - Visitor information depends on the data collected by the application. #### Key Benefits - Provides an overview of sharing activity. - Displays campaign click statistics. - Shows daily visitor click activity. - Provides available visitor platform, browser, operating system, and device details. - Supports date-based filtering and record searching. - Allows users to navigate and review available sharing records. #### Conclusion The **Shares** module provides a centralized interface for reviewing campaign performance, visitor activity, and sharing records. Users can apply date filters, analyze graphical reports, and inspect available visitor and sharing details to monitor engagement within VirtuBox. # User & Access # Overview The **Users and Access** section allows you to manage users who have access to the project. You can add users by entering their email address, define the access expiry date, and manage their assigned roles and permissions. **Access Path:** **Left Side Bar → Settings → Users and Access** --- ## Add User To provide access to another user, enter the user's **Email** address and specify the **Expiry Date** for their access. **Email** Enter the email address of the user who should be given access. **Example:** `user@example.com` **Expiry Date** Set the date until which the user will have access to the project. **Example:** `31-Dec-2026` --- ### Users The **Users** section displays the list of users who have been granted access to the project. **Show Entries:** 10 | 25 | 50 | 100 | # | Email | Name | Roles | Expiry | Status | Action | |---|---|---|---|---|---|---| | 1 | — | — | — | — | — | — | The user list contains the following information: - **Email** – Displays the email address of the user. - **Name** – Displays the user's name. - **Roles** – Shows the roles or permissions assigned to the user. - **Expiry** – Displays the access expiry date. - **Status** – Shows the current access status. - **Action** – Provides available actions for managing the user's access. > **Note:** The **Users and Access** section is used to provide and manage access for other users. Configure the appropriate role and expiry date according to the required level and duration of access. # Credentials # Overview The **Credentials** section is used to configure external service credentials for the VirtuBox application. It provides configuration options for SMTP, SMS gateways, and payment gateways. These settings allow administrators to configure the services required for email communication, SMS functionality, and payment processing. ## Navigation Path **Navigation Path:** VirtuBox → Settings → General → Credentials ### Credentials Page The Credentials page contains three main sections: 1. SMTP 2. SMS 3. Payment Gateways #### SMTP Configuration The **SMTP** section allows administrators to configure the email server settings used for sending emails from the application. ##### Available Fields | Field | Description | |---|---| | Host | Specifies the SMTP server hostname or address. | | Port | Specifies the port used to connect to the SMTP server. | | Username | Specifies the username used to authenticate with the SMTP server. | | Password | Specifies the password used for SMTP authentication. | | Encryption | Specifies the encryption method used for the SMTP connection. | | From | Specifies the sender email address. | | From Name | Specifies the sender name displayed to email recipients. | ##### Password Visibility The Username and Password fields include an eye icon that allows users to show or hide the entered value. ##### How to Configure SMTP 1. Navigate to **Settings → General → Credentials**. 2. Locate the **SMTP** section. 3. Enter the SMTP server address in the Host field. 4. Enter the required Port. 5. Enter the SMTP Username. 6. Enter the SMTP Password. 7. Configure the Encryption method. 8. Enter the sender email address in the From field. 9. Enter the sender name in the From Name field. 10. Click **Save** to save the configuration. #### SMS Configuration The **SMS** section allows administrators to select an SMS gateway for sending SMS messages through the application. ##### Available Fields | Field | Description | |---|---| | Select SMS Gateway | Allows users to select the required SMS gateway from the available options. | ##### How to Configure SMS 1. Navigate to **Settings → General → Credentials**. 2. Locate the **SMS** section. 3. Open the Select SMS Gateway dropdown. 4. Select the required SMS gateway. 5. Click **Save** to save the configuration. #### Payment Gateways Configuration The **Payment Gateways** section allows administrators to select a payment gateway for processing payments through the application. ##### Available Fields | Field | Description | |---|---| | Select Payment Gateway | Allows users to select the required payment gateway from the available options. | ##### How to Configure Payment Gateways 1. Navigate to **Settings → General → Credentials**. 2. Locate the **Payment Gateways** section. 3. Open the Select Payment Gateway dropdown. 4. Select the required payment gateway. 5. Click **Save** to save the configuration. #### Important Notes - Enter the correct SMTP server details before saving the configuration. - Ensure that the SMTP username and password are valid. - Select the appropriate encryption method supported by the SMTP server. - Select an SMS gateway that is available and supported by the application. - Select a payment gateway that is available and supported by the application. - Verify that the configurations are saved successfully. - Do not share SMTP passwords or other sensitive credentials with unauthorized users. #### Troubleshooting ##### Emails Are Not Being Sent - Verify the SMTP Host and Port. - Check the Username and Password. - Confirm that the Encryption method matches the SMTP server requirements. - Verify the sender email address. - Check the SMTP server connectivity and configuration. ##### SMS Messages Are Not Being Sent - Verify that the correct SMS gateway is selected. - Confirm that the selected gateway is configured and operational. - Check the gateway credentials and service availability, if applicable. ##### Payments Are Not Being Processed - Verify that the correct payment gateway is selected. - Confirm that the payment gateway is configured and operational. - Check the gateway credentials and integration settings, if applicable. #### Key Benefits - Centralizes external service configuration. - Supports SMTP email configuration. - Provides SMS gateway selection. - Provides payment gateway selection. - Helps administrators manage communication and payment integrations. #### Conclusion The **Credentials** section provides a centralized interface for configuring SMTP, SMS, and payment gateway settings in VirtuBox. Correct configuration helps ensure that the application's email, SMS, and payment integrations operate as expected. # 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. # Settings- VirtuWeb # Basic # Overview The **VirtuWeb Basic Settings** section provides configuration options for managing the basic behavior and appearance of the VirtuWeb website. It allows users to control the login popup, add custom website metadata and JavaScript, and configure cookie consent messages and button text. These settings help customize the website according to project requirements and provide greater control over the website's behavior and user experience. ## Access Path - Left Sidebar → Settings → VirtuWeb → Basic ### Hide Login Popup The Hide Login Popup option allows you to control the visibility of the login popup on the VirtuWeb website. Click Hide Login Popup to hide the login popup. Use this option when the login popup is not required on the website. Website Head Meta The Website Head Meta field allows you to add custom metadata or supported HTML content to the section of the website. **Example** Click **Save** to apply the changes. ### Website Body JS The Website Body JS field allows you to add custom JavaScript code to the website body. **Example** console.log("GOOD MORNING"); Click **Save** to apply the changes. Note: Ensure that the added content contains valid JavaScript code. ### Website Cookie Consent Message The Website Cookie Consent Message field allows you to configure the message displayed to users regarding cookie usage. Example This website uses cookies to improve your browsing experience and provide better services. Click Save to apply the changes. ### Website Cookie Consent Button Text The Website Cookie Consent Button Text field allows you to customize the text displayed on the cookie consent button. Example Accept Cookies Other examples: Accept Allow Cookies Click Save to apply the changes. #### Configuration Summary Setting Description Hide Login Popup Controls the visibility of the login popup. Website Head Meta Allows custom metadata or supported HTML content to be added to the website . Website Body JS Allows custom JavaScript code to be added to the website body. Website Cookie Consent Message Defines the cookie consent message displayed to users. Website Cookie Consent Button Text Customizes the cookie consent button text. Important: Click Save after making changes to each field to apply the updated configuration. Available next action: Create a downloadable DOCX file here in this chat containing the editable prose above # Website- Header # Overview The **Website Header** section allows you to configure the website header, navigation menu, and logo text displayed on the web application. **Access Path:** **Left Side Bar → Settings → Website Header** --- ## Menu The **Menu** section allows you to create and configure navigation items for the website header. ### Add New Item Click **Add New Item** to create a new menu item. **Type** Select the type of menu item from the available options: - **Addresses** – Opens the user's saved addresses. - **Bookmark** – Opens bookmarked content. - **Cart** – Opens the shopping cart. - **Google Translate** – Provides language translation options. - **Home** – Navigates to the home page. - **List** – Displays the configured list. - **Login** – Opens the login page. - **Logout** – Allows the user to log out. - **Order History** – Opens the user's order history. - **Page** – Links to a specific page. - **Profile** – Opens the user's profile. - **Search** – Opens the search functionality. **Title** Enter the text that should be displayed for the menu item. **Example:** `Home` **Icon** Select or configure an icon for the menu item. **Example:** `Home Icon` **Page** Select the page that should be associated with the menu item. **Example:** `Home Page` **Page Section (#)** Specify the section number of the selected page if the menu item should navigate to a particular section. **Example:** `1` **Target** Select how the menu item should open: - **Internal** – Opens the destination within the current website. - **External** – Opens an external URL or destination. **Button** Use the **Button** option to configure the menu item as a button in the website header. --- ### Settings The **Settings** section provides options for customizing the text displayed in the website header. **App Logo Text** Enter the text that should be displayed as the application logo or branding text. **Example:** `VirtuBox` **Web Logo Text** Enter the text that should be displayed as the website logo or branding text. **Example:** `My Website` > **Note:** Configure the menu items and logo text according to the website's navigation and branding requirements. # Website- Footer # Overview The **Website Footer** section allows you to add and configure footer content using different system layouts and Markdown. ## Access Path **Left Side Bar → VirtuWeb → Website Footer** ## Add Layout Click the **+** button to add a new footer layout. ### Available Layouts
LayoutDescription
**Addresses**Displays address information.
**Banners**Displays banner content.
**Banners2**Displays an alternative banner layout.
**Bookmarks**Displays bookmark content.
**Buttons**Displays button-based content.
**Cart**Displays cart information.
**Data Table**Displays data in table format.
**FAQ**Displays frequently asked questions.
**Form**Displays a form.
**Gallery**Displays gallery content.
**Links**Displays links.
**Login**Displays login content.
**Map**Displays map content.
**Map Page**Displays map page content.
**Map Point**Displays map point information.
**Map Track**Displays map track information.
**Markdown**Displays custom Markdown content.
**Order Details**Displays order details.
**Order History**Displays order history.
**Page Table**Displays page information in table format.
**Pages**Displays page content.
**Pricing**Displays pricing information.
**Profile**Displays profile information.
**Search**Displays search functionality.
**Services**Displays service information.
**SKUs**Displays SKU information.
**Table**Displays tabular content.
**Table2**Displays an alternative table layout.
**Tags**Displays tag information.
**Text**Displays text content.
**User Addresses**Displays user address information.
**Videos**Displays video content.
**Workflow**Displays workflow content.
## Markdown Layout The **Markdown** layout provides the following fields:
SettingDescription
**Title**Defines the title of the footer section.
**Bg Image**Allows a background image to be selected.
**Bg Video**Allows a background video to be selected.
**Text Engine**Defines the text rendering engine.
**ID**Defines the unique ID for the layout.
**HTML**Allows custom HTML content to be added.
**Header Title**Defines the header title.
**Header Description**Defines the header description.
**Markdown Code**Allows custom Markdown content to be added and formatted.
# Style # Assets # Overview The **VirtuWeb Assets** section is used to manage assets associated with the VirtuWeb website configuration. It provides an option to add a website favicon, which is displayed in the browser tab or other browser interface areas. ## Navigation Path **Navigation Path:** VirtuBox → Settings → VirtuWeb → Assets ### Website Favicon The **Website Favicon** section allows users to add a favicon for the website. #### Available Options | Option | Description | |---|---| | Website Favicon | Displays the section for managing the website favicon. | | Add | Allows users to add a favicon to the website configuration. | #### How to Add a Website Favicon Follow these steps to add a website favicon: 1. Open the VirtuBox backend. 2. Navigate to **VirtuWeb → Assets** from the left sidebar. 3. Locate the **Website Favicon** section. 4. Click the **Add** button. 5. Select or upload the required favicon using the interface provided. 6. Complete any additional required steps to save the favicon. ##### Left Sidebar Navigation The left sidebar contains multiple configuration sections. ##### Important Notes - Add the appropriate favicon to customize the website's browser icon. - Verify that the favicon has been saved successfully. - The available fields and upload options may vary depending on the backend configuration. ##### Conclusion The **VirtuWeb Assets** section provides an option to add a website favicon and access other website asset settings. Proper configuration helps maintain consistent website branding and presentation. # SEO # Overview The **VirtuWeb SEO** section provides configuration options for managing website SEO information and URL path redirects. It allows users to configure page metadata, Open Graph details, and redirects between existing and destination paths. ## Access Path **Left Sidebar → Settings → VirtuWeb → SEO** --- ## SEO Configuration ### Title The **Title** field is used to define the title of the website or page. **Example:** ``` VirtuBox - Digital Kiosk Solutions ``` ### Description The **Description** field allows you to define a description for the website or page. **Example:** ``` Explore VirtuBox digital kiosk solutions and interactive experiences for businesses. ``` ### Keywords The **Keywords** field allows you to add relevant keywords associated with the website or page. **Example:** ``` digital kiosk, interactive kiosk, VirtuBox, kiosk solutions ``` ### Open Graph: og:title The **Open Graph: og:title** field defines the title displayed when the website or page is shared on supported platforms. **Example:** ``` VirtuBox - Digital Kiosk Solutions ``` ### Open Graph: og:description The **Open Graph: og:description** field defines the description displayed when the website or page is shared on supported platforms. **Example:** ``` Discover interactive digital kiosk solutions with VirtuBox. ``` # Path Redirects The **Path Redirects** section allows you to configure redirects from an existing website path to another destination path. Click **Edit** to configure or update path redirects. --- ## Path Redirects CSV The **Path Redirects CSV** option allows multiple path redirects to be configured using CSV-formatted data. ### CSV Format Each line represents one path redirect. ``` current-path,redirect-path ``` ### Example ``` products,products-list about,company contact,contact-us ``` ### Path Redirects Rules The following rules must be followed while adding CSV data: 1. Data must be provided in **CSV format**. 2. Each new line is considered a separate path redirect. 3. The **Path** and **Redirect** values must be strings or numeric values. 4. The **Path** and **Redirect** must not start with `/`. 5. The **Path** must not be empty. 6. The **Path** and **Redirect** must be separated by a comma `,`. ### Valid Example ``` old-page,new-page products,products-list services,our-services ``` Click **Save** to apply the configured redirects. --- #### Configuration Summary | Settings | Descriptions | | -------- | -------- | | Title | Defines the website or page title.| | Descriptions|Defines the website or page description. | | Keywords| Defines relevant keywords for the website or page. | | Open Graph: og:title | Defines the title used when the page is shared on supported platforms. | | Open Graph: og:description | Defines the description used when the page is shared on supported platforms. | | Path Redirects |Configures redirects between website paths. | | Path Redirects CSV | Allows multiple path redirects to be added using CSV format. | # Sign Out # Overview The **Sign Out** feature allows users to securely log out of the VirtuBox backend. It ends the user's current session and helps prevent unauthorized access to the account. ## 2. Access Path Console VirtuBox Backend → VirtuWeb → Sign Out ### 3. How to Sign Out Follow these steps to sign out of the application: 1. Log in to the console VirtuBox backend. 2. Locate the **Sign Out** option in the interface. 3. Click **Sign Out**. 4. Wait for the application to end the current session. 5. Verify that you are redirected to the login page or another appropriate page. #### 4. Conclusion The **Sign Out** feature helps protect user accounts by ending the active session and preventing unauthorized access after the user leaves the application.