Remote Push Notifications

Native GDPR-compliant remote push notifications via OneSignal with deep linking and cross-platform support.

Overview

This guide demonstrates how to implement native push notifications in your Webflow + Wized web application using Despia. Unlike web push notifications that have limitations and require workarounds, native push notifications provide full capabilities including deep linking, badge counts, custom sounds, and more.

Prerequisites

  • A Webflow website integrated with Wized

  • Despia account with your app configured

  • OneSignal account (free tier is sufficient)

  • Apple Developer account (for iOS)

  • Google Play Console account (for Android)

  • Firebase project (for Android)

Setting Up OneSignal

1

Create OneSignal Account

  1. Sign up for a free OneSignal account at onesignal.com

  2. The free tier includes unlimited push notifications with GDPR compliance

  3. Paid features include email marketing and SMS (not required for push notifications)

2

Create New App in OneSignal

  1. In the OneSignal dashboard, click "New App"

  2. Enter your app name and organization

  3. Select iOS platform first (we'll add Android later)

iOS Configuration

1

Generate P8 Key

Important: Use Apple Developer portal, NOT App Store Connect.

  1. Go to developer.apple.com

  2. Navigate to Certificates, IDs & Profiles → Keys

  3. Click the + button to create a new key

  4. Name your key (e.g., "OneSignal MyApp")

  5. Enable Apple Push Notification service (APNs)

  6. Configure the environment:

    • Select both Sandbox and Production

  7. Click Continue → Register

  8. Download the key immediately (you can only download it once!)

  9. Save the .p8 file securely

2

Configure OneSignal for iOS

  1. Upload the .p8 file to OneSignal

  2. Enter the Key ID (found in Apple Developer portal next to your key)

  3. Enter the Team ID (shown next to your company/personal name in Apple Developer)

  4. Enter the Bundle ID:

    • Find this in Despia dashboard under Publish App

    • Copy your bundle ID

    Note: To use a custom bundle ID without Despia branding, contact support.

  5. Click Save & Continue

  6. Select Native iOS (Despia creates true native apps!)

  7. Save & Continue

3

Add iOS App ID to Despia

  1. Copy the OneSignal App ID

  2. In your Despia project editor, scroll to OneSignal Integration

  3. Paste the App ID in iOS Application ID field

  4. Save and publish your project

Android Configuration

1

Create Firebase Project

  1. Go to Firebase Console

  2. Important: Log in with the same Google account linked to your Google Play Console

  3. Create a new project with your app name

  4. Wait for project setup to complete

Enable Firebase Cloud Messaging

  1. In Firebase project settings, go to Cloud Messaging

  2. Ensure Firebase Cloud Messaging API v1 is enabled

  3. If disabled:

    • Click the three dots → Open in Cloud Console

    • Click Enable

Generate Service Account Key

  1. Go to Project Settings → Service Accounts

  2. Click Generate New Private Key

  3. Download the JSON file and save it securely

2

Configure OneSignal for Android

  1. In OneSignal, go to Settings → Push → Push Platforms

  2. Click Add Android

  3. Upload the Google Service Account JSON file

  4. Click Save & Continue

  5. Select Native Android

  6. Save & Continue

3

Add Android Configuration to Despia

The OneSignal App ID remains the same for both platforms. In Despia:

  1. Add the same App ID to Android Application ID field

  2. Save and publish your project

Testing Push Notifications

iOS Testing

  1. Install your app via TestFlight

  2. Open the app to register the device

  3. In OneSignal dashboard:

    • Go to Audience → Subscriptions

    • Verify your device appears

  4. Send a test message:

    • Click New Message

    • Select segments: Active Subscriptions or Total Subscriptions

    • Add title, subtitle, and message

    • Click Send

Android Testing

  1. Install your app from Google Play Console

  2. Open the app to register

  3. Test similarly to iOS

Note: Android devices may show "user didn't opt in" due to manufacturer variations, but notifications typically still work.

Setting Up Push Notifications in Wized

1

Create Variables in Wized

  1. Open your Wized editor

  2. Go to the Data Store → Variables

  3. Create a new variable:

    • Name: onesignalplayerid

    • Type: Text

    • Initial Value: (leave empty)

2

Capture Player ID on Page Load

Create a workflow to capture the OneSignal Player ID when your app loads:

  1. Create a new Event in Wized:

    • Name: Set OneSignal Player ID (Native)

    • Trigger: Page finishes loading

  2. Add an Action:

    • Type: Set Variable

    • Variable: onesignalplayerid

    • Value (JavaScript):

    return window.onesignalplayerid || "sample-player-id"

Note: Despia automatically injects the onesignalplayerid variable into your application. The fallback "sample-player-id" helps during development in the Wized editor.

3

Associate Player ID with User

After capturing the Player ID, send it to your backend:

  1. In the same workflow, add another action after setting the variable:

    • Type: Perform Request

    • Select your API endpoint to store the Player ID

    • Send:

      • onesignalplayerid: The OneSignal Player ID variable

      • userid: Your authenticated user's ID

4

Store Player IDs in Your Database

Create a linking table in your database:

player_devices
- id (primary key)
- user_id (foreign key to users table)
- player_id (OneSignal Player ID)
- device_type (iOS/Android)
- created_at
- last_active
  • This is an example only, the implementation will depend on your backend provider and your current database schema.

Sending Targeted Push Notifications

Backend Implementation

Use OneSignal's REST API to send notifications to specific users:

curl -X POST https://onesignal.com/api/v1/notifications \
  -H "Content-Type: application/json; charset=utf-8" \
  -H "Authorization: Basic YOUR_REST_API_KEY" \
  -d '{
    "app_id": "ONESIGNAL-APP-ID",
    "include_player_ids": ["PLAYER-ID"],
    "headings": {"en": "Hello"},
    "contents": {"en": "This is a test notification from Despia"}
  }'

