Skip to content

Push Notifications ​

Overview ​

CloudCusp Mailer integrates web push notification capabilities to deliver targeted messages directly to your subscribers' browsers. Complement your email marketing with timely browser notifications for increased engagement and click-through rates without relying on email deliverability.

Push Notification Basics ​

What are Push Notifications? ​

Browser-based messages delivered directly to subscriber devices:

Characteristics:

  • Displayed in browser notifications (even when tab not active)
  • Non-intrusive but attention-grabbing
  • High engagement rates compared to email
  • Timely delivery for breaking news
  • Complementary to email campaigns
  • Works on desktop and mobile browsers

Supported Browsers:

  • Chrome/Chromium-based browsers
  • Firefox
  • Edge
  • Opera
  • Mobile browsers (Android)

Firebase Cloud Messaging Integration ​

Setup Firebase ​

Configure Firebase Cloud Messaging for push delivery:

Prerequisites:

  1. Google/Firebase account
  2. Firebase project created
  3. Service account credentials
  4. Web application registered

Configuration Steps:

  1. Go to CloudCusp Mailer → Push Notifications → Settings
  2. Click Firebase Configuration
  3. Enter Firebase API Key
  4. Upload service account JSON
  5. Configure Web app credentials
  6. Test connection
  7. Save settings

Service Account JSON:

json
{
  "type": "service_account",
  "project_id": "your-project-id",
  "private_key_id": "key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n",
  "client_email": "firebase-account@project.iam.gserviceaccount.com",
  "client_id": "1234567890",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs"
}

Push Notification Setup ​

Device Registration ​

Enable subscribers to receive notifications:

Client-side Registration:

  1. JavaScript code requests browser permission
  2. Subscriber grants notification permission
  3. Browser generates device token
  4. Token sent to CloudCusp Mailer
  5. Device added to subscriber profile

Implementation:

html
<!-- Add to website -->
<script src="https://your-site.com/ccsp-push-notifications.js"></script>
<script>
  CCFMessaging.requestPermission({
    serverKey: 'YOUR_PUBLIC_KEY'
  });
</script>

Device Management ​

View and manage subscriber devices:

  1. Go to CloudCusp Mailer → Push Notifications → Device Management
  2. View all registered devices
  3. See device details:
    • Device ID
    • Subscriber email
    • Device type
    • Registration date
    • Last active
    • Platform (Chrome, Firefox, etc.)

Device Actions:

  • Remove device
  • Disable notifications for device
  • Test notification to device
  • View notification history

Subscriber Opt-in ​

Control notification permissions:

Notification Settings:

  • Allow notifications: ON/OFF
  • Notification frequency
  • Notification categories
  • Quiet hours (time range without notifications)
  • Device preferences

Subscriber Preferences Page:

  1. Navigate to notification preferences
  2. Toggle notification permission
  3. Set notification frequency
  4. Choose notification types
  5. Configure quiet hours
  6. Save preferences

Push Notification Creation ​

Notification Composer ​

Create professional push notifications:

Components:

  • Notification title (max 65 characters)
  • Notification body/message (max 240 characters)
  • Action buttons (up to 3)
  • Icon/badge image
  • Click action URL
  • Analytics tags

Composer Interface ​

Fields:

FieldMax LengthRequiredNotes
Title65 charsYesMain message headline
Body240 charsYesDetailed message
IconN/AOptionalLogo/image URL
BadgeN/AOptionalSmall badge icon
Click URLN/AYesTarget URL on click
Action 120 charsOptionalButton text
Action 220 charsOptionalButton text
Action 320 charsOptionalButton text

Notification Types ​

Standard Notification:

Title: "New Sale Alert"
Body: "Get 30% off your favorite products. Use code: SAVE30"
Click URL: https://example.com/sale

Action Buttons:

Main: "Shop Now" → https://example.com/sale
Button 1: "Learn More" → https://example.com/details
Button 2: "Dismiss" → (close notification)

Rich Media:

Icon: https://example.com/logo.png
Badge: https://example.com/badge.png
Title: "New Blog Post"
Body: "Check out our latest article on email marketing"
Click URL: https://example.com/blog/latest-article

Sending Notifications ​

Schedule Notification ​

Send notification at optimal time:

  1. Create notification in composer
  2. Click Schedule
  3. Select delivery date/time
  4. Choose timezone handling
  5. Select target subscribers/devices
  6. Review before sending
  7. Schedule notification

Scheduling Options:

  • Send immediately
  • Schedule for specific date/time
  • Optimize send time per subscriber
  • Timezone-aware scheduling

Targeted Distribution ​

Send to specific subscriber segments:

Target Options:

  • All subscribers with notifications enabled
  • Specific lists
  • Specific segments
  • Subscribers with specific tags
  • Custom filter conditions

Filter Conditions:

