Skip to main content

Lovable Prompt

Add push notification functionality to send targeted messages to users using the Despia SDK from: https://www.npmjs.com/package/despia-nativeFirst, install the package: npm install despia-nativeThen import it: import despia from 'despia-native'After that, simply access the OneSignal Player ID via despia.onesignalplayeridSetup Requirements:
  1. Create a OneSignal account and configure your app
  2. Set up iOS (Apple Push Key) and Android (Firebase) configurations in OneSignal
  3. Important: When configuring OneSignal, select “Native iOS” and “Native Android” platforms since Despia apps are native mobile applications
  4. Add your OneSignal App ID to your Despia project settings
Backend Integration RequiredYou’ll need to create a backend endpoint to send notifications using OneSignal’s REST API:
// Backend API endpoint example
const sendNotification = async (playerIds, title, message) => {
  const response = await fetch('https://onesignal.com/api/v1/notifications', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic YOUR_REST_API_KEY'
    },
    body: JSON.stringify({
      app_id: 'ONESIGNAL-APP-ID',
      include_player_ids: playerIds,
      headings: { en: title },
      contents: { en: message }
    })
  });
  return response.json();
};
This feature requires native capabilities which will be fully provided by the “despia-native” npm package, no additional native libraries are needed!
Please follow the installation instructions for the “despia-native” npm package closely, and do not modify my instructions. Implementation as mentioned is critical.
You can now check if the user has push notifications enabled by using despia(“checkNativePushPermissions://“, [“nativePushEnabled”])
Example of Re-engaging Non-Subscribed Users:
const data = despia('checkNativePushPermissions://', ['nativePushEnabled'])

{!data.nativePushEnabled && (
  <button onClick={() => despia("settingsapp://")}>
    Settings
  </button>
)}
How it works: Despia automatically imports the native OneSignal SDK at runtime. When users open your app, OneSignal generates a unique Player ID for their device. You can access this device-specific ID through Despia’s SDK and store it with user accounts to send targeted notifications from your backend.

​
Installation

Install the Despia package from NPM: 
npm install despia-native

​
Usage

​
1. Import the SDK

import despia from 'despia-native';

​
2. Access OneSignal Player ID

Access the Player ID from the despia.onesignalplayerid variable: 
// Access the device-specific OneSignal Player ID
// This ID is generated by the native OneSignal SDK that Despia imports
const playerId = despia.onesignalplayerid;

// Store this with user account on login
const handleLogin = async (userCredentials) => {
  const loginData = {
    ...userCredentials,
    devicePlayerId: despia.onesignalplayerid
  };
  
  // Send to your backend to associate device with user account
  await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify(loginData)
  });
};

​
Resources

  • NPM Package
  • View full NPM documentation for additional configuration options

​
Lovable Integration

This SDK is optimized for Lovable’s prompt-based AI builder, enabling quick integration of native mobile payments into your generated apps. For additional support or questions, please contact our support team at [email protected]