How to Tell if a User is Using Your Website or Your App

Posted on 21. March 2024 by Jan Bunk

A humanoid robot inspecting an app and a browser to find differences, digital art

There are many cases where it can be useful to differentiate between a person who is viewing your website in the browser and a person who is viewing it through your app. Maybe you want to view analytics for how well your app is being adopted by users or you want to show different content to app users.

Just like there are multiple use cases, there are also multiple ways to achieve this goal. Let's go through them one by one.

Based on the User Agent

Filtering by user agent only works if you have configured the app to adjust the user agent it uses. You can enable this option in your app's navigation settings. Open Navigation Settings
If you don't want to enable that option, check out the other filtering methods presented in this article.

The user agent is a short string that the browser sends to websites whenever it is loading a page. The user agent contains information about the browser, for example a Firefox browser could send something like this user agent:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

From that, your website can detect that the user is using version 47.0 of the Mozilla Firefox browser. Just like browsers, your app also sends a user agent that identifies it.

User Agents Used by the App

The app uses a few different user agents:

  • $regularUserAgent App-WebView ($operatingSystem) $version
    This is the typical user agent used by the app's internal browser (which displays your website inside the app). Requests made with this user agent are initiated by the app user by navigating between pages.
  • App-HttpClient $version
    This is the user agent used for requests made by the app that are not directly initiated by the user. For example the app makes some requests with this to store parts of the website for offline use. The offline mode is disabled by default nowadays, so you probably won't see many requests with this user agent.

$version is the internal version of the app (e.g. 1.4.8+52) and $operatingSystem is the platform the app is being used on (e.g. ios or android).

$regularUserAgent is the user agent of a mobile browser that would be expected from the device, like Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

So an example user-agent that the app could use on iOS would be: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 App-WebView (ios) 1.4.8+52

Filtering for the App's User Agent

Based on the above user agent format, you can detect that your website is being loaded by the app by checking whether the user agent contains "App-WebView". If you want to check for the operating system too, you can additionally check whether the user agent also contains "(android)" or "(ios)".

Example: Showing Different Content on a WordPress Website

If you're using WordPress, you can use the "UserAgent Content Switcher" plugin. The name of the plugin is quite descriptive: it allows you to show different content to users based on their user agent. Here's how you can set it up (and an example use case):

  1. Install the plugin on your website. Please note that we are not affiliated with the plugin or it's developer, we just tested it and it seemed to be free and worked fine.
  2. On the plugin's settings page, add a new type with these settings:
    • Type name: App
    • Short-code Attribute: app
    • User Agent: App-WebView A screenshot of the filled out form with the above information.
  3. Edit one of your pages and switch to the code editor.
  4. Now you can create sections that are only visible in the app like this:
    This text is visible to everyone.
    [agentsw ua='app']
    This text is only visible to app users!
    A screenshot of the above text in the WordPress code editor.

Using JavaScript

Based on the User Agent

Of course you can not only check the user agent on the server side (as detailed in the previous section), but also in JavaScript.

Filtering by user agent only works if you have configured the app to adjust the user agent it uses. You can enable this option in your app's navigation settings. Open Navigation Settings

Here's an example of how you can use JavaScript to detect whether the user is using the app or a browser:

const isApp = navigator.userAgent.includes("App-WebView");
if (isApp) {
    console.log("The user is using the app.");
} else {
    console.log("The user is using a browser.");
Alternatively, you can use getAppPlatform from the app helper script, which works very similarly.

By Checking for HTML Modifications

The app makes tiny invisible changes to the website HTML which are necessary for some features of the app. We can also use these changes to detect whether the page was loaded by the app.

Since this is a bit tricky, we recommend that you use executeWhenAppReady from the app helper script. Then you can put any code inside the executeWhenAppReady function, and it will only be executed if the page was loaded by the app. A slight downside of this method is that it takes a few milliseconds before the code gets executed, even if the page was loaded by the app.

By Injecting Code into the App

On your website customization page you have the option to add any JavaScript or CSS that the app should inject into every page that is loaded. The possibilities are endless with this, but as an example, let's make this text green in the app:

<p id="red-text" style="color: red;">This text is red in the browser.</p>

Now we could configure this JavaScript to inject:

document.getElementById("red-text").style.color = "green";

Or alternatively, this CSS to inject:

#red-text {
    color: green !important;
A screenshot of the filled out website customization.

So as you can see, this also works as a way of having different behaviour on the website than the app.

Related Articles

A humanoid robot using a magnifying glass to look at a smartphone. The smartphone displays the letters PWA on it, digital art

Progressive Web Apps vs. Native Apps

Do you want to take your website to the next level? Here's how progressive web apps stack up against standard native apps and turning your website into an app.

A humanoid robot converting a website into an app in a spaceship, digital art

Convert your Website into an App

Convert your Website to an App to take advantage of push notifications, improved brand awareness and more. No code.

The Android and Apple logo in a boxing arena, digital art

Differences between Android and iOS Apps

In this article we discuss the benefits Android apps have over iOS apps and in which case an iOS app for your website is the better option.

Author Jan Bunk
Written by
Jan Bunk

Hi, I'm Jan! I created in 2019 while studying computer science in university. A lot has changed since then - not only have I graduated, but it's also no longer just me running We've grown to a global, fully remote team and have gathered lots of experience around app development and app publishing. We've created and published hundreds of apps in the app stores, where they've been downloaded hundreds of thousands of times.