Skip to content

Commit 08bbad7

Browse files
djabarovgeorgedjabarovgeorge
authored
fix: update subscriberId to subscriber in Inbox component documentation (#828)
* fix: update subscriberId to subscriber in Inbox component documentation * fix: replace subscriberId with subscriber in documentation and code examples
1 parent 9357fb3 commit 08bbad7

22 files changed

+153
-85
lines changed

‎content/docs/platform/concepts/tenants.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ When using the Inbox feature, you can use the tenant identifier to group notific
4040
import { Inbox } from "@novu/react";
4141

4242
function InboxComponent({ tenantId, userId }) {
43-
return <Inbox subscriberId={`${tenantId}:${userId}`} />;
43+
return <Inbox subscriber={`${tenantId}:${userId}`} />;
4444
}
4545
```
4646

‎content/docs/platform/inbox/react/components/bell.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ function Novu() {
1919
return (
2020
<Inbox
2121
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
22-
subscriberId="YOUR_SUBSCRIBER_ID"
22+
subscriber="YOUR_SUBSCRIBER_ID"
2323
renderBell={(unreadCount) => {
2424
return (
2525
<div className="bg-purple-300 p-4 inline-flex">
@@ -49,7 +49,7 @@ import { Inbox, Bell, Notifications } from '@novu/react';
4949
import './styles.css';
5050

5151
const PopoverDemo = () => (
52-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
52+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
5353
<Popover.Root>
5454
<Popover.Trigger asChild>
5555
<Bell

‎content/docs/platform/inbox/react/components/inbox-content.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
2020

2121
export default function CustomPopoverPage() {
2222
return (
23-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
23+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
2424
<Popover>
2525
<PopoverTrigger>
2626
<Bell />
@@ -44,7 +44,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
4444

4545
export default function CustomPopoverPage() {
4646
return (
47-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
47+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
4848
<Popover>
4949
<PopoverTrigger>
5050
<Bell />

‎content/docs/platform/inbox/react/components/inbox.mdx

+46-18
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { Inbox } from '@novu/react';
1515

1616
function Novu() {
1717
return (
18-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID" />
18+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID" />
1919
);
2020
}
2121
```
@@ -38,7 +38,7 @@ The Inbox component uses the `routerPush` prop to make your notifications naviga
3838
return (
3939
<Inbox
4040
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
41-
subscriberId="YOUR_SUBSCRIBER_ID"
41+
subscriber="YOUR_SUBSCRIBER_ID"
4242
/>
4343
);
4444
}
@@ -56,7 +56,7 @@ The Inbox component uses the `routerPush` prop to make your notifications naviga
5656
return (
5757
<Inbox
5858
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
59-
subscriberId="YOUR_SUBSCRIBER_ID"
59+
subscriber="YOUR_SUBSCRIBER_ID"
6060
routerPush={(path: string) => navigate(path)}
6161
/>
6262
);
@@ -75,7 +75,7 @@ The Inbox component uses the `routerPush` prop to make your notifications naviga
7575
return (
7676
<Inbox
7777
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
78-
subscriberId="YOUR_SUBSCRIBER_ID"
78+
subscriber="YOUR_SUBSCRIBER_ID"
7979
routerPush={(path: string) => navigate(path)}
8080
/>
8181
);
@@ -92,7 +92,7 @@ The Inbox component uses the `routerPush` prop to make your notifications naviga
9292
return (
9393
<Inbox
9494
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
95-
subscriberId="YOUR_SUBSCRIBER_ID"
95+
subscriber="YOUR_SUBSCRIBER_ID"
9696
routerPush={(path: string) => navigate(path)}
9797
/>
9898
);
@@ -111,7 +111,7 @@ The Inbox component uses the `routerPush` prop to make your notifications naviga
111111
return (
112112
<Inbox
113113
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
114-
subscriberId="YOUR_SUBSCRIBER_ID"
114+
subscriber="YOUR_SUBSCRIBER_ID"
115115
routerPush={(path: string) => navigate(path)}
116116
/>
117117
);
@@ -137,7 +137,7 @@ function Novu() {
137137
return (
138138
<Inbox
139139
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
140-
subscriberId="YOUR_SUBSCRIBER_ID"
140+
subscriber="YOUR_SUBSCRIBER_ID"
141141
onNotificationClick={(notification) => {
142142
// your logic to handle notification click
143143
}}
@@ -157,7 +157,7 @@ function Novu() {
157157
return (
158158
<Inbox
159159
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
160-
subscriberId="YOUR_SUBSCRIBER_ID"
160+
subscriber="YOUR_SUBSCRIBER_ID"
161161
onPrimaryActionClick={(notification) => {
162162
// your logic to handle primary action click
163163
}}
@@ -184,7 +184,7 @@ function Novu() {
184184
<>
185185
<Inbox
186186
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
187-
subscriberId="YOUR_SUBSCRIBER_ID"
187+
subscriber="YOUR_SUBSCRIBER_ID"
188188
open={open}
189189
/>
190190
<button onClick={() => setOpen(!open)}>Toggle Inbox</button>
@@ -202,7 +202,7 @@ function Novu() {
202202
return (
203203
<Inbox
204204
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
205-
subscriberId="YOUR_SUBSCRIBER_ID"
205+
subscriber="YOUR_SUBSCRIBER_ID"
206206
renderNotification={(notification) => (
207207
<div>
208208
<h3>{notification.subject}</h3>
@@ -225,7 +225,7 @@ function Novu() {
225225
return (
226226
<Inbox
227227
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
228-
subscriberId="YOUR_SUBSCRIBER_ID"
228+
subscriber="YOUR_SUBSCRIBER_ID"
229229
renderSubject={(notification) => (
230230
<div>
231231
<p>{notification.subject}</p>
@@ -247,7 +247,7 @@ function Novu() {
247247
return (
248248
<Inbox
249249
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
250-
subscriberId="YOUR_SUBSCRIBER_ID"
250+
subscriber="YOUR_SUBSCRIBER_ID"
251251
renderBody={(notification) => (
252252
<div>
253253
<p>{notification.body}</p>
@@ -267,7 +267,7 @@ function Novu() {
267267
return (
268268
<Inbox
269269
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
270-
subscriberId="YOUR_SUBSCRIBER_ID"
270+
subscriber="YOUR_SUBSCRIBER_ID"
271271
renderBell={(unreadCount) => (
272272
<div>
273273
<span>{unreadCount}</span>
@@ -293,18 +293,47 @@ function Novu() {
293293
return (
294294
<Inbox
295295
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
296-
subscriberId="YOUR_SUBSCRIBER_ID"
296+
subscriber="YOUR_SUBSCRIBER_ID"
297297
preferencesFilter={{ tags: ['general', 'admin', 'security'] }}
298298
/>
299299
);
300300
}
301301
```
302302

303+
### Subscriber Data Upsert
304+
305+
The `<Inbox />` component supports real-time subscriber data updates when properly configured with HMAC authentication. This allows you to update subscriber information directly through the component without making separate API calls:
306+
307+
```tsx
308+
import { Inbox } from '@novu/react';
309+
310+
function Novu() {
311+
return (
312+
<Inbox
313+
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
314+
subscriberHash="GENERATED_HMAC_HASH" // Generated on your backend
315+
subscriber={{
316+
subscriberId: "YOUR_SUBSCRIBER_ID",
317+
firstName: "John",
318+
lastName: "Doe",
319+
email: "[email protected]"
320+
}}
321+
/>
322+
);
323+
}
324+
```
325+
326+
<Callout type="info">
327+
To enable real-time subscriber data updates, make sure to provide the `subscriberHash` for secure HMAC authentication. This allows you to update subscriber data directly through the component while maintaining security.
328+
</Callout>
329+
330+
Learn more about setting up HMAC authentication in the [Enabling HMAC Encryption](/platform/inbox/react/production#hmac-encryption) guide.
331+
303332
### Data object
304333

305334
The `data` object is a key-value store within each notification, used to extend <Method href="/platform/inbox/react/components/inbox">{`<Inbox />`}</Method> notifications by embedding step-specific metadata. It provides flexible notification handling, supporting both static and dynamic values:
306335

307-
- **Static Values**: These are hardcoded into the notification step—for example, a string like "status": "merged" or "icon": "heart". These values don’t change based on the recipient or context.
336+
- **Static Values**: These are hardcoded into the notification step—for example, a string like "status": "merged" or "icon": "heart". These values don't change based on the recipient or context.
308337
- **Dynamic Values**: These values are derived from subscriber or payload data. For instance, they can reference `subscriber.firstName` or `payload.issueId` to tailor notifications for individual users.
309338

310339
You can pass data such as:
@@ -324,7 +353,7 @@ import { Inbox } from '@novu/react';
324353

325354
<Inbox
326355
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
327-
subscriberId="YOUR_SUBSCRIBER_ID"
356+
subscriber="YOUR_SUBSCRIBER_ID"
328357
renderNotification={(notification) => (
329358
<div>
330359
<p>{notification.data?.customKey}</p>
@@ -348,5 +377,4 @@ declare global {
348377
}
349378
```
350379

351-
This lets TypeScript infer the structure of `notification.data`, preventing errors when accessing properties. However, as not all notifications include the same keys, check properties for existence before usage.
352-
380+
This lets TypeScript infer the structure of `notification.data`, preventing errors when accessing properties. However, as not all notifications include the same keys, check properties for existence before usage.

‎content/docs/platform/inbox/react/components/index.mdx

+5-5
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ A trigger button usually located at the top right corner of the screen, which tr
5252
import { Inbox } from '@novu/react';
5353

5454
function Novu() {
55-
return <Inbox subscriberId="1" applicationIdentifier="1" />;
55+
return <Inbox subscriber="1" applicationIdentifier="1" />;
5656
}
5757
```
5858

@@ -65,7 +65,7 @@ import { BellIcon } from './icons';
6565

6666
function Novu() {
6767
return (
68-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
68+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
6969
<Bell
7070
renderBell={(unreadCount) => (
7171
<div>
@@ -91,7 +91,7 @@ import { Inbox, Notifications } from '@novu/react';
9191

9292
function Novu() {
9393
return (
94-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
94+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
9595
{showSideMenu && <Notifications />}
9696
</Inbox>
9797
);
@@ -107,7 +107,7 @@ import { Inbox, Notifications } from '@novu/react';
107107

108108
function Novu() {
109109
return (
110-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
110+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
111111
<Notifications />
112112
</Inbox>
113113
);
@@ -122,7 +122,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover
122122

123123
export default function CustomPopoverPage() {
124124
return (
125-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
125+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
126126
<Popover>
127127
<PopoverTrigger>
128128
<Bell />

‎content/docs/platform/inbox/react/components/notifications.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Inbox, Notifications } from '@novu/react';
1414

1515
function Novu() {
1616
return (
17-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
17+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
1818
<Notifications />
1919
</Inbox>
2020
);
@@ -30,7 +30,7 @@ import { Inbox, Notifications } from '@novu/react';
3030

3131
function Novu() {
3232
return (
33-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
33+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
3434
<Notifications
3535
renderNotification={(notification) => (
3636
<div>

‎content/docs/platform/inbox/react/components/preferences.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { Inbox, Preferences } from '@novu/react';
2222

2323
function Novu() {
2424
return (
25-
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriberId="YOUR_SUBSCRIBER_ID">
25+
<Inbox applicationIdentifier="YOUR_APPLICATION_IDENTIFIER" subscriber="YOUR_SUBSCRIBER_ID">
2626
<Preferences />
2727
</Inbox>
2828
);

‎content/docs/platform/inbox/react/hooks.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ Follow these steps to get started with building your custom inbox UI:
3030
function App() {
3131
return (
3232
<NovuProvider
33-
subscriberId="SUBSCRIBER_ID"
33+
subscriber="SUBSCRIBER_ID"
3434
applicationIdentifier="APPLICATION_IDENTIFIER"
3535
>
3636
{/* Your app components */}

‎content/docs/platform/inbox/react/localization.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function Novu() {
1515
return (
1616
<Inbox
1717
applicationIdentifier="YOUR_APPLICATION_IDENTIFIER"
18-
subscriberId="YOUR_SUBSCRIBER_ID"
18+
subscriber="YOUR_SUBSCRIBER_ID"
1919
localization={{
2020
// Filter dropdown options
2121
'inbox.filters.dropdownOptions.unread': 'Unread only',

0 commit comments

Comments
 (0)