> For the complete documentation index, see [llms.txt](https://docs.buildnatively.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.buildnatively.com/guides/integration/browser-info.md).
# Browser Info
## What is Browser Info?
Browser Info gives your app access to two types of information: the environment it's running in, and the device's current network status. You can use it to detect whether the user is inside a Natively iOS app, a Natively Android app, or a regular web browser - and conditionally show or hide features based on that. You can also listen for connectivity changes to handle offline states gracefully.
## Prerequisites
{% hint style="success" %}
This feature is available in all plans. [See all plans](/getting-started/subscription-plans.md)
{% endhint %}
## Implementation
Choose your integration method below: **Bubble.io Plugin** (No-Code), **JavaScript SDK** (Code), or **AI Agents** (for AI-powered editors like Lovable, Base44, and Replit).
### Initialization
{% tabs %}
{% tab title="Bubble.io Plugin" %}
**Check Plugin**
Before starting, verify if the Natively plugin is already installed in your Bubble project.
1. Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
2. **Check Installed Plugins:** Look through your list of installed plugins for "Natively iOS & Android app builder".
* If it IS installed: Check the version number. If an update is available (e.g., you see a button saying "Update"), click it to ensure you have the latest features and bug fixes.
* If it is NOT installed: Click the + Add plugins button, search for "Natively", and click Install.
{% endtab %}
{% tab title="JavaScript SDK" %}
**Check SDK**
Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.
1. Open your project's main HTML file (or header settings) and look for the Natively script tag inside the `` section.
2. Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., `@2.26.0`).
```javascript
```
{% hint style="info" %}
To ensure you are using the most up-to-date version, check the [Natively GitHub releases page](https://github.com/buildnatively/js-sdk/releases) for the latest version number.
{% endhint %}
{% endtab %}
{% tab title="AI Agents" %}
**Initialize the SDK**
AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features. Before implementing any feature, the Natively SDK must be initialized in your project.
Copy the line below and paste it into your AI agent to check and set up the Natively SDK in your project.
```
Check if the following Natively SDK script is present in the of index.html. If missing or outdated, add it: For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases
```
{% endtab %}
{% endtabs %}
### Setup Logic
{% tabs %}
{% tab title="Bubble.io Plugin" %}
### \[Element] Natively - Browser
#### Events:
* **Device went offline** - fires when the device loses internet connectivity.
* **Device back online** - fires when the device regains internet connectivity.
#### States:
* **isAndroidApp** - Yes / No.
* **isIOSApp** - Yes / No.
* **isNativeApp** - Yes / No.
* **Connectivity** - Yes / No (Device is online or offline).
{% endtab %}
{% tab title="JavaScript SDK" %}
```javascript
// ============================================================================
// NATIVELY BROWSER INFO - DOCUMENTATION & EXAMPLES
// ============================================================================
// Initialize
const info = new NativelyInfo();
// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// info.browserInfo()
// - Returns information about the current app environment.
// - Returns an object synchronously — no callback required.
//
// Response fields:
// browserInfo.isAndroidApp - Boolean. true if running as a Natively Android app.
// browserInfo.isIOSApp - Boolean. true if running as a Natively iOS app.
// browserInfo.isNativeApp - Boolean. true if running as either a Natively iOS or Android app.
// ============================================================================
// CONNECTIVITY EVENTS
// ============================================================================
// window.ononline - Fires when the device regains internet connectivity.
// window.onoffline - Fires when the device loses internet connectivity.
// --- Browser Info. Environment Detection Example. Start ---
const browserInfo = info.browserInfo();
console.log("Is Android app:", browserInfo.isAndroidApp);
console.log("Is iOS app:", browserInfo.isIOSApp);
console.log("Is native app:", browserInfo.isNativeApp);
// --- Browser Info. Environment Detection Example. End ---
// --- Browser Info. Connectivity Example. Start ---
window.ononline = function() {
console.log("Device is online");
};
window.onoffline = function() {
console.log("Device is offline");
};
// --- Browser Info. Connectivity Example. End ---
```
{% endtab %}
{% tab title="AI Agents" %}
AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.
Copy the line below and paste it into your AI agent.
[Your feature description] using the Natively Browser Info SDK: const info = new NativelyInfo(); const browserInfo = info.browserInfo(); // browserInfo.isAndroidApp — true if running as a Natively Android app. // browserInfo.isIOSApp — true if running as a Natively iOS app. // browserInfo.isNativeApp — true if running as either iOS or Android Natively app. // Connectivity: window.ononline = function() { /* device is online */ }; window.onoffline = function() { /* device is offline */ }; For reference: https://docs.buildnatively.com/guides/integration/browser-info
{% hint style="warning" %}
Replace the placeholder at the beginning with a description of what you want to build - for example: "Show the Sign in with Apple button only when the app is running on iOS, and hide it on Android and web browsers".
{% endhint %}
{% endtab %}
{% endtabs %}
### How to use
#### Conditional feature visibility
The most common use case is showing or hiding features based on the platform. Use `browserInfo.isIOSApp` and `browserInfo.isAndroidApp` to conditionally render platform-specific elements - for example, showing the Sign in with Apple button only on iOS, or displaying an Android-specific payment method only on Android.
#### Detecting the web context
If `browserInfo.isNativeApp` is `false`, the user is accessing your app from a regular web browser, not a Natively app. You can use this to show a prompt encouraging them to download the mobile app, or to disable features that only work in a native context.
#### Handling offline states
Use `window.ononline` and `window.onoffline` to respond to connectivity changes in real time. Common use cases include showing an offline banner, disabling form submissions when offline, or queuing actions to retry once the connection is restored.
#### Call browserInfo early
Since `info.browserInfo()` returns synchronously without a callback, call it as early as possible in your app's initialization - ideally right after the Natively SDK loads in `nativelyOnLoad()`. This ensures platform detection is available before any conditional rendering happens.
## Troubleshooting
browserInfo values are all false in a web browser
This is expected behavior - `isIOSApp`, `isAndroidApp`, and `isNativeApp` are all `false` when the app is accessed from a regular web browser. Design your logic to handle this case gracefully.
window.ononline / window.onoffline not firing
These are standard browser events and should work in the Natively app. If they are not firing, verify that the SDK is fully loaded before attaching the event listeners - attach them inside `nativelyOnLoad()` to ensure the environment is ready.
Platform detection runs before the SDK loads
If you call `info.browserInfo()` before the Natively SDK has finished loading, the values may be incorrect. Always call it inside `nativelyOnLoad()` or after confirming the SDK is initialized.
[^1]: Replace this placeholder
