How to build a device compatibility checker in Bubble

A practical way to build a device‑compatibility checker in Bubble is to combine Bubble’s built‑in Browser plugin (for getting device info on the client) with simple conditional logic and optionally a small API call to a device database if you need deeper detection. Most compatibility checks don’t need APIs — you can read the user’s device type, OS, screen size, and features directly in Bubble and show a pass/fail message or store the results in the database.

Core Idea

You use the Browser plugin to detect the user’s device details on page load, then compare those details with your own “rules” (for example: screen width ≥ 360px, OS is iOS/Android, browser supports cookies). Then you show a message like “Your device is compatible” or “Not compatible” by using Bubble conditionals or a custom event.

Step-by-step Implementation

• Add the Bubble plugin Browser (Bubble-built). It exposes fields like: Screen width, Screen height, Operating system, Browser name, Is mobile.
• On your page, insert the Browser element. It does not need to be visible.
• Create a Custom state on the page, for example: compatibility (type: text).
• Use a Page is loaded workflow. Add an action “Set state”. Logic example: if Browser’s screen width > 360 AND Browser’s operating system is not empty, set compatibility = “pass”, otherwise “fail”.
• Show the result with conditionals. Example: a text element that is visible only when compatibility = “pass”.

Optional: Deeper Device Lookup via API

If you want more details (e.g., device model), use the API Connector with a public device‑lookup API. Pass Browser’s user agent string as a parameter.

{
  "user_agent": "<Browser A's user agent>"
}

Then evaluate the API’s response inside your workflow and update your compatibility state accordingly.

Storing Results

• Create a data type “Compatibility Check” with fields like device\_os, width, height, result.
• On page load, after evaluating compatibility, run “Create a new Compatibility Check” to save what you found.