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