Web-to-app bottom bar

How to add a bottom bar to my Web-to-app?

The bottom bar in your Web to App is a crucial navigation element that enhances usability and accessibility for your app users. Follow this guide to configure or manage your bottom bar:

Step 1: Enable the Bottom Bar

• Log in to your AppMySite dashboard.

• Navigate to the Bottom Bar section.

• Toggle Enable Bottom Bar to activate the bottom bar functionality.

To ensure your app functions and does not show a blank screen, it is mandatory that you keep the bottom bar enabled.

Step 2: Add Items to the Bottom Bar

Click on Add Item to customize your bottom bar. You can include the following options:

• Menu: Adds a hamburger menu to your bottom bar. This menu allows app users to quickly navigate through your app’s features.

• Settings: Opens the Settings screen of your app.

• Web View: Opens a web view interface within your app. Customize this option by:

  • Entering the website URL of the page you want to display.

  • Enabling or disabling the app header, website header, or website footer.

  • Hiding specific webpage elements by entering their HTML class or HTML ID in the Web View settings.

Step 3: Add Icons to the Bottom Bar

• Assign icons to each item in your bottom bar.

  • You can upload custom icons for a personalized look.

  • Alternatively, select icons from the available icon library.

• Adjust the icons to match your app's design and functionality requirements.

Step 4: Adjust and Customize the Bottom Bar

• Default Button: Ensure that at least one default button remains active in the bottom bar for the app to remain functional.

• Hide or Delete Buttons: To minimize the bottom bar’s visibility while maintaining app functionality:

  • Use the Hide button to make the bottom bar less intrusive.

  • Delete all buttons in the bottom bar except the default one.

Step 5: Preview in Simulator

• Use the Simulator on the Bottom Bar screen to preview how the bottom bar will look and function in your app.

• Adjust the settings as needed based on the preview.

Step 6: Save Your Changes

1. Once satisfied with your bottom bar configuration, click Save to finalize your settings.