Send to:
├─ All subscribers in "Premium" list
├─ Who have opened email in last 30 days
├─ AND have "Engaged" tag
├─ AND are from United States
└─ Exclude: unsubscribed or bounced

Batch Processing ​

Manage large notification sends:

Batch Features:

  • Configurable batch size
  • Rate limiting
  • Automatic retry on failure
  • Progress tracking
  • Real-time statistics

Notification Analytics ​

Performance Metrics ​

Track notification engagement:

Available Metrics:

  • Total sent
  • Delivery rate
  • Click rate
  • Button click breakdown
  • Click-through rate (CTR)
  • Unique clickers
  • Repeat clickers
  • Device breakdown
  • Geographic breakdown

Device Management ​

View All Devices ​

See all registered notification devices:

  1. Go to CloudCusp Mailer → Push Notifications → Device Management
  2. Browse all devices
  3. Filter by status, subscriber, platform

Device Information:

  • Device ID
  • Subscriber email
  • Platform (Chrome, Firefox, etc.)
  • Browser version
  • Registration date
  • Last active date
  • Active status

Device Actions ​

Manage individual devices:

Available Actions:

  • Send test notification
  • Disable/enable notifications
  • Remove device
  • View notification history
  • Update subscriber info
  • Refresh device token

Device Cleanup ​

Remove inactive devices:

  1. Go to Device Management
  2. Click Cleanup
  3. Select criteria:
    • Not active for X days
    • Failed delivery rate exceeds X%
    • Status = inactive
  4. Review devices to remove
  5. Confirm cleanup

Cleanup Process:

  • Automatic removal of stale tokens
  • Re-request permissions from inactive users
  • Clean up failed delivery addresses
  • Improve delivery rate

Notification Templates ​

Create Templates ​

Save notification designs for reuse:

  1. Go to CloudCusp Mailer → Push Notifications → Templates
  2. Click Create Template
  3. Enter template name
  4. Create notification design
  5. Add variable placeholders
  6. Save template

Template Variables:

{subscriber_name} - Subscriber first name
{subscriber_email} - Subscriber email
{site_name} - Website name
{date} - Current date
{custom_field} - Custom subscriber field

Template Example:

Title: "Hello {subscriber_name}!"
Body: "Check out new content on {site_name}"
Click URL: https://example.com

Template Library ​

Browse and use saved templates:

Template Features:

  • Quick start with templates
  • Modify template for specific use
  • Duplicate template
  • Delete unused templates
  • Preview template rendering
  • Template categories

Compliance & Best Practices ​

Permission Management ​

Handle notification permissions properly:

Permission Levels:

  • Granted: User allowed notifications
  • Denied: User blocked notifications
  • Prompt: User hasn't decided yet

Handling Denials:

  • Don't repeatedly request if denied
  • Provide way to re-enable in settings
  • Respect user preference

Notification Frequency ​

Avoid notification fatigue:

Best Practices:

  1. Frequency: 1-3 notifications per week maximum
  2. Timing: Send during business hours (9 AM - 5 PM)
  3. Relevance: Only send relevant notifications
  4. Quiet Hours: Respect subscriber preferences
  5. Value: Ensure each notification provides value

Privacy & GDPR ​

Ensure compliance:

Requirements:

  • Explicit permission to send notifications
  • Clear opt-out mechanism
  • Privacy policy disclosure
  • No personal data in notification body
  • Secure device token storage
  • GDPR compliance for EU subscribers

Content Guidelines ​

Write effective notifications:

Do's:

  • Use clear, action-oriented language
  • Keep title short and compelling
  • Include primary action button
  • Personalize when possible
  • A/B test different messages
  • Time sends optimally

Don'ts:

  • Send too frequently (notification fatigue)
  • Use all caps or excessive punctuation
  • Send irrelevant notifications
  • Include sensitive information
  • Request confirmation on trivial actions
  • Send during off hours without reason

Analytics Integration ​

Combine Email & Push ​

Track multi-channel engagement:

Integrated Metrics:

  • Email + Push clicks
  • Multi-channel engagement score
  • Customer journey tracking
  • Attribution modeling
  • Combined ROI

Comparison:

Campaign Performance:
├─ Email Only: 5% CTR
├─ Push Only: 24% CTR
├─ Email + Push: 31% CTR (stacking effect)

Troubleshooting ​

Common Issues ​

Notifications Not Appearing:

  1. Check subscriber permission granted
  2. Verify Firebase configuration
  3. Check browser notification settings
  4. Test with specific device
  5. Review browser console for errors

Low Delivery Rate:

  1. Check invalid device tokens
  2. Run device cleanup
  3. Verify Firebase API key
  4. Check browser push service status
  5. Verify notification content

High Opt-out Rate:

  1. Reduce notification frequency
  2. Improve notification relevance
  3. Respect quiet hours
  4. Personalize messages
  5. A/B test different approaches