Skip to content

Commit f86683d

Browse files
committed
Docs for the inbox Schedule page
1 parent 9f3c740 commit f86683d

File tree

7 files changed

+105
-2
lines changed

7 files changed

+105
-2
lines changed
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"title": "Customize and configure",
33
"icon": "SlidersHorizontal",
4-
"pages": ["styling", "icons", "tabs", "preferences", "snooze", "data-object"],
4+
"pages": ["styling", "icons", "tabs", "preferences", "data-object"],
55
"description": "Learn how to configure your inbox with styling, tabs, preferences, data objects, and snooze functionality"
66
}
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"title": "<Inbox /> Features",
3+
"icon": "Blocks",
4+
"pages": ["snooze", "schedule"],
5+
"description": "Learn how to customize the appearance and behavior of the inbox component to match your application’s design system."
6+
}
Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
---
2+
title: 'Schedule'
3+
description: "Learn how to configure routing and interaction behavior for notifications using routerPush and click handlers."
4+
icon: 'CalendarCheck'
5+
---
6+
7+
The **Schedule** feature in the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method> lets subscribers control when they want to receive notifications. By defining availability hours, subscribers can pause in-app notifications outside their chosen time range.
8+
9+
![](/images/inbox/schedule.png)
10+
11+
<Callout>Notifications from critical workflows are never paused and will always be delivered, regardless of schedule settings.</Callout>
12+
13+
## How Schedule works
14+
15+
The schedule functionality is based on a clear set of rules controlled by the subscriber within the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method>. When a subscriber enables their schedule, they can then manage their availability for each day of the week.
16+
17+
### Daily availability
18+
For any day that the main schedule is active, there are two possible states:
19+
20+
- **Day is enabled**: If a day is toggled on, the subscriber must set a time range. Notifications will only be delivered within these hours.
21+
22+
- **Day is disabled**: If a day is toggled off, the subscriber will not receive any non-critical notifications for that entire day.
23+
24+
### Automatic timezone handling
25+
26+
The schedule operates in the subscriber's local timezone, detected automatically from their system settings. There is no need for manual configuration.
27+
28+
For example, if a subscriber in Warsaw sets their schedule from 9:00 AM to 5:00 PM, they will receive notifications during those hours in Central European Time (CET).
29+
30+
## Manage Schedule
31+
32+
The schedule UI in the preferences section is designed to be intuitive, giving subscribers several tools to quickly configure their availability.
33+
34+
You can access **Schedule** from the **Preferences** section of the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method> UI. By default, scheduling is turned off, and all notifications are delivered normally.
35+
36+
### Enable the main schedule
37+
38+
The entire feature is controlled by a main schedule toggle. When a subscriber turns this on, they can begin configuring individual days. When it's off, all other settings are inactive, and notifications are delivered normally.
39+
40+
### Setting daily availability
41+
42+
For each day of the week, the subscriber can:
43+
44+
- Use the toggle next to the day's name to activate or deactivate it.
45+
- If activated, use the time-selector dropdowns to set a "from" and "to" time. The time pickers are set to 30-minute increments for ease of use.
46+
47+
### Edit or remove schedules
48+
49+
Existing availability can be adjusted at any time. Subscribers can:
50+
- Change the start and end times for a day.
51+
- Re-enable a previously disabled day.
52+
- Clear a schedule entirely to return to unrestricted delivery.
53+
54+
### Copying times to multiple days
55+
56+
To make setup faster, subscribers can configure the time for one day and apply it to others in a few clicks:
57+
58+
1. Set the desired time range for a single day (e.g., Wednesday from 9:00 AM to 5:00 PM).
59+
2. Click the "Copy times to..." button associated with that day.
60+
3. In the menu that appears, select the other days of the week to apply this schedule to.
61+
4. Click "Apply." The selected days will automatically be enabled and updated with the new time range.
62+
63+
![Copying times to multiple days](/images/inbox/schedule.gif)
64+
65+
### Automatic saving
66+
67+
All changes made in the schedule interface are saved automatically in the background. The UI updates optimistically, providing a seamless experience without requiring the subscriber to click a "Save" button.
68+
69+
## Set default schedule for Subscribers
70+
71+
You can provide a default schedule for your subscribers by passing the `defaultSchedule` prop to the <Method href="/platform/inbox/overview">{`<Inbox />`}</Method>. This is useful for pre-configuring a recommended schedule that your subscribers can then customize.
72+
73+
This default schedule will only be applied if a subscriber has not yet configured their own schedule. Once they make any changes, their custom schedule will take precedence.
74+
75+
```tsx
76+
import { Inbox } from '@novu/react';
77+
78+
function InboxWithDefaultSchedule() {
79+
return (
80+
<Inbox
81+
applicationIdentifier="YOUR_APP_IDENTIFIER"
82+
subscriberId="YOUR_SUBSCRIBER_ID"
83+
defaultSchedule={{
84+
isEnabled: true,
85+
weeklySchedule: {
86+
tuesday: {
87+
isEnabled: true,
88+
hours: [{start: '09:00 AM', end: '07:00 PM'}]
89+
}
90+
}
91+
}}
92+
/>
93+
);
94+
}
95+
96+
export default InboxWithDefaultSchedule;
97+
```
File renamed without changes.

content/docs/platform/inbox/meta.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"pages": [
33
"overview",
44
"setup-inbox",
5-
"navigation-and-events",
5+
"features",
66
"configuration",
77
"advanced-customization",
88
"advanced-concepts",

public/images/inbox/schedule.gif

6.03 MB
Loading

public/images/inbox/schedule.png

1.44 MB
Loading

0 commit comments

Comments
 (0)