> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Notifications

> Engage users beyond chat with real-time and scheduled notifications across Push, Email, and SMS.

<div className="relative w-full flex items-center justify-center h-80 overflow-hidden">
  <div className="absolute inset-0 bg-primary dark:bg-primary-light opacity-[0.05]" />

  <div className="max-w-[70rem] mx-auto px-5">
    <Columns cols={2} className="items-center gap-x-12">
      <div className="flex flex-col justify-center h-full text-center md:text-left">
        <h1 className="text-gray-700 dark:text-white text-[2.2rem] font-semibold">Notifications</h1>

        <p className="text-lg text-gray-600">
          Engage users beyond chat with real-time and scheduled notifications across Push, Email, and SMS.
        </p>

        <p className="text-gray-600 dark:text-gray-300 mt-3">
          Keep users informed and connected with CometChat's robust notification system, designed to enhance user engagement and retention.
        </p>
      </div>

      <div className="flex flex-col items-center justify-center h-full">
        <img src="https://mintcdn.com/cometchat-22654f5b/HxM9nuCOhaEOdKpp/images/notifications.png?fit=max&auto=format&n=HxM9nuCOhaEOdKpp&q=85&s=8cd138e18f1adbe6fba0fb38bf33fe3a" alt="Notifications UI preview" className="w-full max-w-[380px]" width="982" height="703" data-path="images/notifications.png" />
      </div>
    </Columns>
  </div>
</div>

<div className="mt-8 mb-8 max-w-[70rem] mx-auto px-5">
  <div className="mb-12">
    <h2 className="text-gray-700 dark:text-white text-2xl font-semibold">Push Notifications</h2>
    <p className="text-gray-600 dark:text-gray-300">Real-time alerts for new messages, calls, and events routed through FCM or APNs.</p>

    <div className="mt-6">
      <AccordionGroup>
        <Accordion title="How it works">
          <Steps>
            <Step title="Set up providers">
              Configure FCM/APNs keys and register device tokens via SDK or REST.
            </Step>

            <Step title="Listen and build payloads">
              CometChat watches chat, calling, and custom events and assembles payloads from your templates.
            </Step>

            <Step title="Deliver with guardrails">
              Delivery handles routing, retries, quiet hours, and logging across platforms.
            </Step>
          </Steps>
        </Accordion>
      </AccordionGroup>
    </div>

    <h4 className="font-semibold text-gray-700 dark:text-white mb-3 mt-6">Supported platforms</h4>

    <CardGroup cols={4}>
      <Card title="Android" icon={<img src="/docs/images/icons/android.svg" alt="Android" />} href="/notifications/android-push-notifications" horizontal />

      <Card title="iOS (APNS)" icon={<img src="/docs/images/icons/swift.svg" alt="iOS (APNS)" />} href="/notifications/ios-apns-push-notifications" horizontal />

      <Card title="iOS (FCM)" icon={<img src="/docs/images/icons/swift.svg" alt="iOS (FCM)" />} href="/notifications/ios-fcm-push-notifications" horizontal />

      <Card title="Flutter (Android)" icon={<img src="/docs/images/icons/flutter.svg" alt="Flutter (Android)" />} href="/notifications/flutter-push-notifications-android" horizontal />

      <Card title="Flutter (iOS)" icon={<img src="/docs/images/icons/flutter.svg" alt="Flutter (iOS)" />} href="/notifications/flutter-push-notifications-ios" horizontal />

      <Card title="React Native (Android)" icon={<img src="/docs/images/icons/react.svg" alt="React Native (Android)" />} href="/notifications/react-native-push-notifications-android" horizontal />

      <Card title="React Native (iOS)" icon={<img src="/docs/images/icons/react.svg" alt="React Native (iOS)" />} href="/notifications/react-native-push-notifications-ios" horizontal />

      <Card title="Web" icon={<img src="/docs/images/icons/react.svg" alt="Web" />} href="/notifications/web-push-notifications" horizontal />
    </CardGroup>
  </div>

  <div className="mb-12">
    <h2 className="text-gray-700 dark:text-white text-2xl font-semibold">Email Notifications</h2>
    <p className="text-gray-600 dark:text-gray-300">Fallback emails sent only when a chat message stays unread beyond your configurable wait window.</p>

    <div className="mt-6">
      <AccordionGroup>
        <Accordion title="How it works">
          <Steps>
            <Step title="Choose templates">
              Set up HTML templates for unread-message alerts (e.g., subject/body with sender and message preview).
            </Step>

            <Step title="Set wait window and recipients">
              Define how long to wait for the message to be read; if it is still unread, CometChat triggers the email to the intended recipient.
            </Step>

            <Step title="Set preferences">
              Honor user/channel preferences and regional rules before sending.
            </Step>
          </Steps>
        </Accordion>
      </AccordionGroup>
    </div>

    <h4 className="font-semibold text-gray-700 dark:text-white mb-3 mt-6">Get started</h4>

    <CardGroup cols={3}>
      <Card title="Email Overview" href="/notifications/email-overview" horizontal />

      <Card title="Integration" href="/notifications/email-integration" horizontal />

      <Card title="Templates" href="/notifications/email-templates" horizontal />
    </CardGroup>
  </div>

  <div className="mb-12">
    <h2 className="text-gray-700 dark:text-white text-2xl font-semibold">SMS Notifications</h2>
    <p className="text-gray-600 dark:text-gray-300">SMS fallbacks fire only when a chat message remains unread after your configurable wait window.</p>

    <div className="mt-6">
      <AccordionGroup>
        <Accordion title="How it works">
          <Steps>
            <Step title="Connect your SMS provider">
              Connect credentials and map the “message unread past wait window” trigger.
            </Step>

            <Step title="Compose lightweight payloads">
              Keep payloads concise (sender + message snippet, optional deep link to the conversation).
            </Step>

            <Step title="Send with compliance">
              CometChat handles routing, retries, user preferences, and regional compliance.
            </Step>
          </Steps>
        </Accordion>
      </AccordionGroup>
    </div>

    <h4 className="font-semibold text-gray-700 dark:text-white mb-3 mt-6">Get started</h4>

    <CardGroup cols={3}>
      <Card title="SMS Overview" href="/notifications/sms-overview" horizontal />

      <Card title="Integration" href="/notifications/sms-integration" horizontal />

      <Card title="Templates" href="/notifications/sms-templates" horizontal />
    </CardGroup>
  </div>

  <div className="mb-12">
    <h2 className="text-gray-700 dark:text-white text-2xl font-semibold mb-4">
      Push Notification Demos
    </h2>

    <p className="text-gray-600 dark:text-gray-300 mb-6">
      Show working experiences just like Chat & Messaging: clones, payloads, and end-to-end journeys.
    </p>

    <CardGroup cols={4}>
      <Card title="Push Notification Sample App (Android)" href="https://github.com/cometchat/cometchat-uikit-android/tree/v5/sample-app-kotlin%2Bpush-notification" cta="View on GitHub" horizontal />

      <Card title="Push Notification Sample App (iOS - FCM)" href="https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleAppPushNotificationAPNs/Push%20Notification%20%2B%20VoIP" cta="View on GitHub" horizontal />

      <Card title="Push Notification Sample App (iOS - APNs)" href="https://github.com/cometchat/cometchat-uikit-ios/tree/v5/SampleAppPushNotificationAPNs/Push%20Notification%20%2B%20VoIP" cta="View on GitHub" horizontal />

      <Card title="Push Notification Sample App (Flutter - Android)" href="https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app_push_notifications" cta="View on GitHub" horizontal />

      <Card title="Push Notification Sample App (Flutter - iOS)" href="https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/sample_app_push_notifications" cta="View on GitHub" horizontal />

      <Card title="Push Notification Sample App (React Native)" href="https://github.com/cometchat/cometchat-uikit-react-native/tree/v5/examples/SampleAppWithPushNotifications" cta="View on GitHub" horizontal />

      {/* <Card
                title="Push Notification Sample App (Web)" 
                href="https://github.com/cometchat/cometchat-uikit-react/tree/v6/push-notification-v6/push-notification-sample-app" 
                cta="View on GitHub"
                horizontal
              /> */}
    </CardGroup>
  </div>
