Overview
NotificationsButton
includes everything you need for user notifications:
- Notification bell icon with unread count badge
- Responsive modal that opens when clicked
- User settings panel for channel and topic management
- Notification history with read/unread states
- Built-in authentication and wallet integration
- β Quick setup with minimal configuration
- β Professional notification UI out of the box
- β Built-in responsive design (mobile + desktop)
- β Light/dark theme options
- β Limited visual customization (theme prop only)
Prerequisites
Before implementing the NotificationsButton component, ensure you have completed:- App Registration: Your app must be registered with Dialect (registration guide)
- SDK Setup: Configure the Dialect React SDK (Setup & Configuration guide)
- User Management Understanding: Familiarize yourself with subscriptions and channels (User Management guide)
Basic Usage
It is important that theNotificationsButton
is always wrapped around the client SDK. We recommend writing a small component to ensure it is always the case.
Simple Integration
Theme Options
Control the visual theme of the notification button and modal:- Light Theme
- Dark Theme
Channel Configuration
Control which additional notification channels users can configure. In-app notifications are always enabled by default."email"
- Email notifications"telegram"
- Telegram bot notifications- In-app - Always enabled (not configurable)
Custom Button
Replace the default notification bell with your own button component:open
- Boolean indicating if modal is opensetOpen
- Function to control modal stateunreadCount
- Number of unread notificationsref
- Required ref for the button element
Custom Modal
Replace the default modal container with your own:open
- Boolean indicating if modal should be shownsetOpen
- Function to control modal stateref
- Required ref for the modal containerchildren
- The notification content (must be rendered)
Advanced Configuration
Styling (Limited)
Available Styling Options
TheNotificationsButton
component has limited styling capabilities:
Wrapper Styling
You can style the button wrapper, but internal components use fixed styling:For Full Styling Control
If you need complete visual customization, use the standalone Notifications component instead:Component Behavior
Responsive Design
The component automatically adapts to different screen sizes:- Mobile: Full-screen modal overlay
- Tablet/Desktop: Positioned modal (420px Γ 600px)
- Button: Scales appropriately for touch interfaces
User Workflow
- Button Click: User clicks notification bell
- Authentication: User connects wallet (if not connected)
- Subscription: User signs a message, thereby subscribes to your app
- Settings: User can configure channels and topics
- Notifications: User views notification history
Troubleshooting
Common Issues
Button not appearing:- Verify
dappAddress
is correct and app is registered - Check that styles are imported before the component
- Ensure wallet adapter is properly configured
- Check browser console for JavaScript errors
- Verify wallet connection is working
- Ensure
dappAddress
matches your registered app
- CSS variables donβt affect
NotificationsButton
styling - Use the
theme
prop for basic theming - Consider the standalone
Notifications
component for full control
- Verify wallet adapter compatibility
- Check wallet permissions and connection state
- Test with different wallet providers
Development Tips
- Use
environment="development"
during development - Test with different wallet providers
- Verify notification flow end-to-end
- Check network requests in browser dev tools
Next Steps
- Need full styling control? Use the standalone Notifications component
- Want to send notifications? Check the Send SDK documentation
NotificationsButton
provides everything most applications need for user notifications with minimal setup. For advanced customization needs, consider the standalone Notifications
component.