Skip to content
Merged
Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
8de9455
Update content on Pushpad guide
Aviatorscode2 Oct 23, 2025
66e2074
Update docs for pushpad
Aviatorscode2 Oct 27, 2025
8ea1da5
Update docs
Aviatorscode2 Nov 3, 2025
9019de3
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
Aviatorscode2 Nov 5, 2025
f38e6fd
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
Aviatorscode2 Nov 5, 2025
eceacd9
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
Aviatorscode2 Nov 5, 2025
4673b56
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
Aviatorscode2 Nov 5, 2025
e0cdbd8
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
Aviatorscode2 Nov 5, 2025
c0a3a83
Update based on feedback
Aviatorscode2 Nov 5, 2025
ab1e572
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
Aviatorscode2 Nov 7, 2025
aa12fe5
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
Aviatorscode2 Nov 7, 2025
3c04bf2
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
Aviatorscode2 Nov 7, 2025
d4ae4f9
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
Aviatorscode2 Nov 7, 2025
c89fd70
Update pushpad content
Aviatorscode2 Nov 7, 2025
15aa191
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
jainpawan21 Nov 19, 2025
c287d2f
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
jainpawan21 Nov 19, 2025
28d309e
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
jainpawan21 Nov 19, 2025
3114f80
Update content/docs/platform/integrations/push/(providers)/pushpad.mdx
jainpawan21 Nov 19, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 49 additions & 11 deletions content/docs/platform/integrations/push/(providers)/pushpad.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,57 @@ title: 'Pushpad'
description: 'Learn how to use the Pushpad provider to send web push notifications using Novu'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this end in a period?

---

import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
This guide walks you through the entire process of configuring and using <a href="https://pushpad.xyz" target="_blank" rel="noopener noreferrer">Pushpad</a> with Novu, from getting your credentials to sending your first notification.

[Pushpad](https://pushpad.xyz) is a web push service that supports sending notifications to all major browsers (Chrome, Firefox, Edge, Safari, etc.) via FCM, Mozilla autopush, Windows Push Notification Services and Apple Push Notification service, with just one simple API.
<a href="https://pushpad.xyz" target="_blank" rel="noopener noreferrer">Pushpad</a> is a web push service that supports sending notifications to all major browsers via FCM, Mozilla autopush, Windows Push Notification Services, and APNS, with just one simple API.

To configure the Pushpad integration, you will need an active account and you need to have a `Pushpad Auth Token` (from the [account settings](https://pushpad.xyz/access_tokens)) and the `Pushpad Project ID` (from the project settings).
## Configure Pushpad with Novu

## Setting the Device Token
Before you can send notifications, you need to connect your Pushpad project to Novu by getting your credentials and adding them to your integration settings.

Once Pushpad has been configured with your credentials and the Pushpad SDK has been [set up and installed](https://pushpad.xyz/docs/pushpad_pro_getting_started) on your website, you can [assign a user ID (uid)](https://pushpad.xyz/docs/identifying_users) to the push subscriptions.
### Step 1: Get your Pushpad credentials

This identifier (`uid` or `user ID`) allows targeting a specific browser when sending push notifications.
To configure the Pushpad integration, you need:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest moving this before Step 1 and putting it under ### Prerequisites

- An active Pushpad account
- A Pushpad auth token (found in the [account settings](https://pushpad.xyz/access_tokens))
- Your Pushpad project ID (found in the project settings)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Having one list following another is difficult. I suggest adding an intro sentence before the numbered list.

h3

intro text

steps

In order to target the Pushpad user from Novu, you must register the Pushpad `uid` as the `deviceToken` for your Novu subscriber. For example, if you invoked the [Pushpad JavaScript SDK](https://pushpad.xyz/docs/javascript_sdk_reference) with `pushpad('uid', 'user123')`, then `user123` is the user ID for that browser.
1. Log in to your Pushpad dashboard.
2. Click **New project** to create a project.
![New project](/images/channels-and-providers/push/pushpad/new-project.png)
3. Click **Settings** on the project page and record the **Project ID**. You need it to connect to Novu.
![Project ID](/images/channels-and-providers/push/pushpad/project-id.png)
4. Navigate to the [access token](https://pushpad.xyz/access_tokens) page
5. Click **Add access token**
6. Fill in the required fields to create a new access token, or use your existing token if you already have one.
![Add access token](/images/channels-and-providers/push/pushpad/add-token.png)
7. Copy the generated token. You need it to connect to Novu.
![Generate access token](/images/channels-and-providers/push/pushpad/access-token.png)

Once you have the `uid` value, the `deviceToken` for your Novu subscriber can be set using this code:
### Step 2: Connect Pushpad to Novu

Next, add these credentials to your Pushpad integration in the Novu dashboard.

1. Log in to the Novu dashboard.
2. On the Novu dashboard, navigate to the **Integration Store**.
3. Click **Connect provider**.
4. Click the **Push** tab.
5. Select **Pushpad**.
6. In the Pushpad integration form, paste your access token and project ID from [Step 1](/platform/integrations/push/pushpad#step-1-get-your-pushpad-credentials) into the corresponding fields.
![Pushpad Integration in Novu](/images/channels-and-providers/push/pushpad/pushpad-integration.png)
7. Click **Create Integration**.

## Using Pushpad with Novu

Once your integration is configured, in other to send push notification using the PushPad provider, you must do the following:

### Step 1: Add subscriber device token

After [setting up the Pushpad SDK](https://pushpad.xyz/docs/pushpad_pro_getting_started) on your website, you must [assign a user ID (uid)](https://pushpad.xyz/docs/identifying_users) to your users' push subscriptions.

This `uid` is the identifier Novu uses to target a specific browser. For example, if you use `pushpad('uid', 'user123')`, then `user123` is the ID you must register in Novu.

You can do this by making an API call to [update the subscriber's credentials](/api-reference/subscribers/update-provider-credentials).

<Tabs items={['Node.js', 'cURL']}>
<Tab value="Node.js">
Expand Down Expand Up @@ -60,9 +96,11 @@ curl -L -X PUT 'https://api.novu.co/v1/subscribers/<SUBSCRIBER_ID>/credentials'
</Tab>
</Tabs>

Checkout the [API reference](/api-reference/subscribers/update-provider-credentials) for more details.
### Step 2: Send a notification

## SDK Trigger Example
Now you're ready to send a push notification. [Create a workflow with a Push step](/platform/workflow/build-a-workflow) and trigger it. Novu then sends the notification to the `uid`s associated with the subscriber.

The example below demonstrates a simple trigger using Novu’s SDK.

```typescript
import { Novu } from '@novu/api';
Expand All @@ -80,4 +118,4 @@ await novu.trigger({
},
payload: {},
});
```
```
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.