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

Technical Questions
, , ,
1

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:

.bg-black{
    background-color: #000 !important;
}

.bg-green{
    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: