# Zence Marketing Web SDK (`@zencemarketing/web-sdk`)

Official Web SDK to integrate ZenceMarketing's push, popup, and event tracking features into your web application.

---

## ✨ Features

- 🔔 Push Notification Subscription & Delivery  
- 💬 In-Page Popup Triggers  
- 📊 Custom Event Tracking  
- 📋 Easy SDK Initialization  
- 🩵 Client-Side Logging with Custom Log Levels  

---

## 📦 Installation

Install the SDK in your project via npm:

```bash
npm install @zencemarketing/web-sdk
```

---

## 🛠️ SDK Initialization

Before using any feature, initialize the SDK:

```js
import SDK, { logger } from '@zencemarketing/web-sdk';

await SDK.init({
  clientID: "<your-client-id>",
  clientSecret: "<your-client-secret>",
  programCode: "<program-code>",
  websiteUrl: "<your-domain>"
});
```

---

## 🔔 Push Notifications

### Subscribe User to Push

```js
SDK.subscribeUserPush("/sw.js File Path", "userID");
```

- Registers service worker and subscribes user to push notifications.
- Requires a valid `service-worker` file path.

### Send Push Notification

```js
SDK.sendNotification(payload);
```

- Send personalized or campaign-based notifications to users.
- `payload` includes `title`, `body`, `icon`, `image`, `data`, etc.

## 📋 Sample Push Payload

```json
{
  "userID": "user123",
  "title": "Welcome!",
  "body": "Thanks for visiting.",
  "icon": "icon-url",
  "badge": "badge-url",
  "image": "image-url",
  "data": {
    "productURL": "https://yourshop.com/product/123"
  },
  "websiteUrl": "yourshop.com",
  "timestamp": "ISO_8601_Timestamp"
  "campaignId": "campaign001",
  "actions": [
    { "action": "view", "title": "View", "icon": "view-icon-url" },
    { "action": "dismiss", "title": "Dismiss", "icon": "dismiss-icon-url" }
  ]
}
```

### Check Subscription Status

```js
SDK.getSubscriptionStatus();
```

- Verifies if the user is already subscribed.
- Returns a object indicating the current push subscription.

---

## 💬 Popup Subscription

```js
SDK.subscribeUserPop("userID123");
```

- Enables in-browser popups for the user.

---

## 📊 Event Tracking

```js
SDK.customEvent("event_name", data, "userID123");
```

- Tracks any custom events (e.g., page view, click, purchase).
- Requires `event_name`, `data` (object), and user ID.

---

## 🩵 Logging

The SDK provides a simple logger for debugging and monitoring.

```js
import { logger } from '@zencemarketing/web-sdk';

logger.setLevel("info");     // Options: none, error, warn, info, debug
logger.setEnabled(true);      // Enable or disable console & remote logging

logger.info("Hello from SDK!");  // Log messages
```

---

## 🔐 Environment Support

This SDK supports modern browsers and is optimized for:

- React
- Vanilla JS
- TypeScript

---

## 📄 License

MIT License

---

## 📬 Support

For any help or questions, contact us at [support@zencemarketing.com](mailto:support@zencemarketing.com)

---

## 🛠 Maintained with ❤️ by ZenceMarketing

For integration help, contact your ZenceMarketing team.