# Notifications / Notification Channels Notification channel preferences for government service portals including channel toggles, frequency settings, per-service fine-tuning, mandatory notifications, WhatsApp opt-in, and subscription management. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-notifications-notification-channels--notification-preferences ## Pattern variants - Notification Preferences: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-notifications-notification-channels--notification-preferences - Notification Status Update: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-notifications-notification-channels--notification-status-update ## When to use this pattern Use Notifications / Notification Channels when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Notifications / Notification Channels. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Notification Preferences — Notification Preferences HTML: ```html

Notification Preferences

Control how and when the portal contacts you. Changes are saved automatically.

Notification channels

Choose which channels the portal can use to reach you.

  • SMS +91 98765 43210
  • Email r*****h@gmail.com
  • App notifications Push alerts on this device
  • WhatsApp Opt-in required

Update frequency

Decide how often the portal batches and sends your notifications.

Per-service preferences

Fine-tune which notifications you receive for each service you use.

  • Status updates When your application changes stage
  • Action reminders When you need to upload or pay
  • Certificate expiry Renewal reminders before expiry

  • Status updates When your application changes stage
  • Action reminders When you need to upload or pay
  • Certificate expiry Renewal reminders before expiry

Mandatory notifications

These critical alerts keep you informed of legal and time-sensitive actions. Government policy requires that they stay on.

  • SLA breach alerts Locked
    Sent when an application crosses its service guarantee deadline.
  • Rejection notices Locked
    Sent if an application is rejected, with the reason and next steps.
  • Legal & payment deadlines Locked
    Sent for statutory deadlines and fee payment due dates.

WhatsApp notifications

Receive updates on WhatsApp. This channel is strictly opt-in and needs your explicit consent.

What you will receive on WhatsApp

  • check Application status changes
  • check Appointment reminders (D-1 and H-1)
  • check Action-required alerts with quick links

Manage all subscriptions

A complete overview of every notification type and a quick way to opt out of optional ones.

Optional — You can turn these off
  • Status updates Stage changes across all your applications
  • Action reminders Upload and payment reminders
  • Certificate expiry Renewal reminders before documents expire
  • Promotional updates New services and scheme announcements
Mandatory — Required by government policy
  • SLA breach alerts Service guarantee deadline notifications
    Always on
  • Rejection notices Application rejection with reasons
    Always on
``` React: ```jsx import React from 'react'; const NotificationsNotificationChannelsExample1Demo = () => ( <>

Notification Preferences

Control how and when the portal contacts you. Changes are saved automatically.

{/* Tab 1: Notification Channels */}

Notification channels

Choose which channels the portal can use to reach you.

  • SMS +91 98765 43210
  • Email r*****h@gmail.com
  • App notifications Push alerts on this device
  • WhatsApp Opt-in required
{/* Tab 2: Update Frequency */}

Update frequency

Decide how often the portal batches and sends your notifications.

{/* Tab 3: Per Service Preferences */}

Per-service preferences

Fine-tune which notifications you receive for each service you use.

  • Status updates When your application changes stage
  • Action reminders When you need to upload or pay
  • Certificate expiry Renewal reminders before expiry

  • Status updates When your application changes stage
  • Action reminders When you need to upload or pay
  • Certificate expiry Renewal reminders before expiry
{/* Tab 4: Mandatory Notifications */}

Mandatory notifications

These critical alerts keep you informed of legal and time-sensitive actions. Government policy requires that they stay on.

  • SLA breach alerts Locked
    Sent when an application crosses its service guarantee deadline.
  • Rejection notices Locked
    Sent if an application is rejected, with the reason and next steps.
  • Legal & payment deadlines Locked
    Sent for statutory deadlines and fee payment due dates.
{/* Tab 5: WhatsApp Notifications */}

WhatsApp notifications

Receive updates on WhatsApp. This channel is strictly opt-in and needs your explicit consent.

What you will receive on WhatsApp

  • check Application status changes
  • check Appointment reminders (D-1 and H-1)
  • check Action-required alerts with quick links
{/* Tab 6: Manage all Subscriptions */}

Manage all subscriptions

A complete overview of every notification type and a quick way to opt out of optional ones.

Optional — You can turn these off
  • Status updates Stage changes across all your applications
  • Action reminders Upload and payment reminders
  • Certificate expiry Renewal reminders before documents expire
  • Promotional updates New services and scheme announcements
Mandatory — required by government policy
  • SLA breach alerts Service guarantee deadline notifications
    Always on
  • Rejection notices Application rejection with reasons
    Always on
); export default NotificationsNotificationChannelsExample1Demo; ``` Angular: ```html

Notification Preferences

Control how and when the portal contacts you. Changes are saved automatically.

Notification channels

Choose which channels the portal can use to reach you.

  • SMS +91 98765 43210
  • Email r*****h@gmail.com
  • App notifications Push alerts on this device
  • WhatsApp Opt-in required

Update frequency

Decide how often the portal batches and sends your notifications.

Per-service preferences

Fine-tune which notifications you receive for each service you use.

  • Status updates When your application changes stage
  • Action reminders When you need to upload or pay
  • Certificate expiry Renewal reminders before expiry

  • Status updates When your application changes stage
  • Action reminders When you need to upload or pay
  • Certificate expiry Renewal reminders before expiry

Mandatory notifications

These critical alerts keep you informed of legal and time-sensitive actions. Government policy requires that they stay on.

  • SLA breach alerts Locked
    Sent when an application crosses its service guarantee deadline.
  • Rejection notices Locked
    Sent if an application is rejected, with the reason and next steps.
  • Legal & payment deadlines Locked
    Sent for statutory deadlines and fee payment due dates.

WhatsApp notifications

Receive updates on WhatsApp. This channel is strictly opt-in and needs your explicit consent.

What you will receive on WhatsApp

  • check Application status changes
  • check Appointment reminders (D-1 and H-1)
  • check Action-required alerts with quick links

Manage all subscriptions

A complete overview of every notification type and a quick way to opt out of optional ones.

Optional — You can turn these off
  • Status updates Stage changes across all your applications
  • Action reminders Upload and payment reminders
  • Certificate expiry Renewal reminders before documents expire
  • Promotional updates New services and scheme announcements
Mandatory — Required by government policy
  • SLA breach alerts Service guarantee deadline notifications
    Always on
  • Rejection notices Application rejection with reasons
    Always on
``` ### 2. Notification Status Update — Status Update HTML: ```html

Notification Channels

info
Status updated just now Your application moved to Under Review. This banner auto-dismisses in 5 seconds.
arrow_back Back

Income Certificate

Application ID · INC-2026-MH-04127
Under review
8 days left
Application journey Every step from submission to issuance
check
07 Apr 2026, 10:24 AM Application Submitted
check
08 Apr 2026, 11:33 AM
Documents Verified
check
10 Apr 2026, 11:33 AM
Officer Review
check
11 Apr 2026 (Est)
Certificate Will Be Issued
11 days remaining Pending
``` React: ```jsx import React from 'react'; const NotificationsNotificationChannelsExample2Demo = () => ( <>

Notification Channels

info
Status updated just now Your application moved to Under Review. This banner auto-dismisses in 5 seconds.
arrow_back Back

Income Certificate

Application ID · INC-2026-MH-04127
Under review
8 days left
Application journey Every step from submission to issuance
check
07 Apr 2026, 10:24 AM Application Submitted
check
08 Apr 2026, 11:33 AM
Documents Verified
check
10 Apr 2026, 11:33 AM
Officer Review
check
11 Apr 2026 (Est)
Certificate Will Be Issued
11 days remaining Pending
); export default NotificationsNotificationChannelsExample2Demo; ``` Angular: ```html

Notification Channels

info
Status updated just now Your application moved to Under Review. This banner auto-dismisses in 5 seconds.
arrow_back Back

Income Certificate

Application ID · INC-2026-MH-04127
Under review
8 days left
Application journey Every step from submission to issuance
check
07 Apr 2026, 10:24 AM Application Submitted
check
08 Apr 2026, 11:33 AM
Documents Verified
check
10 Apr 2026, 11:33 AM
Officer Review
check
11 Apr 2026 (Est)
Certificate Will Be Issued
11 days remaining Pending
```