Notification

When to Use

• Mandatory policy change acknowledgement ("You must read and accept this before continuing")
• Security alert delivery with confirmation of receipt
• Workflow status updates that require the user to note they have seen the result
• System maintenance notices requiring user acknowledgement for compliance
• AI-generated insights delivered to a specific user with read-receipt tracking

Live Mockup — Info Notification

Live Mockup — Warning Notification

Request Payload Schema

interface NotificationPayload {
  /** Main notification message */
  message: string;

  /** Visual severity: 'info' | 'warning' | 'danger' (default: 'info') */
  severity?: 'info' | 'warning' | 'danger';

  /** Optional: link to show as a secondary action */
  actionUrl?: string;

  /** Label for the action link (default: "View Details") */
  actionLabel?: string;
}

Full Request Example

await sendInteraction({
  type: 'notification',
  targetUserId: 'usr_all_employees',   // role-targeting
  title: 'Security Policy Updated',
  payload: {
    message: 'Our password policy has changed. All accounts now require a minimum of 14 characters and MFA must be enabled. Changes take effect 2026-06-01.',
    severity: 'info',
    actionUrl: 'https://intranet.acme.com/policies/password-v4',
    actionLabel: 'View Full Policy'
  },
  timeoutMs: 604_800_000   // 7 days — persists until acknowledged
});

Response Schema

interface NotificationResponse {
  interactionId: string;
  respondedBy:   string;
  outcome:       'acknowledged';
  data: {
    /** ISO 8601 timestamp when the user clicked Acknowledge */
    timestamp: string;
  };
  timestamp: string;
}

Response Example

{
  "interactionId": "int_01HXNOTIF44Z",
  "respondedBy":   "usr_alice",
  "outcome":       "acknowledged",
  "data": {
    "timestamp": "2026-05-25T14:08:33Z"
  },
  "timestamp": "2026-05-25T14:08:33Z"
}

Handling the Response

// You can use useInteractionCallback to track acknowledgement without blocking
import { useInteractionCallback } from 'edge-interact-react';

function PolicyBanner({ interactionId }: { interactionId: string }) {
  const { isAcknowledged, response } = useInteractionCallback(interactionId);

  useEffect(() => {
    if (isAcknowledged) {
      // Record compliance event
      complianceApi.recordAcknowledgement({
        userId: response!.respondedBy,
        policy: 'password-v4',
        at:     response!.data.timestamp
      });
    }
  }, [isAcknowledged]);

  return isAcknowledged ? null : <PolicyBannerUI />;
}

Notification vs. Simple Toast