1. Install the plugin
Go to your app → Plugins tab → find OS Detector → click Install.
2. Add the element to your page
Open any page in the Bubble editor. In the element picker, find OS Detector under Plugins and drag it onto your page. The element renders as a small OS badge — you can resize it, style it, or set its opacity to 0 if you only need the state value and not the visual.
3. Use the OS Name state
Click on any text element, conditional, or workflow and insert a dynamic value. Select OS Detector A → OS Name. It will return one of:
- `Windows`
- `macOS`
- `Linux`
- `Android`
- `iOS`
- `Unknown`
4. Example use cases
- Show a different download button depending on whether the user is on Windows, macOS, or Linux
- Display a mobile-specific banner for Android and iOS users
- Log the user's OS to your database on page load
- Branch workflow logic based on the detected platform
Note: Detection happens entirely in the browser using the native `navigator.userAgent` and `navigator.platform` APIs. No external requests are made and no data leaves the user's device.
Demo Editor:
https://bubble.io/page?id=hks-demos&tab=Design&name=os_detector_plugin_page&type=pageDemo page:
https://hks-demos.bubbleapps.io/version-test/os_detector_plugin_page
Built on Bubble
