Dynamic UI API

Change native UI elements like the status bar or bottom bar colors dynamically from your web app.

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.
hidebars://
- Allows you to hide the background of the status bar, whos text remains on a transparent background.

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 Bottom 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>

Hiding the status bar

The hidebars functionality can either be on or off.
Note, the status bar text, such as the time and battery percentage remain visible to the user, but the background surrounding the text becomes transparent and the WebView expands to fill the room left.
Use JavaScript to change the visibility status of the 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 iOS behavior only where it adds value. This approach keeps your codebase maintainable because the same web application can serve browsers, WebViewGold for iOS, 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 iOS users.