> ## Documentation Index
> Fetch the complete documentation index at: https://setup.despia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# OneSignal V1

> Send targeted remote push notifications via OneSignal to users even when your app is closed

<iframe src="https://www.youtube.com/embed/DrgY518k7oA" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

<Card title="Lovable Prompt" icon="sparkles">
  Add push notification functionality to send targeted messages to users using the Despia SDK from: [**https://www.npmjs.com/package/despia-native**](https://www.npmjs.com/package/despia-native)

  First, install the package: `npm install despia-native`

  Then import it: `import despia from 'despia-native'`

  After that, simply access the OneSignal Player ID via `despia.onesignalplayerid`

  **Setup 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 Required**

  You'll need to create a backend endpoint to send notifications using OneSignal's REST API:

  ```javascript theme={null}
  // 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();
  };
  ```

  <Danger>
    **This feature requires native capabilities which will be fully provided by the “despia-native” npm package, no additional native libraries are needed!**
  </Danger>

  Please follow the installation instructions for the "despia-native" npm package closely, and do not modify my instructions. Implementation as mentioned is critical.

  <Note>
    You can now check if the user has push notifications enabled by using **despia(“checkNativePushPermissions\://“, \[“nativePushEnabled”])**
  </Note>

  **Example of Re-engaging Non-Subscribed Users:**

  ```javascript theme={null}
  const data = despia('checkNativePushPermissions://', ['nativePushEnabled'])

  {!data.nativePushEnabled && (
    <button onClick={() => despia("settingsapp://")}>
      Settings
    </button>
  )}
  ```
</Card>

**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**

```javascript theme={null}
import despia from 'despia-native';
```

### **2. Access OneSignal Player ID**

Access the Player ID from the `despia.onesignalplayerid` variable:

```javascript theme={null}
// 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](https://www.npmjs.com/package/despia-native)
* 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 [**support@despia.com**](mailto:support@despia.com)