</div>

<div className="flex flex-col w-full mt-8 bg-black -mb-24">
  <div className="bg-black text-gray-400 py-6 px-8 flex flex-col md:flex-row justify-between items-center rounded-t-xl">
    <div className="mb-4 md:mb-0">
      2026 © CometChat
    </div>

    <div className="flex space-x-6 items-center">
      <a href="https://www.linkedin.com/company/cometchat" target="_blank" className="flex items-center space-x-1 hover:text-white transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.762 2.239 5 5 5h14c2.762 0 5-2.238 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.268c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm13.5 11.268h-3v-5.604c0-1.337-.026-3.059-1.865-3.059-1.865 0-2.15 1.455-2.15 2.96v5.703h-3v-10h2.881v1.367h.041c.402-.76 1.384-1.561 2.847-1.561 3.044 0 3.606 2.003 3.606 4.609v5.585z" />
        </svg>

        <span>LinkedIn</span>
      </a>

      <a href="https://x.com/cometchat" target="_blank" className="flex items-center space-x-1 hover:text-white transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22.162 5.656c-.793.352-1.645.589-2.54.696a4.468 4.468 0 0 0 1.958-2.46 9.043 9.043 0 0 1-2.845 1.088 4.496 4.496 0 0 0-7.664 4.1 12.758 12.758 0 0 1-9.272-4.7 4.493 4.493 0 0 0 1.393 6.002 4.46 4.46 0 0 1-2.035-.562v.057a4.497 4.497 0 0 0 3.606 4.41 4.503 4.503 0 0 1-2.029.077 4.502 4.502 0 0 0 4.198 3.12 9.01 9.01 0 0 1-5.575 1.922c-.362 0-.721-.021-1.077-.063a12.73 12.73 0 0 0 6.901 2.021c8.282 0 12.808-6.86 12.808-12.808 0-.195-.005-.388-.014-.58a9.152 9.152 0 0 0 2.25-2.336z" />
        </svg>

        <span>Twitter</span>
      </a>

      <a href="https://github.com/cometchat" target="_blank" className="flex items-center space-x-1 hover:text-white transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577v-2.17c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.744.084-.729.084-.729 1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305 3.495.997.108-.775.418-1.305.76-1.605-2.665-.3-5.467-1.332-5.467-5.932 0-1.31.467-2.382 1.235-3.222-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23a11.5 11.5 0 0 1 3.003-.404 11.5 11.5 0 0 1 3.003.404c2.292-1.552 3.298-1.23 3.298-1.23.653 1.653.241 2.873.118 3.176.77.84 1.233 1.912 1.233 3.222 0 4.61-2.807 5.628-5.48 5.922.429.369.813 1.096.813 2.211v3.281c0 .319.218.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
        </svg>

        <span>GitHub</span>
      </a>
    </div>
  </div>
</div>