Skip to content

Commit 4996e01

Browse files
A-KGeorgeA-KGeorge
committed
web push updated
1 parent b560a68 commit 4996e01

File tree

2 files changed

+105
-87
lines changed

2 files changed

+105
-87
lines changed

‎docs/guides/web-push.md

Lines changed: 84 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import notificationPopup from '@site/static/notificationPopup.png';
77
import notificationPreferences from '@site/static/notificationPreferences.png';
88
import webConsoleServiceWorker from '@site/static/webConsoleServiceWorker.png';
99
import notificationPreferencesReact from '@site/static/notificationPreferencesReact.png'
10-
1110
import notificationPreferencesPopupReact from '@site/static/notificationPreferencesPopupReact.png'
1211

1312
Web Push Notifications allow you to engage users directly through their web browsers, even when they're not on your website. This guide will walk you through setting up Web Push Notifications using NotificationAPI.
@@ -45,49 +44,13 @@ import TabItem from '@theme/TabItem';
4544

4645
<Tabs
4746
groupId="frameworks"
48-
defaultValue="vanilla"
47+
defaultValue="react"
4948
values={[
50-
{ label: 'Vanilla JS', value: 'vanilla' },
5149
{ label: 'React', value: 'react'},
50+
{ label: 'Vanilla JS', value: 'vanilla' },
5251
{ label: 'UMD', value: 'umd' }
5352
]
5453
}>
55-
<TabItem value="vanilla">
56-
57-
```shell title="1. Install"
58-
npm install notificationapi-js-client-sdk
59-
# yarn add notificationapi-js-client-sdk
60-
# pnpm add notificationapi-js-client-sdk
61-
```
62-
63-
```js title="2. Import"
64-
import NotificationAPI from 'notificationapi-js-client-sdk';
65-
import 'notificationapi-js-client-sdk/dist/styles.css';
66-
```
67-
68-
```js title="3. Initialize"
69-
const notificationapi = new NotificationAPI({
70-
clientId: 'YOUR_CLIENT_ID',
71-
userId: 'UNIQUE_USER_ID'
72-
});
73-
```
74-
75-
#### Parameters
76-
77-
| Parameter | Type | Description |
78-
| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
79-
| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). |
80-
| userId\* | string | The unique ID of the user in your system. |
81-
| userIdHash | string | Only used for [Secure Mode](/guides/secure-mode). |
82-
| websocket | string | Only if you want to specify your region, for example, if your account is in Canada region you must pass 'wss://ws.ca.notificationapi.com'. |
83-
| language | string | The language used for the pre-built UI widgets. Supported: `en-US`, `es-ES`, `fr-FR`, `it-IT`, `pt-BR` |
84-
| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). |
85-
86-
<sup>\*</sup> Required parameters
87-
88-
For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guide.
89-
90-
</TabItem>
9154

9255
<TabItem value="react">
9356
```shell title="1. Install"
@@ -109,7 +72,6 @@ import { NotificationAPIProvider } from '@notificationapi/react';
10972
// user={{
11073
// id: "abcd-1234", // logged in userId
11174
// }}
112-
playSoundOnNewNotification={true} // Allow the user to hear default sound on new notification
11375
>
11476
{/* your protected routes */}
11577
</NotificationAPIProvider>
@@ -131,6 +93,43 @@ For more information please checkout our [React SDK](/reference/react-sdk#setup)
13193
13294
</TabItem>
13395
96+
<TabItem value="vanilla">
97+
98+
```shell title="1. Install"
99+
npm install notificationapi-js-client-sdk
100+
# yarn add notificationapi-js-client-sdk
101+
# pnpm add notificationapi-js-client-sdk
102+
```
103+
104+
```js title="2. Import"
105+
import NotificationAPI from 'notificationapi-js-client-sdk';
106+
import 'notificationapi-js-client-sdk/dist/styles.css';
107+
```
108+
109+
```js title="3. Initialize"
110+
const notificationapi = new NotificationAPI({
111+
clientId: 'YOUR_CLIENT_ID',
112+
userId: 'UNIQUE_USER_ID'
113+
});
114+
```
115+
116+
#### Parameters
117+
118+
| Parameter | Type | Description |
119+
| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
120+
| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). |
121+
| userId\* | string | The unique ID of the user in your system. |
122+
| userIdHash | string | Only used for [Secure Mode](/guides/secure-mode). |
123+
| websocket | string | Only if you want to specify your region, for example, if your account is in Canada region you must pass 'wss://ws.ca.notificationapi.com'. |
124+
| language | string | The language used for the pre-built UI widgets. Supported: `en-US`, `es-ES`, `fr-FR`, `it-IT`, `pt-BR` |
125+
| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). |
126+
127+
<sup>\*</sup> Required parameters
128+
129+
For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guide.
130+
131+
</TabItem>
132+
134133
<TabItem value="umd">
135134
136135
```html title="1. Add to HTML, before </head>"
@@ -177,13 +176,25 @@ The service worker manages background tasks and is essential for receiving push
177176
Code examples for **step 3**:
178177
<Tabs
179178
groupId="frameworks"
180-
defaultValue="vanilla"
179+
defaultValue="react"
181180
values={[
182-
{ label: 'Vanilla JS', value: 'vanilla' },
183-
{ label: 'React', value: 'react'}
181+
{ label: 'React', value: 'react'},
182+
{ label: 'Vanilla JS', value: 'vanilla' }
184183
]}
185184
185+
> <TabItem value="react">
186+
187+
```jsx
188+
<NotificationAPIProvider
189+
userId="YOUR_CLIENT_ID"
190+
clientId="UNIQUE_USER_ID"
191+
customServiceWorkerPath="service/notificationapi-service-worker.js"
186192
>
193+
{/* Your components */}
194+
</NotificationAPIProvider>
195+
```
196+
197+
</TabItem>
187198
188199
<TabItem value="vanilla">
189200
```js
@@ -195,32 +206,47 @@ const notificationapi = new NotificationAPI({
195206
```
196207
</TabItem>
197208
198-
<TabItem value="react">
199-
```jsx
200-
<NotificationAPIProvider
201-
userId='YOUR_CLIENT_ID'
202-
clientId='UNIQUE_USER_ID'
203-
customServiceWorkerPath="service/notificationapi-service-worker.js"
204-
>
205-
{/* Your components */}
206-
</NotificationAPIProvider>
207-
```
208-
209-
</TabItem>
210209
</Tabs>
211210
212211
**Step 4: Give permission on your browser**
213212
214213
<Tabs
215214
groupId="frameworks"
216-
defaultValue="vanilla"
215+
defaultValue="react"
217216
values={[
218-
{ label: 'Vanilla JS', value: 'vanilla' },
219-
{ label: 'React', value: 'react'}
217+
{ label: 'React', value: 'react'},
218+
{ label: 'Vanilla JS', value: 'vanilla' }
220219
]}
221220
222221
>
223222
223+
<TabItem value="react">
224+
225+
**Option 1: Rely on NotificationAPI Pre-Built component (Recommended)** If you are using our react SDK to show in-app notifications. You can simply rely on our SDK to ask your users to opt in for web push notification.
226+
227+
1. Place the `<NotificationPopup />` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#popup) guide.
228+
229+
<img src={notificationPreferencesReact} style={{borderRadius: 8, width: "100%", maxWidth: 600}}/>
230+
231+
2. Click on Notification Preferences. This would open a popup.
232+
233+
<img src={notificationPreferencesPopupReact} style={{borderRadius: 8, width: "100%", maxWidth: 600}} />
234+
235+
3. Click on Yes.
236+
237+
This would prompt the browser to ask for permission to show notifications. Alternatively, you can place the `<NotificationPreferencesPopup />` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#preferences-popup) guide.
238+
239+
**Option 2: Using built-in method** You can place the code inside a component which is inside the `NotificationAPIProvider` provided by the React SDK and call the `askForWebPushPermission` function when the user interacts with your application.
240+
241+
```jsx
242+
const notificiationapi = NotificationAPIProvider.useNotificationAPIContext();
243+
const askForWebPushPermission = async () => {
244+
notificiationapi.setWebPushOptIn(true);
245+
};
246+
```
247+
248+
</TabItem>
249+
224250
<TabItem value="vanilla">
225251
226252
**Option 1: Rely on NotificationAPI Pre-Built component (Recommended)**
@@ -249,32 +275,6 @@ notificationapi.askForWebPushPermission();
249275
250276
</TabItem>
251277
252-
<TabItem value="react">
253-
254-
**Option 1: Rely on NotificationAPI Pre-Built component (Recommended)** If you are using our react SDK to show in-app notifications. You can simply rely on our SDK to ask your users to opt in for web push notification.
255-
256-
1. Place the `<NotificationPopup />` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#popup) guide.
257-
258-
<img src={notificationPreferencesReact} style={{borderRadius: 8, width: "100%", maxWidth: 600}}/>
259-
260-
2. Click on Notification Preferences. This would open a popup.
261-
262-
<img src={notificationPreferencesPopupReact} style={{borderRadius: 8, width: "100%", maxWidth: 600}} />
263-
264-
3. Click on Yes.
265-
266-
This would prompt the browser to ask for permission to show notifications. Alternatively, you can place the `<NotificationPreferencesPopup />` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#preferences-popup) guide.
267-
268-
**Option 2: Using built-in method** You can place the code inside a component which is inside the `NotificationAPIProvider` provided by the React SDK and call the `askForWebPushPermission` function when the user interacts with your application.
269-
270-
```jsx
271-
const notificiationapi = NotificationAPIProvider.useNotificationAPIContext();
272-
const askForWebPushPermission = async () => {
273-
notificiationapi.setWebPushOptIn(true);
274-
};
275-
```
276-
277-
</TabItem>
278278
</ Tabs>
279279
280280
**Step 5: Send Notifications from the Backend**

‎docs/reference/react-sdk.md

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,24 @@ For example, the web push service worker is placed at `public/service` folder an
133133
</App>;
134134
```
135135

136+
### webPushOptInMessage
137+
138+
The `webPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (true or 'AUTOMATIC') or suppresses the prompt (false).
139+
140+
```jsx
141+
<App>
142+
<NotificationAPIProvider
143+
userId="abcd-1234" // logged in userId
144+
clientId="abc123" // your clientId found on the dashboard
145+
webPushOptInMessage={true}
146+
>
147+
148+
<!-- your protected routes -->
149+
150+
</NotificationAPIProvider>
151+
</App>;
152+
```
153+
136154
## In-App Notification Components
137155

138156
### Popup
@@ -541,12 +559,12 @@ To request permission for notifications, place the following code inside an asyn
541559
notificiationapi.setWebPushOptIn(true);
542560
```
543561
544-
## webPushOptInMessage
562+
## setWebPushOptInMessage
545563
546-
This can be used to control the opt-in message for web push notifications. It can be set to either 'AUTOMATIC' or a boolean value.
564+
The `setWebPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (true or 'AUTOMATIC') or suppresses the prompt (false). It can be set to either 'AUTOMATIC' or a boolean value. It is an alternative to `webPushOptInMessage` inside the `<NotificationAPIProvider />` component.
547565
548566
```javascript
549-
notificationapi.webPushOptInMessage = 'AUTOMATIC';
567+
notificationapi.setWebPushOptInMessage('AUTOMATIC');
550568
```
551569
552570
<!-- -->

0 commit comments

Comments
 (0)