Bloomreach SDK Integration

A React component library for integrating Bloomreach SDK with push notifications support.

Features

• 🔔 Push Notification Support
• 🎯 Customizable Consent Banner
• 📊 Automatic Consent Tracking
• 🔄 Subscription Management
• 🎨 Customizable Styling
• 🌐 Cross-browser Support
• 📱 Graceful fallback for unsupported browsers

Quick Start

Installation

npm install @cliqdigital/bloomreach-sdk

Prerequisites

Before using the Bloomreach integration, ensure the following prerequisites are met:

1. Web Push Notifications Setup:

   • Enable web push notifications in Bloomreach Integrations
   • Do not use FCM (Firebase Cloud Messaging)
   • Configure the necessary service worker and VAPID keys

2. Consent Management:

   • Go to Project Settings -> Privacy Management -> Consent
   • Add a new consent named browser_notifications
   • This consent will be used to track user permission for browser notifications

3. Service Worker Setup:

   • Create a file public/service-worker.js with the following content:

   importScripts('https://eu2-api.eng.bloomreach.com/js/service-worker.min.js');

   • This service worker is required for web push notifications to work

Browser Compatibility

The SDK supports all modern browsers with the following considerations:

• Full Support: Chrome, Firefox, Edge, Opera (desktop and mobile)
• Limited Support:
  • Safari on iOS/iPadOS does not support web push notifications
  • The SDK automatically detects this and gracefully disables push notification features
  • All other tracking and non-notification features will continue to work

The SDK performs automatic browser capability detection and won't show notification consent banners on unsupported browsers. This ensures a consistent experience for users across all platforms.

Basic Usage

import { BloomreachProvider } from '@cliqdigital/bloomreach-sdk';

function App() {
  return (
    <BloomreachProvider
      config={{
        projectToken: "your-project-token",
        notifications: {
          showConsentBanner: true,
          consentBannerProps: {
            title: "Enable Push Notifications",
            description: "Stay updated with our latest news and updates!"
          }
        }
      }}
    >
      {/* Your app content */}
    </BloomreachProvider>
  );
}

Documentation

For detailed documentation, please see:

• Full Documentation
• Configuration Guide
• Event Tracking
• Styling Guide
• Troubleshooting

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT