Join our community 🔥

🏅How to get started?

  1. Bubble.io Plugin

  2. JavaScript SDK

  3. React/NextJS

  4. Debugging

🧋 Bubble.io Plugin

We're not recommending calling any Natively 'Get Value' API in such events as "Page Is Loaded", "User is logged in" or any similar. Sometimes they can be called before Natively was injected into your website, and cause a value empty state.

If you're planning to use bubble, check out our example setup app editor: https://bubble.io/page?name=index&id=nativelyqa&tab=tabs-1

Username: 1 Password: 1

First of all, you need to add a plugin to your bubble app. To do this, go to the Plugins tab and search for Natively:

Click Install:

If you are planning to use a Push Notifications feature in your app fill out onesignal_appId & onesignal_apiKey fields:

You can find these values on your OneSignal app page:

mode (headers) - Optional

Possible values:

  • "debug" - show errors in the console or display error alerts (For debugging purposes)

  • "preview" - To test the app in a Preview mode (For now, only Push Notifications feature requires this)

"preview" should be enabled only if you're testing the app in a Preview Mode; otherwise, Push Notifications will not work inside your app.

Open Debug Console

To open Debug Console, use -> Natively - Open Debug Console action in the plugin

🛠 JavaScript SDK

Put the following code in your website header (between <head></head> tags)

<head>
<script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/[email protected]/natively-frontend.min.js"></script>
</head>

You can specify an SDK version by replacing version number 2.15.3

The latest version number can be found in this repo.

To turn on Debug mode, please insert the following code after SDK import:

<head>
<script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/[email protected]/natively-frontend.min.js"></script>
<script>
function nativelyOnLoad() {
    window.natively.setDebug(true); // To see errors
}
</script>
</head>

Debug mode which enables native alerts with errors. It's can be very useful while you developing a website.

🛠 React/NextJS (min version 2.15.3)

Installation: 

npm i natively@">=2.15.3"

Usage:

'use client'; // <--- THIS IS IMPORTANT, Natively can't be used on server side
import { NativelyInfo, useNatively } from 'natively';

export default function Home() {
  const natively = useNatively(); // <--- useNatively is just a wrapper on window.natively
  const info = new NativelyInfo();
  const browserInfo = info.browserInfo();
  const openConsole = () => {
    natively.openConsole();
  };
  console.log(browserInfo);
  return (
    <div>
      Check the console for browser info. isNativeApp: {browserInfo.isNativeApp ? "true" : "false"}
      <button onClick={openConsole}>Open Console</button>
    </div>
  );
};

Important for NextJS users make sure to add 'use client' to the component where you're using Natively SDK.

"useNatively" is referring to "window.natively" everywhere in this documentation.

Example project: https://github.com/romanfurman6/nextjs-boilerplate

Debugging (Inspect console inside of mobile app)

// Make sure you have JS SDK >=v2.7.2
window.natively.openConsole();

// NextJS/React
import { useNatively } from 'natively';
const natively = useNatively();
natively.openConsole();

PreviousIntegration (Native Features)NextDevice

Last updated

Was this helpful?