Prompts Cheatsheet

Add real-time in-app notification system using SuprSend React SDK.

Requirements:
- Implement Inbox component with bell icon and unread badge in header
- Add toast notifications in bottom-right corner when new notifications arrive
- Toast notifications should have progress bar animation
- Ensure toast notifications don't block UI interactions (use pointer-events CSS)
- Badge count should persist until user opens inbox popover
- Use SuprSend's useFeedClient hook to listen for 'feed.new_notification' events
- Display toasts using ToastNotificationCard component from @suprsend/react
- Integrate with react-hot-toast for toast management

Build notification preferences management page using SuprSend React SDK.

Requirements:
- Display all notification categories with toggle switches for opt-in/opt-out
- Show channel-level preferences (email, inbox) for each category
- Set default preferences to opt-in for both email and inbox channels when user first signs up
- Use SuprSend's useSuprSendClient hook to access preferences API
- Implement getPreferences, updateCategoryPreference, and updateChannelPreferenceInCategory methods
- Ensure preferences are respected when triggering workflows (handled automatically by SuprSend)
- Add UI to manage category and channel-level preferences with real-time updates
- Use PreferenceOptions.OPT_IN and PreferenceOptions.OPT_OUT constants

Integrate SuprSend React SDK in your application.

Requirements:
- Install @suprsend/react package
- Wrap your app with SuprSendProvider component
- Configure SuprSendProvider with environment variables for workspace key and public key
- Set distinctId for user identification
- For enhanced security, pass userToken to SuprSendProvider
- Ensure all API keys are stored in environment variables