Builder Editor Styling: Customizing Buttons, Text, and More by Targeting User-Agents(WebView)

When utilizing a WebView, it’s common to tailor the rendering of web content based on the user agent, a string sent by the browser to identify itself to the server. Here’s how you can target specific user agents in a WebView:

webView.getSettings().setUserAgentString("Your Custom User Agent String");

For instance, suppose your iOS app’s user agent string contains “AloIOS/v1.” In such a case, you can direct these requests within the Builder editor using JavaScript. Here’s an example code snippet that you can incorporate under the Data Tab → Edit Content JS + CSS:

  if (navigator.userAgent.includes("AloIOS/v1")) {
    // Apply specific logic or styles for your iOS app
    state.bgColor = "bg-black";
  } else {
    // Apply specific logic for other user-agents
    state.bgColor = "bg-green";

And don’t forget to define these CSS classes:

    background-color: #000 !important;

    background-color:green !important;

You can find a live demonstration of this setup in the Builder editor via the following fiddle link:

For a more detailed walkthrough, feel free to check out the accompanying screenshots or video: