From 58055882695d4f6ba149cba098510a9628d4955d Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Mon, 18 Nov 2024 13:53:12 -0330 Subject: [PATCH 01/15] docs updated --- docs/reference/react-sdk.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/reference/react-sdk.md b/docs/reference/react-sdk.md index f2461ce..2a4ca3b 100644 --- a/docs/reference/react-sdk.md +++ b/docs/reference/react-sdk.md @@ -508,6 +508,16 @@ notificationapi .then((result) => console.log(result)); ``` +## Web push + +Download notificationapi-service-worker.js and place it in the "public" folder of your web application. + +To request permission for notifications, place the following code inside an async function, and call that function when the user interacts with your application. + +```javascript +notificiationapi.setWebPushOptIn(true); +``` + From c301e0568284fcdcdc36ace84f4e92f5a302083a Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Thu, 21 Nov 2024 10:57:03 -0330 Subject: [PATCH 02/15] docs updated at setup web push and react sdk --- docs/guides/web-push.md | 49 ++++++++++++++++++++++++++++++++++++- docs/reference/react-sdk.md | 37 +++++++++++++++++++++++++--- 2 files changed, 82 insertions(+), 4 deletions(-) diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index c93db49..89ae64d 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -110,7 +110,44 @@ The service worker manages background tasks and is essential for receiving push 1. **Download** notificationapi-service-worker.js 2. **Place the file** in the `public` folder of your web application. It should be accessible at `https://yourdomain.com/notificationapi-service-worker.js`. -3. **Update the SDK Initialization**: If the service worker is not at the root, specify its path using the `customServiceWorkerPath` parameter during SDK initialization. +3. **Update the SDK Initialization**: If the service worker is not at the root, specify its path using the `customServiceWorkerPath` parameter during SDK initialization. For example, it is accessible at `https://yourdomain.com/service/notificationapi-service-worker.js`, please specify its path using the `customServiceWorkerPath` parameter during SDK initialization. + +Code examples for **step 3**: + + + +```JavaScript +const notificationapi = new NotificationAPI({ + clientId: 'YOUR_CLIENT_ID', + userId: 'UNIQUE_USER_ID', + customServiceWorkerPath: 'service/notificationapi-service-worker.js' +}); + +```` + + + + +```jsx + + {/* Your components */} + + +```` + + + **Step 4: Give permission on your browser** @@ -138,6 +175,16 @@ You can use the following method to ask your user to opt in for the web Push not notificationapi.askForWebPushPermission(); ``` +**Option 3: Using the react sdk** +If you are using our react SDK, you can use the following method to ask your user to opt. Place the code inside a component which is inside the `NotificationAPIProvider` provided by the React SDK. + +```jsx +const notificiationapi = NotificationAPIProvider.useNotificationAPIContext(); +const askForWebPushPermission = async () => { + notificiationapi.setWebPushOptIn(true); +}; +``` + **Step 5: Send Notifications from the Backend** With the frontend set up to receive notifications, you can now send them from your backend. diff --git a/docs/reference/react-sdk.md b/docs/reference/react-sdk.md index 2a4ca3b..17b019a 100644 --- a/docs/reference/react-sdk.md +++ b/docs/reference/react-sdk.md @@ -108,6 +108,31 @@ Change the deafult notification sound to include your own: +### Custom path to web push service worker + +The service worker must be placed in the public folder. + +The default path to the web push service worker is `/notificationapi-service-worker.js`, and is accessible at `https://yourdomain.com/notificationapi-service-worker.js` + +If the default path is not suitable for your application, you can change the path to the web push service worker. +The service worker should be accessible at the path you specify. + +For example, the web push service worker is placed at `public/service` folder and is accessible at `https://yourdomain.com/service/notificationapi-service-worker.js` + +```jsx + + + + + + +; +``` + ## In-App Notification Components ### Popup @@ -508,9 +533,7 @@ notificationapi .then((result) => console.log(result)); ``` -## Web push - -Download notificationapi-service-worker.js and place it in the "public" folder of your web application. +## setWebPushOptIn To request permission for notifications, place the following code inside an async function, and call that function when the user interacts with your application. @@ -518,6 +541,14 @@ To request permission for notifications, place the following code inside an asyn notificiationapi.setWebPushOptIn(true); ``` +## webPushOptInMessage + +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. + +```javascript +notificationapi.webPushOptInMessage = 'AUTOMATIC'; +``` + From f4834e49c8980c01842bad1e470cd987ff6df95b Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Mon, 25 Nov 2024 15:47:23 -0330 Subject: [PATCH 03/15] included screenshots --- docs/guides/web-push.md | 10 ++++++++++ static/optInWebPush.png | Bin 0 -> 2843 bytes static/showPermissions.png | Bin 0 -> 7237 bytes 3 files changed, 10 insertions(+) create mode 100644 static/optInWebPush.png create mode 100644 static/showPermissions.png diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index 89ae64d..af414ba 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -6,6 +6,8 @@ import windowsNotifications from '@site/static/windowsNotifications.png'; import notificationPopup from '@site/static/notificationPopup.png'; import notificationPreferences from '@site/static/notificationPreferences.png'; import webConsoleServiceWorker from '@site/static/webConsoleServiceWorker.png'; +import optInWebPush from '@site/static/optInWebPush.png' +import showPermissions from '@site/static/showPermissions.png' 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. @@ -185,6 +187,14 @@ const askForWebPushPermission = async () => { }; ``` +In the screenshot below, the user has placed the above code inside a react component and called the askForWebPushPermission when the user has pressed the button. This would prompt the browser to request permission to show notifications. The component has been placed inside the `NotificationAPIProvider` provided by the React SDK. + + + +
+ + + **Step 5: Send Notifications from the Backend** With the frontend set up to receive notifications, you can now send them from your backend. diff --git a/static/optInWebPush.png b/static/optInWebPush.png new file mode 100644 index 0000000000000000000000000000000000000000..e7f35487ac366be3e28914ce33b01186deba995f GIT binary patch literal 2843 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 Cnozs| literal 0 HcmV?d00001 diff --git a/static/showPermissions.png b/static/showPermissions.png new file mode 100644 index 0000000000000000000000000000000000000000..934bd811647c12dc92c1da0eeeda5c8f5f9bd7bb GIT binary patch literal 7237 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 literal 0 HcmV?d00001 From 9415e55f2594286559433ed0800bb34f94a98f5a Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Mon, 25 Nov 2024 15:48:42 -0330 Subject: [PATCH 04/15] modified description --- docs/guides/web-push.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index af414ba..89a7fc2 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -187,7 +187,7 @@ const askForWebPushPermission = async () => { }; ``` -In the screenshot below, the user has placed the above code inside a react component and called the askForWebPushPermission when the user has pressed the button. This would prompt the browser to request permission to show notifications. The component has been placed inside the `NotificationAPIProvider` provided by the React SDK. +In the screenshot below, the user has placed the above code inside a react component and called the `askForWebPushPermission` function when the user has pressed the button. This would prompt the browser to request permission to show notifications. The component has been placed inside the `NotificationAPIProvider` provided by the React SDK. From 7b7c2bfdcbaa1e7aa5a923504bda0a352ed26f28 Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Tue, 26 Nov 2024 14:03:37 -0330 Subject: [PATCH 05/15] Add separate tabs --- docs/guides/web-push.md | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index 89a7fc2..4bff5dd 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -46,7 +46,7 @@ import TabItem from '@theme/TabItem'; groupId="package-manager" defaultValue="manager" values={[ -{ label: 'Package Manager', value: 'manager' }, +{ label: 'Vanilla JS', value: 'manager' }, { label: 'UMD', value: 'umd' } ] }> @@ -116,6 +116,7 @@ The service worker manages background tasks and is essential for receiving push Code examples for **step 3**: -```JavaScript +```js const notificationapi = new NotificationAPI({ clientId: 'YOUR_CLIENT_ID', userId: 'UNIQUE_USER_ID', @@ -153,6 +154,18 @@ const notificationapi = new NotificationAPI({ **Step 4: Give permission on your browser** + + + + **Option 1: Rely on NotificationAPI Pre-Built component (Recommended)** If you are using our front-end SDK to show in-app notifications. You can simply rely on our SDK to ask your users to opt in for web push notification. @@ -177,7 +190,10 @@ You can use the following method to ask your user to opt in for the web Push not notificationapi.askForWebPushPermission(); ``` -**Option 3: Using the react sdk** + + + + If you are using our react SDK, you can use the following method to ask your user to opt. Place the code inside a component which is inside the `NotificationAPIProvider` provided by the React SDK. ```jsx @@ -195,6 +211,9 @@ In the screenshot below, the user has placed the above code inside a react compo + + + **Step 5: Send Notifications from the Backend** With the frontend set up to receive notifications, you can now send them from your backend. From 55e87f2b209a22d7d87c20b837d9bd7caf5008aa Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Tue, 26 Nov 2024 14:04:17 -0330 Subject: [PATCH 06/15] fixed a typo --- docs/guides/web-push.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index 4bff5dd..3c6b8e2 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -205,11 +205,11 @@ const askForWebPushPermission = async () => { In the screenshot below, the user has placed the above code inside a react component and called the `askForWebPushPermission` function when the user has pressed the button. This would prompt the browser to request permission to show notifications. The component has been placed inside the `NotificationAPIProvider` provided by the React SDK. - +
- + From 3f686542bbdbd35784e873629ccfc7b72879b903 Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Tue, 26 Nov 2024 14:38:39 -0330 Subject: [PATCH 07/15] Added react to web push install --- docs/guides/web-push.md | 82 +++++++++++++++++++++++++++++++++++------ 1 file changed, 70 insertions(+), 12 deletions(-) diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index 3c6b8e2..fb66049 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -43,14 +43,15 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - + ```shell title="1. Install" npm install notificationapi-js-client-sdk @@ -70,7 +71,67 @@ const notificationapi = new NotificationAPI({ }); ``` +#### Parameters + +| Parameter | Type | Description | +| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ | +| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). | +| userId\* | string | The unique ID of the user in your system. | +| userIdHash | string | Only used for [Secure Mode](/guides/secure-mode). | +| 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'. | +| language | string | The language used for the pre-built UI widgets. Supported: `en-US`, `es-ES`, `fr-FR`, `it-IT`, `pt-BR` | +| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). | + +\* Required parameters + +For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guid. + + + + +```shell title="1. Install" +npm install @notificationapi/react --legacy-peer-deps +# or +# yarn add @notificationapi/react +# or +# pnpm add @notificationapi/react +```` + +```jsx title="2. Import and use our provider in your top-level components/routers." +import { NotificationAPIProvider } from '@notificationapi/react'; + + + + + + + +; +``` + +#### Parameters + +| Parameter | Type | Description | +| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------ | +| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). | +| userId\* | string | The unique ID of the user in your system. | +| hashedUserId | string | Only used for [Secure Mode](/guides/secure-mode). | +| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). | + +\* Required parameters + +For more information please checkout our [React SDK](/reference/react-sdk#setup) guid. + + ```html title="1. Add to HTML, before " @@ -88,9 +149,6 @@ const notificationapi = new NotificationAPI({ }); ``` - - - #### Parameters | Parameter | Type | Description | @@ -106,6 +164,9 @@ const notificationapi = new NotificationAPI({ For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guid. + + + **Step 3: Service Worker Setup** The service worker manages background tasks and is essential for receiving push notifications. @@ -132,9 +193,7 @@ const notificationapi = new NotificationAPI({ userId: 'UNIQUE_USER_ID', customServiceWorkerPath: 'service/notificationapi-service-worker.js' }); - -```` - +``` @@ -146,8 +205,7 @@ const notificationapi = new NotificationAPI({ > {/* Your components */} - -```` +``` From 63dc02fe619da299edd4765263bd86c8176614a1 Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Tue, 26 Nov 2024 15:40:14 -0330 Subject: [PATCH 08/15] added screenshots --- docs/guides/web-push.md | 39 +++++++++++-------- static/notificationPreferencesPopupReact.png | Bin 0 -> 15585 bytes static/notificationPreferencesReact.png | Bin 0 -> 8276 bytes static/optInWebPush.png | Bin 2843 -> 0 bytes static/showPermissions.png | Bin 7237 -> 0 bytes 5 files changed, 22 insertions(+), 17 deletions(-) create mode 100644 static/notificationPreferencesPopupReact.png create mode 100644 static/notificationPreferencesReact.png delete mode 100644 static/optInWebPush.png delete mode 100644 static/showPermissions.png diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index fb66049..9cd3ff3 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -6,8 +6,9 @@ import windowsNotifications from '@site/static/windowsNotifications.png'; import notificationPopup from '@site/static/notificationPopup.png'; import notificationPreferences from '@site/static/notificationPreferences.png'; import webConsoleServiceWorker from '@site/static/webConsoleServiceWorker.png'; -import optInWebPush from '@site/static/optInWebPush.png' -import showPermissions from '@site/static/showPermissions.png' +import notificationPreferencesReact from '@site/static/notificationPreferencesReact.png' + +import notificationPreferencesPopupReact from '@site/static/notificationPreferencesPopupReact.png' 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. @@ -84,7 +85,7 @@ const notificationapi = new NotificationAPI({ \* Required parameters -For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guid. +For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guide. @@ -110,9 +111,7 @@ import { NotificationAPIProvider } from '@notificationapi/react'; // }} playSoundOnNewNotification={true} // Allow the user to hear default sound on new notification > - - - + {/* your protected routes */} ; ``` @@ -128,7 +127,7 @@ import { NotificationAPIProvider } from '@notificationapi/react'; \* Required parameters -For more information please checkout our [React SDK](/reference/react-sdk#setup) guid. +For more information please checkout our [React SDK](/reference/react-sdk#setup) guide. @@ -162,7 +161,7 @@ const notificationapi = new NotificationAPI({ \* Required parameters -For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guid. +For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guide. @@ -252,7 +251,21 @@ notificationapi.askForWebPushPermission(); -If you are using our react SDK, you can use the following method to ask your user to opt. Place the code inside a component which is inside the `NotificationAPIProvider` provided by the React SDK. +**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. + +1. Place the `` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#popup) guide. + + + +2. Click on Notification Preferences. This would open up a popup. + + + +3. Click on Yes. + +This would prompt the browser to ask for permission to show notifications. Alternatively, you can place the `` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#preferences-popup) guide. + +**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. ```jsx const notificiationapi = NotificationAPIProvider.useNotificationAPIContext(); @@ -261,14 +274,6 @@ const askForWebPushPermission = async () => { }; ``` -In the screenshot below, the user has placed the above code inside a react component and called the `askForWebPushPermission` function when the user has pressed the button. This would prompt the browser to request permission to show notifications. The component has been placed inside the `NotificationAPIProvider` provided by the React SDK. - - - -
- - - diff --git a/static/notificationPreferencesPopupReact.png b/static/notificationPreferencesPopupReact.png new file mode 100644 index 0000000000000000000000000000000000000000..08dacff00a0bfe1ac886ff03e8da0b57d0064c1b GIT binary patch literal 15585 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 IfJ{RE2WCb-^8f$< literal 0 HcmV?d00001 diff --git a/static/optInWebPush.png b/static/optInWebPush.png deleted file mode 100644 index e7f35487ac366be3e28914ce33b01186deba995f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2843 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 Cnozs| diff --git a/static/showPermissions.png b/static/showPermissions.png deleted file mode 100644 index 934bd811647c12dc92c1da0eeeda5c8f5f9bd7bb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7237 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 From b560a68e2a7cbb34f030e324d5c169241013f6f8 Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Tue, 26 Nov 2024 15:41:52 -0330 Subject: [PATCH 09/15] fixed a typo --- docs/guides/web-push.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index 9cd3ff3..d4fc706 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -257,7 +257,7 @@ notificationapi.askForWebPushPermission(); -2. Click on Notification Preferences. This would open up a popup. +2. Click on Notification Preferences. This would open a popup. From 4996e01347ed68628ce63a2ac553c23cc4680dbd Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Fri, 29 Nov 2024 13:06:51 -0330 Subject: [PATCH 10/15] web push updated --- docs/guides/web-push.md | 168 ++++++++++++++++++------------------ docs/reference/react-sdk.md | 24 +++++- 2 files changed, 105 insertions(+), 87 deletions(-) diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index d4fc706..b8116cf 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -7,7 +7,6 @@ import notificationPopup from '@site/static/notificationPopup.png'; import notificationPreferences from '@site/static/notificationPreferences.png'; import webConsoleServiceWorker from '@site/static/webConsoleServiceWorker.png'; import notificationPreferencesReact from '@site/static/notificationPreferencesReact.png' - import notificationPreferencesPopupReact from '@site/static/notificationPreferencesPopupReact.png' 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'; - - -```shell title="1. Install" -npm install notificationapi-js-client-sdk -# yarn add notificationapi-js-client-sdk -# pnpm add notificationapi-js-client-sdk -``` - -```js title="2. Import" -import NotificationAPI from 'notificationapi-js-client-sdk'; -import 'notificationapi-js-client-sdk/dist/styles.css'; -``` - -```js title="3. Initialize" -const notificationapi = new NotificationAPI({ - clientId: 'YOUR_CLIENT_ID', - userId: 'UNIQUE_USER_ID' -}); -``` - -#### Parameters - -| Parameter | Type | Description | -| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ | -| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). | -| userId\* | string | The unique ID of the user in your system. | -| userIdHash | string | Only used for [Secure Mode](/guides/secure-mode). | -| 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'. | -| language | string | The language used for the pre-built UI widgets. Supported: `en-US`, `es-ES`, `fr-FR`, `it-IT`, `pt-BR` | -| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). | - -\* Required parameters - -For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guide. - - ```shell title="1. Install" @@ -109,7 +72,6 @@ import { NotificationAPIProvider } from '@notificationapi/react'; // user={{ // id: "abcd-1234", // logged in userId // }} - playSoundOnNewNotification={true} // Allow the user to hear default sound on new notification > {/* your protected routes */} @@ -131,6 +93,43 @@ For more information please checkout our [React SDK](/reference/react-sdk#setup) + + +```shell title="1. Install" +npm install notificationapi-js-client-sdk +# yarn add notificationapi-js-client-sdk +# pnpm add notificationapi-js-client-sdk +``` + +```js title="2. Import" +import NotificationAPI from 'notificationapi-js-client-sdk'; +import 'notificationapi-js-client-sdk/dist/styles.css'; +``` + +```js title="3. Initialize" +const notificationapi = new NotificationAPI({ + clientId: 'YOUR_CLIENT_ID', + userId: 'UNIQUE_USER_ID' +}); +``` + +#### Parameters + +| Parameter | Type | Description | +| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ | +| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). | +| userId\* | string | The unique ID of the user in your system. | +| userIdHash | string | Only used for [Secure Mode](/guides/secure-mode). | +| 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'. | +| language | string | The language used for the pre-built UI widgets. Supported: `en-US`, `es-ES`, `fr-FR`, `it-IT`, `pt-BR` | +| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). | + +\* Required parameters + +For more information please checkout our [vanilla JS SDK](/reference/js-client#setup--initialization) guide. + + + ```html title="1. Add to HTML, before " @@ -177,13 +176,25 @@ The service worker manages background tasks and is essential for receiving push Code examples for **step 3**: + +```jsx + + {/* Your components */} + +``` + + ```js @@ -195,32 +206,47 @@ const notificationapi = new NotificationAPI({ ``` - -```jsx - - {/* Your components */} - -``` - - **Step 4: Give permission on your browser** + + +**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. + +1. Place the `` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#popup) guide. + + + +2. Click on Notification Preferences. This would open a popup. + + + +3. Click on Yes. + +This would prompt the browser to ask for permission to show notifications. Alternatively, you can place the `` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#preferences-popup) guide. + +**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. + +```jsx +const notificiationapi = NotificationAPIProvider.useNotificationAPIContext(); +const askForWebPushPermission = async () => { + notificiationapi.setWebPushOptIn(true); +}; +``` + + + **Option 1: Rely on NotificationAPI Pre-Built component (Recommended)** @@ -249,32 +275,6 @@ notificationapi.askForWebPushPermission(); - - -**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. - -1. Place the `` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#popup) guide. - - - -2. Click on Notification Preferences. This would open a popup. - - - -3. Click on Yes. - -This would prompt the browser to ask for permission to show notifications. Alternatively, you can place the `` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#preferences-popup) guide. - -**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. - -```jsx -const notificiationapi = NotificationAPIProvider.useNotificationAPIContext(); -const askForWebPushPermission = async () => { - notificiationapi.setWebPushOptIn(true); -}; -``` - - **Step 5: Send Notifications from the Backend** diff --git a/docs/reference/react-sdk.md b/docs/reference/react-sdk.md index 17b019a..f567dd1 100644 --- a/docs/reference/react-sdk.md +++ b/docs/reference/react-sdk.md @@ -133,6 +133,24 @@ For example, the web push service worker is placed at `public/service` folder an ; ``` +### webPushOptInMessage + +The `webPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (true or 'AUTOMATIC') or suppresses the prompt (false). + +```jsx + + + + + + +; +``` + ## In-App Notification Components ### Popup @@ -541,12 +559,12 @@ To request permission for notifications, place the following code inside an asyn notificiationapi.setWebPushOptIn(true); ``` -## webPushOptInMessage +## setWebPushOptInMessage -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. +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 `` component. ```javascript -notificationapi.webPushOptInMessage = 'AUTOMATIC'; +notificationapi.setWebPushOptInMessage('AUTOMATIC'); ``` From 85191e5ee9ceaabfc061b251460bcd349b16aa92 Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Fri, 29 Nov 2024 13:11:04 -0330 Subject: [PATCH 11/15] updated web push react sdk --- docs/reference/react-sdk.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/reference/react-sdk.md b/docs/reference/react-sdk.md index f567dd1..4e5b363 100644 --- a/docs/reference/react-sdk.md +++ b/docs/reference/react-sdk.md @@ -135,7 +135,7 @@ For example, the web push service worker is placed at `public/service` folder an ### webPushOptInMessage -The `webPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (true or 'AUTOMATIC') or suppresses the prompt (false). +The `webPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (true or 'AUTOMATIC') or suppresses the prompt (false). It is set to `"AUTOMATIC"` by default. ```jsx @@ -561,7 +561,7 @@ notificiationapi.setWebPushOptIn(true); ## setWebPushOptInMessage -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 `` component. +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 set to `"AUTOMATIC"` by default. It is an alternative to `webPushOptInMessage` inside the `` component. ```javascript notificationapi.setWebPushOptInMessage('AUTOMATIC'); From 346887eb56792dcc94dac44187ef371cf0190c96 Mon Sep 17 00:00:00 2001 From: A-KGeorge Date: Fri, 29 Nov 2024 13:15:25 -0330 Subject: [PATCH 12/15] removed sentences --- docs/reference/react-sdk.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/reference/react-sdk.md b/docs/reference/react-sdk.md index 4e5b363..6cfe1c5 100644 --- a/docs/reference/react-sdk.md +++ b/docs/reference/react-sdk.md @@ -135,7 +135,7 @@ For example, the web push service worker is placed at `public/service` folder an ### webPushOptInMessage -The `webPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (true or 'AUTOMATIC') or suppresses the prompt (false). It is set to `"AUTOMATIC"` by default. +The `webPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (`true` or `'AUTOMATIC'`) or suppresses the prompt (`false`). It is set to `"AUTOMATIC"` by default. ```jsx @@ -561,7 +561,7 @@ notificiationapi.setWebPushOptIn(true); ## setWebPushOptInMessage -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 set to `"AUTOMATIC"` by default. It is an alternative to `webPushOptInMessage` inside the `` component. +The `setWebPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (`true` or `'AUTOMATIC'`) or suppresses the prompt (`false`). It is set to `"AUTOMATIC"` by default. It is an alternative to `webPushOptInMessage` inside the `` component. ```javascript notificationapi.setWebPushOptInMessage('AUTOMATIC'); From 054743b0f083d0cde5bf71da6b61eaf2ff0e723e Mon Sep 17 00:00:00 2001 From: mbasadi Date: Thu, 12 Dec 2024 13:05:22 -0500 Subject: [PATCH 13/15] improve the doc --- docs/guides/web-push.md | 107 ++++++++++++++++++------------------ docs/reference/react-sdk.md | 37 +++++-------- 2 files changed, 67 insertions(+), 77 deletions(-) diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index b8116cf..64be1f7 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -25,14 +25,14 @@ To set up Web Push Notifications with NotificationAPI, you'll need to: ## Step-by-Step Implementation -**Step 1: Create a Notification Template** +### **Step 1: Create a Notification Template** 1. Log in to the NotificationAPI Dashboard. 2. Create a new notification template. 3. Enable "Web Push" as a channel. 4. Customize the template to suit your needs. -**Step 2: Implement the Frontend SDK** +### **Step 2: Implement the Frontend SDK** Integrate the NotificationAPI Frontend SDK into your web page to handle user subscriptions and display notifications. @@ -67,11 +67,11 @@ import { NotificationAPIProvider } from '@notificationapi/react'; {/* your protected routes */} @@ -80,12 +80,12 @@ import { NotificationAPIProvider } from '@notificationapi/react'; #### Parameters -| Parameter | Type | Description | -| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------ | -| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). | -| userId\* | string | The unique ID of the user in your system. | -| hashedUserId | string | Only used for [Secure Mode](/guides/secure-mode). | -| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). | +| Parameter | Type | Description | +| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | +| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). | +| userId\* | string | The unique ID of the user in your system. | +| webPushOptInMessage | "AUTOMATIC" or Boolean | Control to show the web push opt in message. Default is "AUTOMATIC" | +| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). | \* Required parameters @@ -115,14 +115,11 @@ const notificationapi = new NotificationAPI({ #### Parameters -| Parameter | Type | Description | -| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------ | -| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). | -| userId\* | string | The unique ID of the user in your system. | -| userIdHash | string | Only used for [Secure Mode](/guides/secure-mode). | -| 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'. | -| language | string | The language used for the pre-built UI widgets. Supported: `en-US`, `es-ES`, `fr-FR`, `it-IT`, `pt-BR` | -| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). | +| Parameter | Type | Description | +| ----------------------- | ------ | ------------------------------------------------------------------------------------------------------------------ | +| clientId\* | string | Your NotificationAPI account clientId. You can get it from [here](https://app.notificationapi.com/environments). | +| userId\* | string | The unique ID of the user in your system. | +| customServiceWorkerPath | string | Path to your service worker file if it's not at the root (e.g., '/custom/path/notificationapi-service-worker.js'). | \* Required parameters @@ -165,15 +162,16 @@ For more information please checkout our [vanilla JS SDK](/reference/js-client#s -**Step 3: Service Worker Setup** +### **Step 3: Service Worker Setup** The service worker manages background tasks and is essential for receiving push notifications. 1. **Download** notificationapi-service-worker.js 2. **Place the file** in the `public` folder of your web application. It should be accessible at `https://yourdomain.com/notificationapi-service-worker.js`. -3. **Update the SDK Initialization**: If the service worker is not at the root, specify its path using the `customServiceWorkerPath` parameter during SDK initialization. For example, it is accessible at `https://yourdomain.com/service/notificationapi-service-worker.js`, please specify its path using the `customServiceWorkerPath` parameter during SDK initialization. -Code examples for **step 3**: +:::note +If the service worker is not at the root, specify its path using the `customServiceWorkerPath` parameter during SDK initialization. For example, it is accessible at `https://yourdomain.com/service/notificationapi-service-worker.js`, please specify its path using the `customServiceWorkerPath` parameter during SDK initialization. + +> + + ```jsx {/* Your components */} @@ -201,15 +201,20 @@ values={[ const notificationapi = new NotificationAPI({ clientId: 'YOUR_CLIENT_ID', userId: 'UNIQUE_USER_ID', - customServiceWorkerPath: 'service/notificationapi-service-worker.js' + customServiceWorkerPath: '/service/notificationapi-service-worker.js' }); ``` -**Step 4: Give permission on your browser** +::: + +### **Step 4: Give permission on your browser** +#### **Option 1: Use NotificationAPI Pre-Built Component (Recommended)** + +Our SDKs provide an easy way to prompt users for permission to receive web push notifications. -**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. - -1. Place the `` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#popup) guide. +If you are using the popup component, click on the ⚙️ icon, which is there in the top right corner. -2. Click on Notification Preferences. This would open a popup. - -3. Click on Yes. - -This would prompt the browser to ask for permission to show notifications. Alternatively, you can place the `` component inside the `NotificationAPIProvider` component. For more information on the component please checkout our [React SDK](/reference/react-sdk#preferences-popup) guide. +This would prompt the browser to ask for permission to show notifications. -**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. +**Option 2: Using built-in method** You can use `useNotificationAPIContext`. ```jsx -const notificiationapi = NotificationAPIProvider.useNotificationAPIContext(); -const askForWebPushPermission = async () => { - notificiationapi.setWebPushOptIn(true); +const AskforPerm: React.FC = () => { + const notificationapi = NotificationAPIProvider.useNotificationAPIContext(); + + return ( + + ); }; + +export default AskforPerm; ``` -**Option 1: Rely on NotificationAPI Pre-Built component (Recommended)** -If you are using our front-end SDK to show in-app notifications. You can simply rely on our SDK to ask your users to opt in for web push notification. - -1. Click on the bell notification icon, and it will ask the user whether they want to web push notifications. +You can see the opt in message in both the notification components and user preference components. - -2. Click on Yes. - -This would prompt the browser to ask for permission to show notifications. - -3. If you do not see the message in the NotificationAPI, click on the bell notification icon and then click on the settings icon, which is there in the top right corner. +If you are using the popup component, you can click on the ⚙️ icon and then click on the settings icon, which is there in the top right corner. - -Click on Click here. +This would prompt the browser to ask for permission to show notifications. **Option 2: Using built-in method** You can use the following method to ask your user to opt in for the web Push notifications: @@ -277,7 +278,7 @@ notificationapi.askForWebPushPermission(); -**Step 5: Send Notifications from the Backend** +### **Step 5: Send Notifications from the Backend** With the frontend set up to receive notifications, you can now send them from your backend. diff --git a/docs/reference/react-sdk.md b/docs/reference/react-sdk.md index 6cfe1c5..420c970 100644 --- a/docs/reference/react-sdk.md +++ b/docs/reference/react-sdk.md @@ -108,14 +108,13 @@ Change the deafult notification sound to include your own: -### Custom path to web push service worker +### Customizing the path to web push service worker The service worker must be placed in the public folder. -The default path to the web push service worker is `/notificationapi-service-worker.js`, and is accessible at `https://yourdomain.com/notificationapi-service-worker.js` +By default we assume the service worker file is publicly associable at `https://yourdomain.com/notificationapi-service-worker.js` -If the default path is not suitable for your application, you can change the path to the web push service worker. -The service worker should be accessible at the path you specify. +If the default path is not suitable for your application, you can customize the path to the web push service worker. For example, the web push service worker is placed at `public/service` folder and is accessible at `https://yourdomain.com/service/notificationapi-service-worker.js` @@ -124,7 +123,7 @@ For example, the web push service worker is placed at `public/service` folder an @@ -133,16 +132,16 @@ For example, the web push service worker is placed at `public/service` folder an ; ``` -### webPushOptInMessage +### Customizing the web push opt in message -The `webPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (`true` or `'AUTOMATIC'`) or suppresses the prompt (`false`). It is set to `"AUTOMATIC"` by default. +By default we automatically figure out if your user should see the web push opt in message or not. You can Customizing it like the following: ```jsx @@ -508,6 +507,12 @@ notificationapi.markAsArchived(['trackingId1', 'trackingId2']); notificationapi.markAsClicked('trackingId'); ``` +## asking for web push opt in + +```javascript +notificationapi.setWebPushOptIn(true); +``` + ## Concepts ### How does it work? @@ -551,22 +556,6 @@ notificationapi .then((result) => console.log(result)); ``` -## setWebPushOptIn - -To request permission for notifications, place the following code inside an async function, and call that function when the user interacts with your application. - -```javascript -notificiationapi.setWebPushOptIn(true); -``` - -## setWebPushOptInMessage - -The `setWebPushOptInMessage` controls whether the browser automatically prompts users for notification permissions (`true` or `'AUTOMATIC'`) or suppresses the prompt (`false`). It is set to `"AUTOMATIC"` by default. It is an alternative to `webPushOptInMessage` inside the `` component. - -```javascript -notificationapi.setWebPushOptInMessage('AUTOMATIC'); -``` - From c3b5b858d6bfc7e2beecf90d73f6e508735c874d Mon Sep 17 00:00:00 2001 From: mbasadi Date: Thu, 12 Dec 2024 13:09:13 -0500 Subject: [PATCH 14/15] typo --- docs/guides/web-push.md | 6 +++--- docs/reference/react-sdk.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/guides/web-push.md b/docs/guides/web-push.md index 64be1f7..0ce16d1 100644 --- a/docs/guides/web-push.md +++ b/docs/guides/web-push.md @@ -67,10 +67,10 @@ import { NotificationAPIProvider } from '@notificationapi/react'; {/* your protected routes */} diff --git a/docs/reference/react-sdk.md b/docs/reference/react-sdk.md index 420c970..a4cde40 100644 --- a/docs/reference/react-sdk.md +++ b/docs/reference/react-sdk.md @@ -110,7 +110,7 @@ Change the deafult notification sound to include your own: ### Customizing the path to web push service worker -The service worker must be placed in the public folder. +The service workermust be placed in the public folder. By default we assume the service worker file is publicly associable at `https://yourdomain.com/notificationapi-service-worker.js` From d1e77576ebf2b5eeb33c9cee5774cd7950f40edb Mon Sep 17 00:00:00 2001 From: mbasadi Date: Thu, 12 Dec 2024 13:14:27 -0500 Subject: [PATCH 15/15] typo --- docs/reference/react-sdk.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/reference/react-sdk.md b/docs/reference/react-sdk.md index a4cde40..d53c691 100644 --- a/docs/reference/react-sdk.md +++ b/docs/reference/react-sdk.md @@ -110,7 +110,7 @@ Change the deafult notification sound to include your own: ### Customizing the path to web push service worker -The service workermust be placed in the public folder. +The service worker must be placed in the public folder. By default we assume the service worker file is publicly associable at `https://yourdomain.com/notificationapi-service-worker.js` @@ -134,7 +134,7 @@ For example, the web push service worker is placed at `public/service` folder an ### Customizing the web push opt in message -By default we automatically figure out if your user should see the web push opt in message or not. You can Customizing it like the following: +By default we automatically figure out if your user should see the web push opt in message or not. You can customizing it like the following: ```jsx