@cliqdigital/bloomreach-sdk NPM

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:

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
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
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>
  );
}