Implementation in Xano

  1. Create a new API endpoint in Xano

  2. Add an External API Request function

  3. Import the cURL command above

  4. Make it dynamic:

    • Query user's player IDs from your database

    • Insert them into the include_player_ids array

    • Customize the message content

Security Best Practices

  • Store OneSignal REST API key as environment variable

  • Never expose API keys in frontend code

  • Use server-side logic for all push notification triggers

Advanced Features

Deep Linking

Add a URL to open specific pages in your app:

{
    "url": "https://yourapp.com/orders/12345",
}

Badge Management

Set or increment badge counts:

{
    "ios_badgeType": "SetTo",
    "ios_badgeCount": 5
}

Testing Your Implementation

iOS Testing

  1. Publish your Despia app

  2. Install via TestFlight

  3. Open the app to register the device

  4. Check OneSignal dashboard → Audience → Subscriptions

  5. Send test notification from OneSignal or your backend

Android Testing

  1. Publish your Despia app for Android

  2. Install from Google Play Console (internal testing)

  3. Open the app to register

  4. Test notifications (ignore any "user didn't opt in" errors - common with Android)

Debugging Tips

Display Player ID in Development

For testing, temporarily add an input field to display the Player ID:

  1. In Webflow, add a form with an input field

  2. Add custom attribute: wized="sample-player-id-input"

  3. In Wized, bind the input value to your onesignalplayerid variable

Common Issues

Player ID not captured:

  • Ensure the app is opened fresh (close all tabs first)

  • The OneSignal SDK must initialize on app launch

Notifications not received on Android:

  • Samsung and other manufacturers may show false errors

  • Test sending anyway - usually works despite error messages

Targeting wrong platform:

  • When creating new push campaigns after adding a platform, create fresh messages

  • Don't clone old messages - they may only target the original platform

Implementation Workflow Summary

1

Setup Phase

  • Configure OneSignal for iOS and Android

  • Add OneSignal App ID to Despia

  • Publish your Despia app

2

Integration Phase

  • Create Wized variable for Player ID

  • Capture Player ID on page load

  • Send to backend with user authentication

3

Backend Phase

  • Store Player IDs linked to users

  • Implement push notification endpoints

  • Use OneSignal API for targeted sends

4

Testing Phase

  • Test on real devices

  • Verify player registration

  • Send test notifications

Benefits Over Web Push

  • Works when app is closed

  • Rich notifications with images

  • Badge counts

  • Custom sounds

  • Deep linking to specific pages

  • No service worker limitations

  • Better delivery rates

  • Native notification grouping

Need Help?

For additional support or questions, please contact our support team at support@despia.com

Updated on
Background Location