Skip to content

notifications.mdx

Latest commit

 

History

History
225 lines (199 loc) · 11.5 KB

notifications.mdx

File metadata and controls

225 lines (199 loc) · 11.5 KB
mode title description canonical
custom
Notifications
Engage users beyond chat with real-time and scheduled notifications across Push, Email, and SMS.

{/* Hero Section */}

Notifications

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

Keep users informed and connected with CometChat's robust notification system, designed to enhance user engagement and retention.

Notifications UI preview

Push Notifications

Real-time alerts for new messages, calls, and events routed through FCM or APNs.

<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 />

Email Notifications

Fallback emails sent only when a chat message stays unread beyond your configurable wait window.

<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>

SMS Notifications

SMS fallbacks fire only when a chat message remains unread after your configurable wait window.

<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>

{/* Sample Apps Section */}

Push Notification Demos

Show working experiences just like Chat & Calling: clones, payloads, and end-to-end journeys. 

<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
/> */}

{/* Footer */}