From 903b51fa41dfb93546c4a79f189737be37b4c76b Mon Sep 17 00:00:00 2001 From: shagun-cometchat Date: Fri, 5 Jun 2026 17:34:21 +0530 Subject: [PATCH] docs(ui-kit/react): add campaigns and notification-feed documentation --- docs.json | 6 +- ui-kit/react/v7/campaigns.mdx | 214 ++++++ ui-kit/react/v7/components/conversations.mdx | 104 ++- .../react/v7/components/notification-feed.mdx | 635 ++++++++++++++++++ 4 files changed, 956 insertions(+), 3 deletions(-) create mode 100644 ui-kit/react/v7/campaigns.mdx create mode 100644 ui-kit/react/v7/components/notification-feed.mdx diff --git a/docs.json b/docs.json index bd1ec7e32..ca606ab38 100644 --- a/docs.json +++ b/docs.json @@ -646,7 +646,8 @@ "ui-kit/react/v7/ai-features" ] }, - "ui-kit/react/v7/call-features" + "ui-kit/react/v7/call-features", + "ui-kit/react/v7/campaigns" ] }, { @@ -670,7 +671,8 @@ "ui-kit/react/v7/components/outgoing-call", "ui-kit/react/v7/components/call-logs", "ui-kit/react/v7/components/search", - "ui-kit/react/v7/components/ai-assistant-chat" + "ui-kit/react/v7/components/ai-assistant-chat", + "ui-kit/react/v7/components/notification-feed" ] }, { diff --git a/ui-kit/react/v7/campaigns.mdx b/ui-kit/react/v7/campaigns.mdx new file mode 100644 index 000000000..de4c4fb22 --- /dev/null +++ b/ui-kit/react/v7/campaigns.mdx @@ -0,0 +1,214 @@ +--- +title: "Campaigns" +description: "Deliver targeted, rich notifications to users via an in-app notification feed powered by the CometChat Cards renderer." +--- + +CometChat Campaigns enables you to send rich, interactive notifications to users through an in-app notification feed. Each notification is rendered as a native card using the **CometChat Cards** library — supporting images, text, buttons, layouts, and interactive actions. + + +Before proceeding, ensure you have completed the [UI Kit integration](/ui-kit/react/getting-started) and the [Dashboard Setup](/campaigns#setup-flow) for Campaigns. + + + + + + +--- + +## Overview + +Campaigns delivers notifications as **Card Schema JSON** — a structured format that defines the visual layout of each notification card. The system consists of three layers: + +1. **CometChat Chat SDK** — Fetches feed items, manages read/delivered state, provides real-time listeners, handles push notification tracking +2. **CometChat Cards Library** (`@cometchat/cards-react`) — Renders Card Schema JSON into native DOM elements +3. **CometChat UI Kit** — Provides the ready-to-use `CometChatNotificationFeed` component that wires everything together + +### Architecture Flow + +``` +Dashboard / API → Campaign Created → Push + WebSocket Delivery + ↓ + SDK: NotificationFeedRequestBuilder.fetchNext() + ↓ + NotificationFeedItem.getContent() → Card Schema JSON + ↓ + Cards Library: CometChatCardView + ↓ + Native Rendered Card (images, text, buttons, layouts) + ↓ + User clicks button → onAction callback → Your code handles it +``` + +--- + +## How Cards Work + +Each `NotificationFeedItem` from the SDK contains a `content` field — an object holding the Card Schema JSON. This JSON is passed directly to the CometChat Cards renderer which produces a DOM element. + +The Cards library is a **pure renderer**: +- **Input**: Card Schema JSON string + theme mode + optional action callback +- **Output**: Native DOM element hierarchy + +It does not execute actions, manage message state, or call any SDK methods. When users click interactive elements (buttons, links), the library emits the action to your callback. You decide what happens — open a URL, navigate to a chat, make an API call, etc. + +### Card Schema JSON Example + +```json +{ + "version": "1.0", + "body": [ + { + "type": "column", + "backgroundColor": { + "light": "transparent", + "dark": "transparent" + }, + "gap": 5, + "items": [ + { + "type": "text", + "content": "📢 Announcement", + "variant": "heading2", + "id": "txt_99323141-2459-4e33-88d3-ca39c5fd2f50" + }, + { + "type": "text", + "content": "Your announcement message here.", + "variant": "body", + "id": "txt_61a417bc-5e4a-4ba2-bfe7-b7bc64dbaf35" + }, + { + "type": "divider", + "id": "div_80f5c7fb-fd10-41d1-8c2f-51498f0f62d0" + }, + { + "type": "button", + "label": "Learn More", + "backgroundColor": { + "light": "transparent", + "dark": "transparent" + }, + "textColor": { + "light": "#6C5CE7", + "dark": "#6C5CE7" + }, + "size": 40, + "fontSize": 13, + "borderRadius": 6, + "padding": { + "top": 0, + "right": 16, + "bottom": 0, + "left": 16 + }, + "action": { + "type": "openUrl", + "url": "" + }, + "id": "btn_9b87a3f1-b0c6-45b9-a4c2-e22ea590f17f" + } + ], + "id": "col_98fed9bd-1a95-4cee-aa81-84a9016e41f2" + } + ], + "fallbackText": "", + "style": { + "background": { + "light": "#E8E8E8", + "dark": "#E8E8E8" + }, + "borderRadius": 16, + "borderColor": { + "light": "#DFE6E9", + "dark": "#DFE6E9" + }, + "padding": 12 + } +} +``` + +The schema supports **20 element types** (text, image, icon, avatar, badge, divider, spacer, chip, progressBar, codeBlock, markdown, row, column, grid, accordion, tabs, button, iconButton, link, table) and **9 action types** (openUrl, chatWithUser, chatWithGroup, sendMessage, copyToClipboard, downloadFile, initiateCall, apiCall, customCallback). + +--- + +## How Cards Work in the UI Kit + +The `CometChatNotificationFeed` component uses the **CometChat Cards** library internally to render each notification. Here's what happens under the hood: + +1. The component fetches `NotificationFeedItem` objects from the SDK +2. For each item, it extracts the `content` field (Card Schema JSON) +3. It passes the JSON to `CometChatCardView` from `@cometchat/cards-react` +4. The Cards renderer produces native UI — text, images, buttons, layouts — directly from the JSON +5. When users click buttons/links inside a card, the action is emitted back to the component which handles navigation (open URL, navigate to chat, etc.) + +You don't need to interact with the Cards library directly when using `CometChatNotificationFeed` — it's all wired up. But if you want to render cards outside the feed (e.g., a standalone card in a modal), you can use the Cards library directly. See the [SDK Campaigns documentation](/sdk/javascript/campaigns#rendering-cards) for standalone usage. + +--- + +## Handling Push Notifications for Campaigns + +When a campaign push notification arrives via Web Push or FCM, you should: + +1. **Report delivery** — Call `CometChat.markPushNotificationDelivered()` when the notification is received +2. **Report click** — Call `CometChat.markPushNotificationClicked()` when the user clicks the notification +3. **Deep link** — Use the announcement ID from the push payload to fetch the full item via `CometChat.getNotificationFeedItem(id)` and display it + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +// When push notification is received (e.g., in service worker) +const pushNotification = new CometChat.PushNotification(pushPayloadData); +CometChat.markPushNotificationDelivered(pushNotification); + +// When user clicks the notification +CometChat.markPushNotificationClicked(pushNotification); + +// Navigate to feed or show specific item +const item = await CometChat.getNotificationFeedItem(pushNotification.getId()); +``` + +See the [SDK Campaigns documentation](/sdk/javascript/campaigns) for the complete push notification tracking API. + +--- + +## Sending Campaigns + +Before integrating the frontend, you need to set up channels, categories, templates, and campaigns in the CometChat Dashboard. Follow the [Dashboard Setup Guide](/campaigns#setup-flow) for step-by-step instructions with screenshots. + +--- + +## Using the UI Kit Component + +The easiest way to add a notification feed to your app is the `CometChatNotificationFeed` component. It handles fetching, rendering, pagination, filtering, real-time updates, and engagement reporting out of the box. + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; + +function NotificationsScreen() { + return ( + { + // Handle item click + }} + onBackPress={() => { + // Navigate back + }} + /> + ); +} +``` + +See the full [CometChatNotificationFeed component documentation](/ui-kit/react/v7/components/notification-feed) for all configuration options, styling, and customization. + +--- + +## Next Steps + + + + Full API reference for feed items, categories, engagement, and push tracking + + + Ready-to-use component with filtering, real-time updates, and styling + + diff --git a/ui-kit/react/v7/components/conversations.mdx b/ui-kit/react/v7/components/conversations.mdx index de328d2f4..5ab7936dd 100644 --- a/ui-kit/react/v7/components/conversations.mdx +++ b/ui-kit/react/v7/components/conversations.mdx @@ -77,7 +77,8 @@ description: "Scrollable list of recent one-on-one and group conversations for t "searchView": "ReactNode", "loadingView": "ReactNode", "emptyView": "ReactNode", - "errorView": "ReactNode" + "errorView": "ReactNode", + "options": "(conversation: CometChat.Conversation) => CometChatConversationOption[]" } }, "events": [ @@ -811,6 +812,73 @@ function CustomHeaderConversations() { +#### options + +Replace the context menu / hover actions on each conversation item. + +Default: + + + + + +Customized: + + + + + + + +```tsx +import { CometChat } from "@cometchat/chat-sdk-javascript"; +import { + CometChatConversations, + type CometChatConversationOption, +} from "@cometchat/chat-uikit-react"; + +function CustomOptionsConversations() { + const getOptions = (conversation: CometChat.Conversation): CometChatConversationOption[] => [ + { + id: "delete", + title: "Delete", + onClick: (conv) => { /* delete logic */ }, + }, + { + id: "mute", + title: "Mute Notification", + onClick: (conv) => { /* mute logic */ }, + }, + { + id: "unread", + title: "Mark as Unread", + onClick: (conv) => { /* mark unread logic */ }, + }, + { + id: "block", + title: "Block", + onClick: (conv) => { /* block logic */ }, + }, + ]; + + return ; +} +``` + + +```css +.cometchat-conversations .cometchat-menu-list__main-menu-item-icon-delete { + background: red; +} + +.cometchat-conversations .cometchat-menu-list__sub-menu { + background: transparent; + box-shadow: none; +} +``` + + + ### Compound Composition For full layout control, use sub-components. Omit any sub-component to hide it: @@ -1027,6 +1095,36 @@ Custom sound URL to play when new messages arrive (replaces the built-in sound). --- +### options + +Function that returns context menu options for each conversation item (shown on hover/swipe). + +| | | +| --- | --- | +| Type | `(conversation: CometChat.Conversation) => CometChatConversationOption[]` | +| Default | Default options (delete) | + +```tsx + [ + { + id: "pin", + title: "Pin", + iconURL: pinIcon, + onClick: (conv) => pinConversation(conv), + }, + { + id: "mute", + title: "Mute", + iconURL: muteIcon, + onClick: (conv) => muteConversation(conv), + }, + ]} +/> +``` + +--- + ### onItemClick Callback when a conversation item is clicked. @@ -1154,6 +1252,10 @@ Overrides survive component updates because the component never sets inline styl .cometchat-conversations .cometchat-conversations__item-receipt--read { background: #FAAA75; } + +.cometchat-conversations .cometchat-conversations__header-title{ + color: #F76809; +} ``` ### Customization Matrix diff --git a/ui-kit/react/v7/components/notification-feed.mdx b/ui-kit/react/v7/components/notification-feed.mdx new file mode 100644 index 000000000..4a20d0238 --- /dev/null +++ b/ui-kit/react/v7/components/notification-feed.mdx @@ -0,0 +1,635 @@ +--- +title: "Notification Feed" +description: "Full-screen notification feed component with category filtering, card rendering, real-time updates, and engagement reporting." +--- + + +```json +{ + "component": "CometChatNotificationFeed", + "package": "@cometchat/chat-uikit-react", + "import": "import { CometChatNotificationFeed } from \"@cometchat/chat-uikit-react\";", + "description": "Full-screen notification feed with category filtering, timestamp grouping, card rendering via @cometchat/cards-react, real-time updates, and automatic engagement reporting.", + "cssRootClass": ".cometchat-notification-feed", + "props": { + "data": { + "title": { "type": "string", "default": "\"Notifications\"" }, + "notificationFeedRequestBuilder": { "type": "NotificationFeedRequestBuilder", "default": "SDK default (20 per page)" }, + "notificationCategoriesRequestBuilder": { "type": "NotificationCategoriesRequestBuilder", "default": "SDK default (50 per page)" } + }, + "callbacks": { + "onItemClick": "(feedItem: NotificationFeedItem) => void", + "onActionClick": "(feedItem: NotificationFeedItem, action: CardAction) => void", + "onError": "(error: CometChat.CometChatException) => void", + "onBackPress": "() => void" + }, + "visibility": { + "showHeader": { "type": "boolean", "default": true }, + "showBackButton": { "type": "boolean", "default": false }, + "showFilterChips": { "type": "boolean", "default": true } + }, + "viewSlots": { + "headerView": "ReactNode", + "emptyView": "ReactNode", + "errorView": "ReactNode", + "loadingView": "ReactNode", + "itemView": "(item: NotificationFeedItem) => ReactNode" + }, + "cards": { + "cardThemeMode": { "type": "\"auto\" | \"light\" | \"dark\"", "default": "\"auto\"" }, + "cardThemeOverride": { "type": "Record", "default": "undefined" } + } + }, + "automaticBehaviors": [ + "Real-time updates via WebSocket listener", + "Delivery reporting on fetch", + "Read reporting on viewport visibility (IntersectionObserver)", + "Unread count polling every 30 seconds", + "Infinite scroll pagination", + "Timestamp grouping (Today, Yesterday, day name, date)", + "Category filter chips with unread badges", + "Mark all read button" + ], + "additionalExports": { + "useNotificationUnreadCount": "Hook for tracking unread count with shared polling" + } +} +``` + + +`CometChatNotificationFeed` displays a scrollable notification feed where each item is rendered as a card using `@cometchat/cards-react`. It handles fetching, pagination, category filtering, timestamp grouping, real-time updates, and read/delivered/engagement reporting automatically. + + + + + +--- + +## Where It Fits + +`CometChatNotificationFeed` is a full-screen component. Drop it into a page or route. It manages its own data fetching, state, and real-time listeners — you just handle navigation callbacks. + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; + +function NotificationsPage() { + return ( + window.history.back()} + onItemClick={(item) => { + // Handle item click (e.g., open detail or deep link) + }} + /> + ); +} +``` + +--- + +## Minimal Render + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; + +function NotificationsDemo() { + return ( +
+ +
+ ); +} + +export default NotificationsDemo; +``` + +Prerequisites: CometChat SDK initialized with `CometChatUIKit.init()` and a user logged in. + +Root CSS class: `.cometchat-notification-feed` + +--- + +## Filtering Feed Items + +Control what loads using custom request builders: + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; +import { CometChat } from "@cometchat/chat-sdk-javascript"; + +function UnreadNotifications() { + return ( + + ); +} +``` + +### Filter Options + +| Builder Method | Description | +| --- | --- | +| `.setLimit(number)` | Items per page (default 20, max 100) | +| `.setReadState(state)` | `"read"`, `"unread"`, or `"all"` | +| `.setCategory(string)` | Filter by category label | +| `.setChannelId(string)` | Filter by channel | +| `.setTags(string[])` | Filter by tags | +| `.setDateFrom(string)` | ISO 8601 date lower bound | +| `.setDateTo(string)` | ISO 8601 date upper bound | + +--- + +## Actions and Events + +### Callback Props + +#### onItemClick + +Fires when a feed item card is clicked. + +```tsx + { + console.log("Item clicked:", item.getId()); + }} +/> +``` + +#### onActionClick + +Fires when an interactive element (button, link) inside a card is clicked. The `action` object contains the action type, parameters, and the element ID that triggered it. + +```tsx + { + const { type, params, elementId } = action; + switch (type) { + case "openUrl": + window.open(params.url as string, "_blank"); + break; + case "chatWithUser": + // Navigate to chat with params.uid + break; + case "chatWithGroup": + // Navigate to group chat with params.guid + break; + } + }} +/> +``` + +#### onError + +Fires when an internal error occurs (network failure, SDK exception). + +```tsx + { + console.error("Feed error:", error.message); + }} +/> +``` + +#### onBackPress + +Fires when the back button in the header is clicked. + +```tsx + window.history.back()} +/> +``` + +### Automatic Behaviors + +The component handles these automatically — no manual setup needed: + +| Behavior | Description | +| --- | --- | +| Real-time updates | New items appear at the top via WebSocket `NotificationFeedListener` | +| Delivery reporting | Items are reported as delivered when fetched | +| Read reporting | Items are reported as read when visible in viewport (IntersectionObserver) | +| Unread count polling | Polls unread count every 30 seconds to update badges | +| Infinite scroll | Fetches next page when scrolling near the bottom | +| Timestamp grouping | Groups items as "Today", "Yesterday", day name, or date | +| Category filtering | Filter chips row with per-category unread badges | +| Mark all read | Header button to mark all notifications as read | + +--- + +## Customization + +### View Props + +```tsx +} + emptyView={} + loadingView={} + errorView={} + itemView={(item) => } +/> +``` + +| Slot | Signature | Replaces | +| --- | --- | --- | +| `headerView` | `ReactNode` | Entire header bar | +| `loadingView` | `ReactNode` | Loading state | +| `emptyView` | `ReactNode` | Empty state | +| `errorView` | `ReactNode` | Error state | +| `itemView` | `(item: NotificationFeedItem) => ReactNode` | Individual feed item rendering | + +### Compound Composition + +For full layout control, use sub-components. Omit any sub-component to hide it: + +```tsx + + + + + +``` + +Available sub-components: + +| Sub-component | Description | Props | Flat API equivalent | +| --- | --- | --- | --- | +| `Root` | Context provider and container | All Root props + `children` | — | +| `Header` | Header bar with title + mark-all-read | `title`, `showBackButton`, `onBackPress`, `children` | `headerView` | +| `FilterChips` | Category filter chips | `children` | — | +| `List` | Scrollable feed list | `itemView` | `itemView` | +| `Item` | Individual feed item | `item`, `cardThemeMode`, `cardThemeOverride` | — | +| `EmptyState` | Empty state | `children` | `emptyView` | +| `ErrorState` | Error state | `children` | `errorView` | +| `LoadingState` | Loading state | `children` | `loadingView` | + +### CSS Styling + +Override design tokens on the component selector: + +```css +.cometchat-notification-feed { + --cometchat-background-color-01: #1a1a2e; + --cometchat-text-color-primary: #ffffff; +} +``` + +### CSS Classes + +| Class | Description | +| --- | --- | +| `.cometchat-notification-feed` | Root container | +| `.cometchat-notification-feed__header` | Header bar | +| `.cometchat-notification-feed__header-title` | Header title text | +| `.cometchat-notification-feed__header-back` | Back button | +| `.cometchat-notification-feed__mark-all-read` | Mark all read button | +| `.cometchat-notification-feed__chips` | Filter chips container | +| `.cometchat-notification-feed__chip` | Individual filter chip | +| `.cometchat-notification-feed__chip--active` | Active filter chip | +| `.cometchat-notification-feed__chip--inactive` | Inactive filter chip | +| `.cometchat-notification-feed__chip-badge` | Chip unread badge | +| `.cometchat-notification-feed__content` | Scrollable content area | +| `.cometchat-notification-feed__item` | Feed item container | +| `.cometchat-notification-feed__item--unread` | Unread feed item | +| `.cometchat-notification-feed__unread-indicator` | Unread dot indicator | +| `.cometchat-notification-feed__item-meta` | Item metadata row (category + time) | +| `.cometchat-notification-feed__card-container` | Card wrapper | +| `.cometchat-notification-feed__loading` | Loading state | +| `.cometchat-notification-feed__empty` | Empty state | +| `.cometchat-notification-feed__error` | Error state | + +--- + +## Props + +All props are optional. + +--- + +### title + +Header title text. + +| | | +| --- | --- | +| Type | `string` | +| Default | `"Notifications"` | + +--- + +### showHeader + +Shows/hides the entire header. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `true` | + +--- + +### showBackButton + +Shows/hides the back button in the header. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `false` | + +--- + +### showFilterChips + +Shows/hides the category filter chips row. + +| | | +| --- | --- | +| Type | `boolean` | +| Default | `true` | + +--- + +### notificationFeedRequestBuilder + +Custom request builder for fetching feed items. + +| | | +| --- | --- | +| Type | `CometChat.NotificationFeedRequestBuilder` | +| Default | SDK default (20 per page) | + +--- + +### notificationCategoriesRequestBuilder + +Custom request builder for fetching categories. + +| | | +| --- | --- | +| Type | `CometChat.NotificationCategoriesRequestBuilder` | +| Default | SDK default (50 per page) | + +--- + +### onItemClick + +Callback fired when a feed item card is clicked. + +| | | +| --- | --- | +| Type | `(feedItem: NotificationFeedItem) => void` | +| Default | `undefined` | + +--- + +### onActionClick + +Callback fired when an interactive element inside a card is clicked. + +| | | +| --- | --- | +| Type | `(feedItem: NotificationFeedItem, action: CardAction) => void` | +| Default | `undefined` | + +The `CardAction` object contains: +- `type` — Action type (e.g., `"openUrl"`, `"chatWithUser"`) +- `params` — Action parameters (e.g., `{ url: "..." }`, `{ uid: "..." }`) +- `elementId` — ID of the element that triggered the action + +--- + +### onError + +Callback fired when the component encounters an error. + +| | | +| --- | --- | +| Type | `(error: CometChat.CometChatException) => void` | +| Default | `undefined` | + +--- + +### onBackPress + +Callback fired when the back button is pressed. + +| | | +| --- | --- | +| Type | `() => void` | +| Default | `undefined` | + +--- + +### cardThemeMode + +Theme mode for the card renderer (`@cometchat/cards-react`). + +| | | +| --- | --- | +| Type | `"auto" \| "light" \| "dark"` | +| Default | `"auto"` | + +--- + +### cardThemeOverride + +Custom theme override passed to the card renderer. + +| | | +| --- | --- | +| Type | `Record` | +| Default | `undefined` | + +--- + +### headerView + +Custom component replacing the entire header. + +| | | +| --- | --- | +| Type | `ReactNode` | +| Default | Built-in header with title and mark-all-read button | + +--- + +### loadingView + +Custom component displayed during the initial loading state. + +| | | +| --- | --- | +| Type | `ReactNode` | +| Default | Built-in loading state | + +--- + +### errorView + +Custom component displayed when an error occurs. + +| | | +| --- | --- | +| Type | `ReactNode` | +| Default | Built-in error state with retry button | + +--- + +### emptyView + +Custom component displayed when there are no notifications. + +| | | +| --- | --- | +| Type | `ReactNode` | +| Default | Built-in empty state with illustration | + +--- + +### itemView + +Custom renderer for each feed item. + +| | | +| --- | --- | +| Type | `(item: NotificationFeedItem) => ReactNode` | +| Default | Built-in card renderer | + +--- + +## Additional Exports + +### useNotificationUnreadCount + +A React hook for tracking unread notification count. Uses a shared singleton — multiple components share one polling interval and WebSocket listener. + +```tsx +import { useNotificationUnreadCount } from "@cometchat/chat-uikit-react"; + +function NotificationIcon() { + const { count, refresh, isLoading } = useNotificationUnreadCount(); + + return ( + + ); +} +``` + +#### Options + +| Option | Type | Default | Description | +| --- | --- | --- | --- | +| `category` | string | undefined | Filter count by category | +| `pollingInterval` | number | 30000 | Polling interval in milliseconds | + +#### Return Value + +| Field | Type | Description | +| --- | --- | --- | +| `count` | number | Current unread count | +| `refresh` | `() => Promise` | Manually refresh the count | +| `isLoading` | boolean | Whether the initial fetch is in progress | + +--- + +## Common Patterns + +### Show only unread items + +```tsx + +``` + +### Hide filter chips and header + +```tsx + +``` + +### Embed in a sidebar + +```tsx +import { CometChatNotificationFeed } from "@cometchat/chat-uikit-react"; + +function NotificationsSidebar() { + return ( +
+ +
+ ); +} +``` + +### Add notification badge to navigation + +```tsx +import { useState } from "react"; +import { + CometChatNotificationFeed, + useNotificationUnreadCount, +} from "@cometchat/chat-uikit-react"; + +function App() { + const [showFeed, setShowFeed] = useState(false); + const { count } = useNotificationUnreadCount(); + + return ( + <> + + {showFeed && ( + setShowFeed(false)} + showBackButton={true} + /> + )} + + ); +} +``` + +--- + +## Next Steps + + + + Overview of how campaigns work end-to-end + + + Low-level SDK APIs for feed items, categories, and engagement + + + Customize colors, fonts, and appearance + + + Browse all prebuilt UI components + +