# 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

```bash
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:
   ```javascript
   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

```typescript
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](./docs/DOCUMENTATION.md)
- [Configuration Guide](./docs/DOCUMENTATION.md#configuration)
- [Event Tracking](./docs/DOCUMENTATION.md#event-tracking)
- [Styling Guide](./docs/DOCUMENTATION.md#styling)
- [Troubleshooting](./docs/DOCUMENTATION.md#troubleshooting)

## Contributing

We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.

## License

MIT