Dynamic UI API

Change native UI elements like the status bar color dynamically from your web app on Android.

WebViewGold allows you to dynamically customise the UI elements in your web app. These elements may consist of the status bar, bottom bar (iOS), navigation bar (Android) and pull to refresh (iOS). WebViewGold includes the following commands to dynamically customise these elements:

statusbarcolor://
- The MASTER COMMAND to change the color of the status bar and any other relevant UI features automatically, such as the status bar text color, the bottom bar color (iOS), navigation bar color (Android), etc.
statusbartextcolor://
- Allows you to manually change the text color of the status bar (iOS and Android).
bottombarcolor://
- If a bottom bar (iOS) or navigation bar (Android) UI element exists, allows you to manually change its color.
navbartextcolor://
- Allows you to manually change the text color of the navigation bar on Android. Request will be ignored on iOS (the bottom bar on iOS does not have text).
hidebars://
- Allows you to hide the background of the status and navigation bar.

Changing the color of the Status Bar (and other UI elements automatically):

This feature supports a color input in the following format:

RGB = {red, green, blue}

Where the values are integers between 0 (min) and 255 (max).

Use JavaScript to this kind of URL to change the color of the status bar:

<script>
// Example: red
window.location.href = "statusbarcolor://255,0,0";
</script>

When you change the status bar color, the status bar text will automatically change to a suitable color (white or black) depending on how dark the color is.
Optional UI features like Pull To Refresh (iOS), the Bottom Bar (iOS) and the Navigation Bar (Android) will also have their colors automatically adjusted.

Changing the color of the Status Bar text:

If you would like to manually choose the color of the status bar text, you can do so using this option.
This feature supports a text input for the following options:

"white"
"black"

Use JavaScript to this kind of URL to change the color of the status bar text:

<script>
// Example: white text
window.location.href = "statusbartextcolor://white";
// Example: black text
window.location.href = "statusbartextcolor://black";
</script>

Changing the color of the Navigation Bar:

This feature supports a color input in the following format:

RGB = {red, green, blue}

Where the values are integers between 0 (min) and 255 (max).

Use JavaScript to this kind of URL to change the color of the status bar:

<script>
// Example: red
window.location.href = "bottombarcolor://255,0,0";
</script>

Changing the color of the Navigation Bar text:

If you would like to manually choose the color of the navigation bar text, you can do so using this option. Please note that this request will be ignored on iOS.
This feature supports a text input for the following options:

"white"
"black"

Use JavaScript to this kind of URL to change the color of the status bar text:

<script>
// Example: white text
window.location.href = "navbartextcolor://white";
// Example: black text
window.location.href = "navbartextcolor://black";
</script>

Hiding the status and bottom bars

The hidebars functionality can either be on or off.
Note, the status bar text, such as the time and battery percentage do not remain visibile to the user. However, these can be brought back to view with a user swipe from the top.
Use JavaScript to change the visibility status of the status and navigation bar:

<script>
// Example: hide the bars from view
window.location.href = "hidebars://on";
// Example: redisplay the bars after being hidden
window.location.href = "hidebars://off";
</script>

SDK-style implementation notes

Treat this feature as a native capability exposed to your web layer: keep your production website or PWA as the source of truth, then use the documented WebViewGold configuration flags, URL commands, and JavaScript bridge calls to opt in to native Android behavior only where it adds value. This approach keeps your codebase maintainable because the same web application can serve browsers, WebViewGold for Android, and the other WebViewGold platforms with minimal conditional logic.

For reliable results, prefer HTTPS endpoints, stable route names, explicit success/error states in your UI, and small JavaScript helper functions that wrap native calls. For example, a web app built with jQuery Mobile, Lovable, Base44, Bolt, WordPress, Bubble, a custom React/Vue/Angular stack, or static HTML can expose a single button or event handler that triggers the native WebViewGold API while still showing a graceful browser fallback.

Recommended integration pattern: detect the app context, call the WebViewGold API, then update your web UI after the native callback or route change.
Testing checklist: validate the feature on a real device or packaged build, verify permissions and store review text, and confirm that browser-only users still receive a useful fallback.
SEO benefit: keep feature pages, route titles, and structured content indexable on your website while WebViewGold delivers the native app shell for Android users.