How to get started?
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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:
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)
Open Debug Console
To open Debug Console, use -> Natively - Open Debug Console action in the plugin
Put the following code in your website header (between <head></head> tags)
<head>
<script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.15.3/natively-frontend.min.js"></script>
</head>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/natively@2.15.3/natively-frontend.min.js"></script>
<script>
function nativelyOnLoad() {
window.natively.setDebug(true); // To see errors
}
</script>
</head>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
// Make sure you have JS SDK >=v2.7.2
window.natively.openConsole();
// NextJS/React
import { useNatively } from 'natively';
const natively = useNatively();
natively.openConsole();
