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: Customise icons buttons

  • 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.

  • Duplicate: Quickly copy an existing item by clicking the duplicate icon.

  • Delete: Remove an item from the bottom bar by clicking the delete icon.

  • Re-arrange: Drag and drop items to change their order on the bottom bar.

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

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

Last updated

Was this helpful?