How to: Show and Use Your App's Settings Screen

All apps created with webtoapp.design contain a native settings screen which gives users access to many important features. Let's take a look at how to open the settings page and use it's features!

Opening the App Settings

The most common way of opening the app settings is through the user interface. The look of the interface varies depending on the app layout you choose. So let's start with the most popular layout, the drawer menu layout:

As you can see, we have the button to open the settings menu at the bottom of the side menu. It's both out of the way (because it's below the more commonly used menu items above it) but still easy for users to find. Can't see it in your app? Make sure the settings menu item is enabled in your drawer layout menu screen settings.

The settings button is more prominent in the navigation bar layout, sitting right in the bottom navigation bar:

Similar to the drawer layout, the settings navigation bar item can be disabled in your webtoapp.design dashboard. This can be especially useful with the navigation bar layout, because the space in the bottom navigation bar is quite limited. You shouldn't have more than five buttons in your navigation bar and having the settings button take up one of these slots can be problematic.

If you decide to disable the settings button for your app layout (or you use the "Just Website" app layout, which can't have a settings button), we strongly recommend that you add an alternative way of opening the settings, because the settings screen contains many important features (as we will discuss in the following section).

Let's take a look at what other ways of opening the settings page there are.

Opening the Settings Screen with a Link

The easiest option is to add a "Open Settings" button/link to your website that leads to https://webtoapp.design/apps/show_settings

When this link is opened in the app, it will open the settings page. So place the link wherever you want to give the user the option to open the app settings, for example in your website's footer.

Opening the Settings Screen with JavaScript

Instead of the link, you can also call the showSettingsPage JavaScript function, which achieves the same goal.

No matter which option of opening the settings you use, you will be presented with this screen:

Features

In the screenshot above we can already see most of the features the settings screen contains. Let's go over them one by one from top to bottom:

• Users can manage everything related to push notifications:
  • Enable/disable notifications completely.
  • Grant the push notification permission if they have not done so yet. If the user has previously rejected the push notification permission, the system settings will be opened where they can enable the notifications.
  • If your website uses notification topics, users can unsubscribe from specific topics on the settings page.
• Turn crash reporting on or off. You can set the default for this in your webtoapp.design dashboard.
• Keep the device screen on while the app is open (even if the user is not interacting with it). You can change the default for this setting in your dashboard too.
• The "About the App" dialog grants access to two features:
  • You (as the app creator) can open the developer console for investigating app issues.
  • Users can view the licenses of third party packages used by the app. This is a legal requirement.
• Users can request that their data is deleted. Read our guide to find out more about how and why to use the account deletion feature.

Conclusion

The native settings screen in your app is a powerful tool for both users and you as the app creator. By understanding and utilizing these features, you can both enhance the user experience and also save time (because you don't have to build the features of the settings screen on your website).